diff --git a/frontend/src/components/common/CardStatsIcon.vue b/frontend/src/components/common/CardStatsIcon.vue
index bc12e0dd..48be4da6 100644
--- 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))
diff --git a/frontend/src/components/common/ListPercentage.vue b/frontend/src/components/common/ListPercentage.vue
index f5edf49f..73c385dd 100644
--- 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"
/>
diff --git a/frontend/src/components/graylog/Metrics/UncommittedEntries.vue b/frontend/src/components/graylog/Metrics/UncommittedEntries.vue
index 739b7fa5..9a1e9253 100644
--- 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
index 8fe1af3a..bd39b2a2 100644
--- 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
index c1c2eef9..13baece1 100644
--- 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
index 8557ed7a..8c413077 100644
--- 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"
>
diff --git a/frontend/src/layouts/common/FooterEL.vue b/frontend/src/layouts/common/FooterEL.vue
index 84dae0bd..131558f9 100644
--- a/frontend/src/layouts/common/FooterEL.vue
+++ b/frontend/src/layouts/common/FooterEL.vue
@@ -3,7 +3,7 @@
Made with
-
+
By
diff --git a/frontend/src/layouts/common/Provider.vue b/frontend/src/layouts/common/Provider.vue
index 5039206e..8b644c22 100644
--- 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
index c2402bb6..81e1efe3 100644
--- 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 {