update: app theme store

socfortress · Jun 28, 2024 · dfd3cc8 · dfd3cc8
1 parent 72f5dfe
commit dfd3cc8
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 109 deletions.
diff --git a/frontend/src/components/common/CardStatsIcon.vue b/frontend/src/components/common/CardStatsIcon.vue
@@ -27,7 +27,7 @@ const { boxed, boxSize, iconSize, iconName, color } = toRefs(props)
 
 const style = computed(() => useThemeStore().style)
 
-const iconColor = computed(() => color?.value || style.value["--primary-color"])
+const iconColor = computed(() => color?.value || style.value["primary-color"])
 const iconBoxedSize = computed(() => (boxSize.value / 100) * 45)
 const iconFinalSize = computed(() => (boxed?.value ? iconBoxedSize.value : iconSize.value))
 </script>

diff --git a/frontend/src/components/common/ListPercentage.vue b/frontend/src/components/common/ListPercentage.vue
@@ -17,9 +17,9 @@
 					type="line"
 					:percentage="parseInt(item[percentageKey as keyof typeof item], 10)"
 					:indicator-placement="'inside'"
-					:indicator-text-color="style['--bg-color']"
-					:color="style['--fg-color']"
-					:rail-color="style['--divider-020-color']"
+					:indicator-text-color="style['bg-color']"
+					:color="style['fg-color']"
+					:rail-color="style['divider-020-color']"
 					class="font-mono font-bold"
 				/>
 			</div>

