github.com/minio/console@v1.4.1/web-app/src/utils/stylesUtils.ts (about) 1 // This file is part of MinIO Console Server 2 // Copyright (c) 2022 MinIO, Inc. 3 // 4 // This program is free software: you can redistribute it and/or modify 5 // it under the terms of the GNU Affero General Public License as published by 6 // the Free Software Foundation, either version 3 of the License, or 7 // (at your option) any later version. 8 // 9 // This program is distributed in the hope that it will be useful, 10 // but WITHOUT ANY WARRANTY; without even the implied warranty of 11 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 12 // GNU Affero General Public License for more details. 13 // 14 // You should have received a copy of the GNU Affero General Public License 15 // along with this program. If not, see <http://www.gnu.org/licenses/>. 16 17 import { IEmbeddedCustomStyles } from "../common/types"; 18 import get from "lodash/get"; 19 20 export const getOverrideColorVariants: ( 21 customStyles: string, 22 ) => false | IEmbeddedCustomStyles = (customStyles) => { 23 try { 24 return JSON.parse(atob(customStyles)) as IEmbeddedCustomStyles; 25 } catch (e) { 26 console.error("Error processing override styles, skipping.", e); 27 return false; 28 } 29 }; 30 31 export const generateOverrideTheme = (overrideVars: IEmbeddedCustomStyles) => { 32 let retVal = undefined; 33 34 try { 35 retVal = { 36 bgColor: overrideVars.backgroundColor, 37 fontColor: overrideVars.fontColor, 38 borderColor: overrideVars.borderColor, 39 bulletColor: overrideVars.fontColor, 40 logoColor: "#C51B3F", 41 logoLabelColor: overrideVars.fontColor, 42 logoLabelInverse: "#FFF", 43 loaderColor: overrideVars.loaderColor, 44 boxBackground: overrideVars.boxBackground, 45 mutedText: "#9c9c9c", 46 secondaryText: "#9c9c9c", 47 buttons: { 48 regular: { 49 enabled: { 50 border: overrideVars.regularButtonStyles.textColor, 51 text: overrideVars.regularButtonStyles.textColor, 52 background: "transparent", 53 iconColor: overrideVars.regularButtonStyles.textColor, 54 }, 55 disabled: { 56 border: overrideVars.regularButtonStyles.disabledText, 57 text: overrideVars.regularButtonStyles.disabledText, 58 background: "transparent", 59 iconColor: overrideVars.regularButtonStyles.disabledText, 60 }, 61 hover: { 62 border: overrideVars.regularButtonStyles.hoverText, 63 text: overrideVars.regularButtonStyles.hoverText, 64 background: "transparent", 65 iconColor: overrideVars.regularButtonStyles.hoverText, 66 }, 67 pressed: { 68 border: overrideVars.regularButtonStyles.activeText, 69 text: overrideVars.regularButtonStyles.activeText, 70 background: "transparent", 71 iconColor: overrideVars.regularButtonStyles.activeText, 72 }, 73 }, 74 callAction: { 75 enabled: { 76 border: overrideVars.buttonStyles.backgroundColor, 77 text: overrideVars.buttonStyles.textColor, 78 background: overrideVars.buttonStyles.backgroundColor, 79 iconColor: overrideVars.buttonStyles.textColor, 80 }, 81 disabled: { 82 border: overrideVars.buttonStyles.disabledColor, 83 text: overrideVars.buttonStyles.disabledText, 84 background: overrideVars.buttonStyles.disabledColor, 85 iconColor: overrideVars.buttonStyles.disabledText, 86 }, 87 hover: { 88 border: overrideVars.buttonStyles.hoverColor, 89 text: overrideVars.buttonStyles.hoverText, 90 background: overrideVars.buttonStyles.hoverColor, 91 iconColor: overrideVars.buttonStyles.hoverText, 92 }, 93 pressed: { 94 border: overrideVars.buttonStyles.activeColor, 95 text: overrideVars.buttonStyles.activeText, 96 background: overrideVars.buttonStyles.activeColor, 97 iconColor: overrideVars.buttonStyles.activeText, 98 }, 99 }, 100 secondary: { 101 enabled: { 102 border: overrideVars.secondaryButtonStyles.textColor, 103 text: overrideVars.secondaryButtonStyles.textColor, 104 background: "transparent", 105 iconColor: overrideVars.secondaryButtonStyles.textColor, 106 }, 107 disabled: { 108 border: overrideVars.secondaryButtonStyles.disabledText, 109 text: overrideVars.secondaryButtonStyles.disabledText, 110 background: "transparent", 111 iconColor: overrideVars.secondaryButtonStyles.disabledText, 112 }, 113 hover: { 114 border: overrideVars.secondaryButtonStyles.hoverText, 115 text: overrideVars.secondaryButtonStyles.hoverText, 116 background: "transparent", 117 iconColor: overrideVars.secondaryButtonStyles.hoverText, 118 }, 119 pressed: { 120 border: overrideVars.secondaryButtonStyles.activeText, 121 text: overrideVars.secondaryButtonStyles.activeText, 122 background: "transparent", 123 iconColor: overrideVars.secondaryButtonStyles.activeText, 124 }, 125 }, 126 text: { 127 enabled: { 128 border: "transparent", 129 text: overrideVars.fontColor, 130 background: "transparent", 131 iconColor: overrideVars.fontColor, 132 }, 133 disabled: { 134 border: "transparent", 135 text: overrideVars.fontColor, 136 background: "transparent", 137 iconColor: overrideVars.fontColor, 138 }, 139 hover: { 140 border: "transparent", 141 text: overrideVars.fontColor, 142 background: "transparent", 143 iconColor: overrideVars.fontColor, 144 }, 145 pressed: { 146 border: "transparent", 147 text: overrideVars.fontColor, 148 background: "transparent", 149 iconColor: overrideVars.fontColor, 150 }, 151 }, 152 }, 153 login: { 154 formBG: "#fff", 155 bgFilter: "none", 156 promoBG: "#000110", 157 promoHeader: "#fff", 158 promoText: "#A6DFEF", 159 footerElements: "#2781B0", 160 footerDivider: "#F2F2F2", 161 }, 162 pageHeader: { 163 background: overrideVars.boxBackground, 164 border: overrideVars.borderColor, 165 color: overrideVars.fontColor, 166 }, 167 tooltip: { 168 background: overrideVars.boxBackground, 169 color: overrideVars.fontColor, 170 }, 171 commonInput: { 172 labelColor: overrideVars.fontColor, 173 }, 174 checkbox: { 175 checkBoxBorder: overrideVars.borderColor, 176 checkBoxColor: overrideVars.okColor, 177 disabledBorder: overrideVars.buttonStyles.disabledColor, 178 disabledColor: overrideVars.buttonStyles.disabledColor, 179 }, 180 iconButton: { 181 buttonBG: overrideVars.buttonStyles.backgroundColor, 182 activeBG: overrideVars.buttonStyles.activeColor, 183 hoverBG: overrideVars.buttonStyles.hoverColor, 184 disabledBG: overrideVars.buttonStyles.disabledColor, 185 color: overrideVars.buttonStyles.textColor, 186 }, 187 dataTable: { 188 border: overrideVars.tableColors.border, 189 disabledBorder: overrideVars.tableColors.disabledBorder, 190 disabledBG: overrideVars.tableColors.disabledBG, 191 selected: overrideVars.tableColors.selected, 192 deletedDisabled: overrideVars.tableColors.deletedDisabled, 193 hoverColor: overrideVars.tableColors.hoverColor, 194 }, 195 backLink: { 196 color: overrideVars.linkColor, 197 arrow: overrideVars.linkColor, 198 hover: overrideVars.hoverLinkColor, 199 }, 200 inputBox: { 201 border: overrideVars.inputBox.border, 202 hoverBorder: overrideVars.inputBox.hoverBorder, 203 color: overrideVars.inputBox.textColor, 204 backgroundColor: overrideVars.inputBox.backgroundColor, 205 error: overrideVars.errorColor, 206 placeholderColor: overrideVars.inputBox.textColor, 207 disabledBorder: overrideVars.buttonStyles.disabledColor, 208 disabledBackground: overrideVars.inputBox.backgroundColor, 209 disabledPlaceholder: overrideVars.buttonStyles.disabledColor, 210 disabledText: overrideVars.buttonStyles.disabledColor, 211 }, 212 breadcrumbs: { 213 border: overrideVars.borderColor, 214 linksColor: overrideVars.linkColor, 215 textColor: overrideVars.fontColor, 216 backgroundColor: overrideVars.boxBackground, 217 backButton: { 218 border: overrideVars.borderColor, 219 backgroundColor: overrideVars.boxBackground, 220 }, 221 }, 222 actionsList: { 223 containerBorderColor: overrideVars.boxBackground, 224 backgroundColor: overrideVars.boxBackground, 225 disabledOptionsTextColor: overrideVars.disabledLinkColor, 226 optionsBorder: overrideVars.borderColor, 227 optionsHoverTextColor: overrideVars.hoverLinkColor, 228 optionsTextColor: overrideVars.linkColor, 229 titleColor: overrideVars.fontColor, 230 }, 231 screenTitle: { 232 border: overrideVars.borderColor, 233 subtitleColor: overrideVars.secondaryFontColor, 234 iconColor: overrideVars.fontColor, 235 }, 236 modalBox: { 237 closeColor: overrideVars.regularButtonStyles.textColor, 238 closeHoverBG: overrideVars.regularButtonStyles.hoverColor, 239 closeHoverColor: overrideVars.regularButtonStyles.hoverText, 240 containerColor: overrideVars.backgroundColor, 241 overlayColor: "#00000050", 242 titleColor: overrideVars.fontColor, 243 iconColor: { 244 default: overrideVars.fontColor, 245 accept: overrideVars.okColor, 246 delete: overrideVars.errorColor, 247 }, 248 }, 249 switchButton: { 250 bulletBGColor: overrideVars.switch.bulletBGColor, 251 bulletBorderColor: overrideVars.switch.bulletBorderColor, 252 disabledBulletBGColor: overrideVars.switch.disabledBulletBGColor, 253 disabledBulletBorderColor: 254 overrideVars.switch.disabledBulletBorderColor, 255 offLabelColor: overrideVars.secondaryFontColor, 256 onLabelColor: overrideVars.fontColor, 257 onBackgroundColor: overrideVars.okColor, 258 switchBackground: overrideVars.switch.switchBackground, 259 disabledBackground: overrideVars.switch.disabledBackground, 260 disabledOnBackground: overrideVars.switch.disabledBackground, 261 }, 262 dropdownSelector: { 263 hoverText: overrideVars.buttonStyles.hoverText, 264 backgroundColor: overrideVars.boxBackground, 265 hoverBG: overrideVars.buttonStyles.hoverColor, 266 selectedBGColor: overrideVars.buttonStyles.hoverColor, 267 selectedTextColor: overrideVars.buttonStyles.hoverText, 268 optionTextColor: overrideVars.fontColor, 269 disabledText: overrideVars.disabledLinkColor, 270 }, 271 readBox: { 272 borderColor: overrideVars.borderColor, 273 backgroundColor: overrideVars.boxBackground, 274 textColor: overrideVars.fontColor, 275 }, 276 }; 277 } catch (e) { 278 console.warn("Invalid theme provided. Fallback to original theme."); 279 } 280 281 return retVal; 282 }; 283 284 export const isDarkModeOn = () => { 285 const darkMode = localStorage.getItem("dark-mode"); 286 287 if (!darkMode) { 288 const systemDarkMode = window.matchMedia("(prefers-color-scheme: dark)"); 289 return get(systemDarkMode, "matches", false); 290 } 291 292 return darkMode === "on"; 293 }; 294 295 export const storeDarkMode = (mode: "on" | "off") => { 296 localStorage.setItem("dark-mode", mode); 297 };