diff --git a/frontend/src/components/graylog/Metrics/UncommittedEntries.vue b/frontend/src/components/graylog/Metrics/UncommittedEntries.vue
@@ -94,7 +94,7 @@ function getOptions() {
 		xaxis: {
 			type: "datetime"
 		},
-		colors: [style.value["--primary-color"]],
+		colors: [style.value["primary-color"]],
 		tooltip: {
 			x: {
 				formatter: (time: number) => {
@@ -107,7 +107,7 @@ function getOptions() {
 				}
 			},
 			style: {
-				fontFamily: style.value["--font-family-mono"]
+				fontFamily: style.value["font-family-mono"]
 			},
 			theme: isThemeDark.value ? "dark" : "light"
 		}

diff --git a/frontend/src/components/indices/Marquee.vue b/frontend/src/components/indices/Marquee.vue
@@ -58,7 +58,7 @@ watch(indices, val => {
 
 const message = useMessage()
 const style = computed(() => useThemeStore().style)
-const gradientColor = computed(() => style.value["--bg-color-rgb"].split(", "))
+const gradientColor = computed(() => style.value["bg-color-rgb"].split(", "))
 const loading = computed(() => !list?.value || list.value === null)
 
 function getIndices() {

diff --git a/frontend/src/components/indices/TopIndices.vue b/frontend/src/components/indices/TopIndices.vue
@@ -63,10 +63,10 @@ function getOptions() {
 			left: "left",
 			type: "scroll",
 			textStyle: {
-				color: style.value["--fg-color"]
+				color: style.value["fg-color"]
 			},
 			pageTextStyle: {
-				color: style.value["--fg-color"]
+				color: style.value["fg-color"]
 			}
 		},
 		grid: {
@@ -86,13 +86,13 @@ function getOptions() {
 					show: false
 				},
 				itemStyle: {
-					borderColor: style.value["--bg-color"],
+					borderColor: style.value["bg-color"],
 					borderWidth: 2
 				},
 				data: [
-					{ value: green, name: "Green", itemStyle: { color: style.value["--success-color"] } },
-					{ value: yellow, name: "Yellow", itemStyle: { color: style.value["--warning-color"] } },
-					{ value: red, name: "Red", itemStyle: { color: style.value["--error-color"] } }
+					{ value: green, name: "Green", itemStyle: { color: style.value["success-color"] } },
+					{ value: yellow, name: "Yellow", itemStyle: { color: style.value["warning-color"] } },
+					{ value: red, name: "Red", itemStyle: { color: style.value["error-color"] } }
 				]
 			},
 			{
@@ -139,13 +139,13 @@ function getOptions() {
 					//alignTo: "edge",
 					rich: {
 						name: {
-							color: style.value["--fg-color"],
+							color: style.value["fg-color"],
 							fontSize: window.innerWidth > 1000 ? 13 : 11
 						},
 						per: {
 							fontSize: window.innerWidth > 1000 ? 13 : 11,
 							fontWeight: "bold",
-							color: style.value["--fg-color"]
+							color: style.value["fg-color"]
 						}
 					}
 				},
@@ -165,7 +165,7 @@ function getOptions() {
 					}
 				},
 				itemStyle: {
-					borderColor: style.value["--bg-color"],
+					borderColor: style.value["bg-color"],
 					borderWidth: 1
 				},
 				data: sizeData

diff --git a/frontend/src/components/overview/HealthcheckCard.vue b/frontend/src/components/overview/HealthcheckCard.vue
@@ -16,7 +16,7 @@
 					:iconName="HealthcheckIcon"
 					boxed
 					:boxSize="30"
-					:color="criticalTotal ? style['--warning-color'] : undefined"
+					:color="criticalTotal ? style['warning-color'] : undefined"
 				></CardStatsIcon>
 			</template>
 		</CardStatsDouble>

diff --git a/frontend/src/layouts/common/FooterEL.vue b/frontend/src/layouts/common/FooterEL.vue
@@ -3,7 +3,7 @@
 		<div class="wrap flex items-center justify-end gap-3">
 			<div class="copy">
 				Made with
-				<Icon :size="22" :color="style['--primary-color']" class="mx-1">
+				<Icon :size="22" :color="style['primary-color']" class="mx-1">
 					<BrainIcon />
 				</Icon>
 				By

diff --git a/frontend/src/layouts/common/Provider.vue b/frontend/src/layouts/common/Provider.vue
@@ -66,7 +66,7 @@ function setGlobalVars() {
 	const html = document.children[0] as HTMLElement
 	const { style: htmlStyle } = html
 	for (const key in style.value) {
-		htmlStyle.setProperty(key, style.value[key])
+		htmlStyle.setProperty("--" + key, style.value[key])
 	}
 }
 

diff --git a/frontend/src/stores/theme.ts b/frontend/src/stores/theme.ts
@@ -362,96 +362,96 @@ export const useThemeStore = defineStore("theme", {
 			const secondary4RGB = hex2rgb(secondary4).join(", ")
 
 			return {
-				"--bg-sidebar": `${bgSidebar}`,
-				"--bg-body": `${bgBody}`,
-				"--bg-body-rgb": `${bgBodyRGB}`,
-
-				"--fg-color": `${fgColor}`,
-				"--fg-secondary-color": `${fgSecondaryColor}`,
-				"--bg-color": `${bgColor}`,
-				"--bg-secondary-color": `${bgSecondaryColor}`,
-				"--bg-color-rgb": `${bgColorRGB}`,
-
-				"--border-color": `${borderColor}`,
-				"--bezier-ease": `${bezierEase}`,
-				"--router-transition-duration": `${routerTransitionDuration}s`,
-				"--sidebar-anim-ease": `${sidebarAnimEase}`,
-				"--sidebar-anim-duration": `${sidebarAnimDuration}s`,
-				"--sidebar-open-width": `${sidebarOpenWidth}px`,
-				"--sidebar-close-width": `${sidebarCloseWidth}px`,
-				"--boxed-width": `${boxedWidth}px`,
-				"--toolbar-height": `${toolbarHeight}px`,
-				"--header-bar-height": `${headerBarHeight}px`,
-				"--view-padding": `${viewPadding}px`,
-				"--border-radius": `${borderRadius}`,
-				"--border-radius-small": `${borderRadiusSmall}`,
-				"--font-family": `${fontFamily}`,
-				"--font-family-display": `${fontFamilyDisplay}`,
-				"--font-family-mono": `${fontFamilyMono}`,
-				"--code-color": `${codeColor}`,
-				"--primary-color": `${primaryColor}`,
-				"--tab-color": `${tabColor}`,
-				"--tab-color-active": `${tabColorActive}`,
-				"--tab-fg-color-active": `${tabFgColorActive}`,
-				"--modal-color": `${modalColor}`,
-				"--modal-color-rgb": `${modalColorRGB}`,
-
-				"--button-color-secondary": `${buttonColorSecondary}`,
-				"--button-color-secondary-hover": `${buttonColorSecondaryHover}`,
-				"--button-color-secondary-pressed": `${buttonColorSecondaryPressed}`,
-
-				"--primary-005-color": `${primary005}`,
-				"--primary-010-color": `${primary010}`,
-				"--primary-015-color": `${primary015}`,
-				"--primary-020-color": `${primary020}`,
-				"--primary-030-color": `${primary030}`,
-				"--primary-040-color": `${primary040}`,
-				"--primary-050-color": `${primary050}`,
-				"--primary-060-color": `${primary060}`,
-
-				"--hover-005-color": `${hover005}`,
-				"--hover-010-color": `${hover010}`,
-				"--hover-050-color": `${hover050}`,
-
-				"--divider-005-color": `${divider005}`,
-				"--divider-010-color": `${divider010}`,
-				"--divider-020-color": `${divider020}`,
-				"--divider-030-color": `${divider030}`,
-
-				"--success-color": `${successColor}`,
-				"--error-color": `${errorColor}`,
-				"--warning-color": `${warningColor}`,
-				"--info-color": `${infoColor}`,
-				"--success-005-color": `${success005}`,
-				"--error-005-color": `${error005}`,
-				"--warning-005-color": `${warning005}`,
-				"--info-005-color": `${info005}`,
-
-				"--secondary1-color": `${secondary1}`,
-				"--secondary1-color-rgb": `${secondary1RGB}`,
-				"--secondary2-color": `${secondary2}`,
-				"--secondary2-color-rgb": `${secondary2RGB}`,
-				"--secondary3-color": `${secondary3}`,
-				"--secondary3-color-rgb": `${secondary3RGB}`,
-				"--secondary4-color": `${secondary4}`,
-				"--secondary4-color-rgb": `${secondary4RGB}`,
-
-				"--secondary1-opacity-005-color": `${secondary1Opacity005}`,
-				"--secondary1-opacity-010-color": `${secondary1Opacity010}`,
-				"--secondary1-opacity-020-color": `${secondary1Opacity020}`,
-				"--secondary1-opacity-030-color": `${secondary1Opacity030}`,
-				"--secondary2-opacity-005-color": `${secondary2Opacity005}`,
-				"--secondary2-opacity-010-color": `${secondary2Opacity010}`,
-				"--secondary2-opacity-020-color": `${secondary2Opacity020}`,
-				"--secondary2-opacity-030-color": `${secondary2Opacity030}`,
-				"--secondary3-opacity-005-color": `${secondary3Opacity005}`,
-				"--secondary3-opacity-010-color": `${secondary3Opacity010}`,
-				"--secondary3-opacity-020-color": `${secondary3Opacity020}`,
-				"--secondary3-opacity-030-color": `${secondary3Opacity030}`,
-				"--secondary4-opacity-005-color": `${secondary4Opacity005}`,
-				"--secondary4-opacity-010-color": `${secondary4Opacity010}`,
-				"--secondary4-opacity-020-color": `${secondary4Opacity020}`,
-				"--secondary4-opacity-030-color": `${secondary4Opacity030}`
+				"bg-sidebar": `${bgSidebar}`,
+				"bg-body": `${bgBody}`,
+				"bg-body-rgb": `${bgBodyRGB}`,
+
+				"fg-color": `${fgColor}`,
+				"fg-secondary-color": `${fgSecondaryColor}`,
+				"bg-color": `${bgColor}`,
+				"bg-secondary-color": `${bgSecondaryColor}`,
+				"bg-color-rgb": `${bgColorRGB}`,
+
+				"border-color": `${borderColor}`,
+				"bezier-ease": `${bezierEase}`,
+				"router-transition-duration": `${routerTransitionDuration}s`,
+				"sidebar-anim-ease": `${sidebarAnimEase}`,
+				"sidebar-anim-duration": `${sidebarAnimDuration}s`,
+				"sidebar-open-width": `${sidebarOpenWidth}px`,
+				"sidebar-close-width": `${sidebarCloseWidth}px`,
+				"boxed-width": `${boxedWidth}px`,
+				"toolbar-height": `${toolbarHeight}px`,
+				"header-bar-height": `${headerBarHeight}px`,
+				"view-padding": `${viewPadding}px`,
+				"border-radius": `${borderRadius}`,
+				"border-radius-small": `${borderRadiusSmall}`,
+				"font-family": `${fontFamily}`,
+				"font-family-display": `${fontFamilyDisplay}`,
+				"font-family-mono": `${fontFamilyMono}`,
+				"code-color": `${codeColor}`,
+				"primary-color": `${primaryColor}`,
+				"tab-color": `${tabColor}`,
+				"tab-color-active": `${tabColorActive}`,
+				"tab-fg-color-active": `${tabFgColorActive}`,
+				"modal-color": `${modalColor}`,
+				"modal-color-rgb": `${modalColorRGB}`,
+
+				"button-color-secondary": `${buttonColorSecondary}`,
+				"button-color-secondary-hover": `${buttonColorSecondaryHover}`,
+				"button-color-secondary-pressed": `${buttonColorSecondaryPressed}`,
+
+				"primary-005-color": `${primary005}`,
+				"primary-010-color": `${primary010}`,
+				"primary-015-color": `${primary015}`,
+				"primary-020-color": `${primary020}`,
+				"primary-030-color": `${primary030}`,
+				"primary-040-color": `${primary040}`,
+				"primary-050-color": `${primary050}`,
+				"primary-060-color": `${primary060}`,
+
+				"hover-005-color": `${hover005}`,
+				"hover-010-color": `${hover010}`,
+				"hover-050-color": `${hover050}`,
+
+				"divider-005-color": `${divider005}`,
+				"divider-010-color": `${divider010}`,
+				"divider-020-color": `${divider020}`,
+				"divider-030-color": `${divider030}`,
+
+				"success-color": `${successColor}`,
+				"error-color": `${errorColor}`,
+				"warning-color": `${warningColor}`,
+				"info-color": `${infoColor}`,
+				"success-005-color": `${success005}`,
+				"error-005-color": `${error005}`,
+				"warning-005-color": `${warning005}`,
+				"info-005-color": `${info005}`,
+
+				"secondary1-color": `${secondary1}`,
+				"secondary1-color-rgb": `${secondary1RGB}`,
+				"secondary2-color": `${secondary2}`,
+				"secondary2-color-rgb": `${secondary2RGB}`,
+				"secondary3-color": `${secondary3}`,
+				"secondary3-color-rgb": `${secondary3RGB}`,
+				"secondary4-color": `${secondary4}`,
+				"secondary4-color-rgb": `${secondary4RGB}`,
+
+				"secondary1-opacity-005-color": `${secondary1Opacity005}`,
+				"secondary1-opacity-010-color": `${secondary1Opacity010}`,
+				"secondary1-opacity-020-color": `${secondary1Opacity020}`,
+				"secondary1-opacity-030-color": `${secondary1Opacity030}`,
+				"secondary2-opacity-005-color": `${secondary2Opacity005}`,
+				"secondary2-opacity-010-color": `${secondary2Opacity010}`,
+				"secondary2-opacity-020-color": `${secondary2Opacity020}`,
+				"secondary2-opacity-030-color": `${secondary2Opacity030}`,
+				"secondary3-opacity-005-color": `${secondary3Opacity005}`,
+				"secondary3-opacity-010-color": `${secondary3Opacity010}`,
+				"secondary3-opacity-020-color": `${secondary3Opacity020}`,
+				"secondary3-opacity-030-color": `${secondary3Opacity030}`,
+				"secondary4-opacity-005-color": `${secondary4Opacity005}`,
+				"secondary4-opacity-010-color": `${secondary4Opacity010}`,
+				"secondary4-opacity-020-color": `${secondary4Opacity020}`,
+				"secondary4-opacity-030-color": `${secondary4Opacity030}`
 			}
 		},
 		isThemeDark(state): boolean {