From fdfbf5bc096ba88d5842bdd08d1bc8f673b2a31c Mon Sep 17 00:00:00 2001
From: sctanf <36978460+sctanf@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:31:21 -0500
Subject: [PATCH 1/6] add base themes
not working! conversion from hsl to rgb does not work
---
.../settings/pages/InterfaceSettings.tsx | 12 +++++
gui/src/index.scss | 52 +++++++++++++++++++
gui/tailwind.config.ts | 2 +
3 files changed, 66 insertions(+)
diff --git a/gui/src/components/settings/pages/InterfaceSettings.tsx b/gui/src/components/settings/pages/InterfaceSettings.tsx
index 0f870746ef..da55129135 100644
--- a/gui/src/components/settings/pages/InterfaceSettings.tsx
+++ b/gui/src/components/settings/pages/InterfaceSettings.tsx
@@ -470,6 +470,18 @@ export function InterfaceSettings() {
value={'snep'}
colors="!bg-snep"
/>
+
+
diff --git a/gui/src/index.scss b/gui/src/index.scss
index 8a422d013b..9ca8524949 100644
--- a/gui/src/index.scss
+++ b/gui/src/index.scss
@@ -343,6 +343,58 @@ body {
--default-color: 255, 255, 255;
}
+:root[data-theme='custom-bright'] {
+ --background-10: 255, 255, 255;
+ --background-20: hsl(calc(var(--hue)), 6%, 91%);
+ --background-30: hsl(calc(var(--hue)), 6%, 83%);
+ --background-40: hsl(calc(var(--hue)), 10%, 61%);
+ --background-50: hsl(calc(var(--hue)), 21%, 38%);
+ --background-60: hsl(calc(var(--hue)), 25%, 28%);
+ --background-70: hsl(calc(var(--hue)), 27%, 22%);
+ --background-80: hsl(calc(var(--hue)), 29%, 15%);
+ --background-90: 0, 0, 0;
+
+ --accent-background-10: hsl(calc(var(--hue)), 20%, 100%);
+ --accent-background-20: hsl(calc(var(--hue)), 51%, 92%);
+ --accent-background-30: hsl(calc(var(--hue)), 62%, 72%);
+ --accent-background-40: hsl(calc(var(--hue)), 62%, 56%);
+ --accent-background-50: hsl(calc(var(--hue)), 70%, 36%);
+
+ --success: 139, 223, 35;
+ --warning: 255, 187, 62;
+ --critical: 223, 54, 84;
+ --special: 230, 0, 230;
+ --window-icon-stroke: hsl(calc(var(--hue)), 43%, 92%);
+
+ --default-color: 255, 255, 255;
+}
+
+:root[data-theme='custom-dark'] {
+ --background-10: 255, 255, 255;
+ --background-20: 230, 230, 230;
+ --background-30: 200, 200, 200;
+ --background-40: 120, 120, 120;
+ --background-50: 90, 90, 90;
+ --background-60: 60, 60, 60;
+ --background-70: 30, 30, 30;
+ --background-80: 15, 15, 15;
+ --background-90: 0, 0, 0;
+
+ --accent-background-10: hsl(calc(var(--hue)), 20%, 100%);
+ --accent-background-20: hsl(calc(var(--hue)), 51%, 92%);
+ --accent-background-30: hsl(calc(var(--hue)), 62%, 72%);
+ --accent-background-40: hsl(calc(var(--hue)), 62%, 56%);
+ --accent-background-50: hsl(calc(var(--hue)), 70%, 36%);
+
+ --success: 139, 223, 35;
+ --warning: 255, 187, 62;
+ --critical: 223, 54, 84;
+ --special: 230, 0, 230;
+ --window-icon-stroke: hsl(calc(var(--hue)), 43%, 92%);
+
+ --default-color: 255, 255, 255;
+}
+
#root {
height: 100%;
}
diff --git a/gui/tailwind.config.ts b/gui/tailwind.config.ts
index 07004e88cd..6f129a8a35 100644
--- a/gui/tailwind.config.ts
+++ b/gui/tailwind.config.ts
@@ -295,6 +295,8 @@ const config = {
'trans-flag': `linear-gradient(135deg, ${colors['trans-blue'][800]} 40%, ${colors['trans-blue'][700]} 40% 70%, ${colors['trans-blue'][600]} 70% 100%)`,
'asexual-flag': `linear-gradient(135deg, ${colors['asexual'][100]} 30%, ${colors['asexual'][200]} 30% 50%, ${colors['asexual'][300]} 50% 70%, ${colors['asexual'][400]} 70% 100%)`,
'snep': `linear-gradient(135deg, ${colors['snep'][100]} 40%, ${colors['snep'][200]} 40% 70%, ${colors['snep'][300]} 70% 100%)`,
+ 'custom-bright': `linear-gradient(135deg, ${colors['red-accent'][100]} 30%, ${colors['orange-accent'][100]} 30% 43.3%, ${colors['yellow-accent'][100]} 43.3% 56.7%, ${colors['green-accent'][100]} 56.7% 70%, ${colors['blue-gray'][300]} 70% 100%)`,
+ 'custom-dark': `linear-gradient(135deg, ${colors['red-accent'][700]} 30%, ${colors['orange-accent'][700]} 30% 43.3%, ${colors['yellow-accent'][700]} 43.3% 56.7%, ${colors['green-accent'][700]} 56.7% 70%, ${colors['blue-gray'][700]} 70% 100%)`,
},
animation: {
'spin-ccw': 'spin-ccw 1s linear infinite',
From ab856a0b015c0c62b54019015562b94818440feb Mon Sep 17 00:00:00 2001
From: sctanf <36978460+sctanf@users.noreply.github.com>
Date: Wed, 10 Dec 2025 13:52:58 -0600
Subject: [PATCH 2/6] make it work
---
gui/src/AppLayout.tsx | 58 +++++++++++++++++++
.../settings/pages/InterfaceSettings.tsx | 24 ++++++++
gui/src/hooks/config.ts | 2 +
gui/src/index.scss | 21 -------
4 files changed, 84 insertions(+), 21 deletions(-)
diff --git a/gui/src/AppLayout.tsx b/gui/src/AppLayout.tsx
index 6e0aee1c2f..e742cffaad 100644
--- a/gui/src/AppLayout.tsx
+++ b/gui/src/AppLayout.tsx
@@ -2,6 +2,28 @@ import { useLayoutEffect } from 'react';
import { useConfig } from './hooks/config';
import { Outlet, useNavigate } from 'react-router-dom';
+function hslToRGB(h: number, s: number, v: number): [number, number, number] {
+ var r, g, b, i, f, p, q, t;
+ i = Math.floor(h * 6);
+ f = h * 6 - i;
+ p = v * (1 - s);
+ q = v * (1 - f * s);
+ t = v * (1 - (1 - f) * s);
+ switch (i % 6) {
+ case 0: r = v, g = t, b = p; break;
+ case 1: r = q, g = v, b = p; break;
+ case 2: r = p, g = v, b = t; break;
+ case 3: r = p, g = q, b = v; break;
+ case 4: r = t, g = p, b = v; break;
+ case 5: r = v, g = p, b = q; break;
+ }
+ return [
+ Math.round(r * 255),
+ Math.round(g * 255),
+ Math.round(b * 255)
+ ];
+}
+
export function AppLayout() {
const { config } = useConfig();
const navigate = useNavigate();
@@ -10,6 +32,42 @@ export function AppLayout() {
if (!config) return;
if (config.theme !== undefined) {
document.documentElement.dataset.theme = config.theme;
+ if (config.theme == 'custom-bright') {
+ console.log(config.customHue);
+ console.log(hslToRGB(config.customHue,1,1));
+ document.documentElement.style.setProperty('--background-20', hslToRGB(config.customHue, 0.06, 0.91).join(','));
+ document.documentElement.style.setProperty('--background-30', hslToRGB(config.customHue, 0.06, 0.83).join(','));
+ document.documentElement.style.setProperty('--background-40', hslToRGB(config.customHue, 0.10, 0.61).join(','));
+ document.documentElement.style.setProperty('--background-50', hslToRGB(config.customHue, 0.21, 0.38).join(','));
+ document.documentElement.style.setProperty('--background-60', hslToRGB(config.customHue, 0.25, 0.28).join(','));
+ document.documentElement.style.setProperty('--background-70', hslToRGB(config.customHue, 0.27, 0.22).join(','));
+ document.documentElement.style.setProperty('--background-80', hslToRGB(config.customHue, 0.29, 0.15).join(','));
+ }
+ else {
+ document.documentElement.style.setProperty('--background-20', null);
+ document.documentElement.style.setProperty('--background-30', null);
+ document.documentElement.style.setProperty('--background-40', null);
+ document.documentElement.style.setProperty('--background-50', null);
+ document.documentElement.style.setProperty('--background-60', null);
+ document.documentElement.style.setProperty('--background-70', null);
+ document.documentElement.style.setProperty('--background-80', null);
+ }
+ if (config.theme == 'custom-bright' || config.theme == 'custom-dark') {
+ document.documentElement.style.setProperty('--accent-background-10', hslToRGB(config.customHue, 0.20, 1).join(','));
+ document.documentElement.style.setProperty('--accent-background-20', hslToRGB(config.customHue, 0.51, 0.92).join(','));
+ document.documentElement.style.setProperty('--accent-background-30', hslToRGB(config.customHue, 0.62, 0.72).join(','));
+ document.documentElement.style.setProperty('--accent-background-40', hslToRGB(config.customHue, 0.62, 0.56).join(','));
+ document.documentElement.style.setProperty('--accent-background-50', hslToRGB(config.customHue, 0.70, 0.36).join(','));
+ document.documentElement.style.setProperty('--window-icon-stroke', hslToRGB(config.customHue, 0.43, 0.92).join(','));
+ }
+ else {
+ document.documentElement.style.setProperty('--accent-background-10', null);
+ document.documentElement.style.setProperty('--accent-background-20', null);
+ document.documentElement.style.setProperty('--accent-background-30', null);
+ document.documentElement.style.setProperty('--accent-background-40', null);
+ document.documentElement.style.setProperty('--accent-background-50', null);
+ document.documentElement.style.setProperty('--window-icon-stroke', null);
+ }
}
if (config.fonts !== undefined) {
diff --git a/gui/src/components/settings/pages/InterfaceSettings.tsx b/gui/src/components/settings/pages/InterfaceSettings.tsx
index da55129135..f8468b6cd4 100644
--- a/gui/src/components/settings/pages/InterfaceSettings.tsx
+++ b/gui/src/components/settings/pages/InterfaceSettings.tsx
@@ -28,6 +28,7 @@ interface InterfaceSettingsForm {
textSize: number;
fonts: string;
decorations: boolean;
+ customHue: number;
};
behavior: {
devmode: boolean;
@@ -55,6 +56,7 @@ export function InterfaceSettings() {
textSize: config?.textSize ?? defaultConfig.textSize,
fonts: config?.fonts.join(',') ?? defaultConfig.fonts.join(','),
decorations: config?.decorations ?? defaultConfig.decorations,
+ customHue: config?.customHue ?? defaultConfig.customHue,
},
notifications: {
watchNewDevices:
@@ -112,6 +114,7 @@ export function InterfaceSettings() {
fonts: values.appearance.fonts.split(','),
textSize: values.appearance.textSize,
decorations: values.appearance.decorations,
+ customHue: values.appearance.customHue,
useTray: values.behavior.useTray,
discordPresence: values.behavior.discordPresence,
@@ -485,6 +488,27 @@ export function InterfaceSettings() {
+
+
+ {'Hue'}
+
+
+
+
+
+
{l10n.getString('settings-interface-appearance-font')}
diff --git a/gui/src/hooks/config.ts b/gui/src/hooks/config.ts
index 68b921d691..2930d322f4 100644
--- a/gui/src/hooks/config.ts
+++ b/gui/src/hooks/config.ts
@@ -50,6 +50,7 @@ export interface Config {
homeLayout: 'default' | 'table';
skeletonPreview: boolean;
lastUsedProportions: 'manual' | 'autobone' | 'scaled' | null;
+ customHue: number;
}
export interface ConfigContext {
@@ -82,6 +83,7 @@ export const defaultConfig: Config = {
homeLayout: 'default',
skeletonPreview: true,
lastUsedProportions: null,
+ customHue: 0.8,
};
interface CrossStorage {
diff --git a/gui/src/index.scss b/gui/src/index.scss
index 9ca8524949..14186dda4d 100644
--- a/gui/src/index.scss
+++ b/gui/src/index.scss
@@ -345,26 +345,12 @@ body {
:root[data-theme='custom-bright'] {
--background-10: 255, 255, 255;
- --background-20: hsl(calc(var(--hue)), 6%, 91%);
- --background-30: hsl(calc(var(--hue)), 6%, 83%);
- --background-40: hsl(calc(var(--hue)), 10%, 61%);
- --background-50: hsl(calc(var(--hue)), 21%, 38%);
- --background-60: hsl(calc(var(--hue)), 25%, 28%);
- --background-70: hsl(calc(var(--hue)), 27%, 22%);
- --background-80: hsl(calc(var(--hue)), 29%, 15%);
--background-90: 0, 0, 0;
- --accent-background-10: hsl(calc(var(--hue)), 20%, 100%);
- --accent-background-20: hsl(calc(var(--hue)), 51%, 92%);
- --accent-background-30: hsl(calc(var(--hue)), 62%, 72%);
- --accent-background-40: hsl(calc(var(--hue)), 62%, 56%);
- --accent-background-50: hsl(calc(var(--hue)), 70%, 36%);
-
--success: 139, 223, 35;
--warning: 255, 187, 62;
--critical: 223, 54, 84;
--special: 230, 0, 230;
- --window-icon-stroke: hsl(calc(var(--hue)), 43%, 92%);
--default-color: 255, 255, 255;
}
@@ -380,17 +366,10 @@ body {
--background-80: 15, 15, 15;
--background-90: 0, 0, 0;
- --accent-background-10: hsl(calc(var(--hue)), 20%, 100%);
- --accent-background-20: hsl(calc(var(--hue)), 51%, 92%);
- --accent-background-30: hsl(calc(var(--hue)), 62%, 72%);
- --accent-background-40: hsl(calc(var(--hue)), 62%, 56%);
- --accent-background-50: hsl(calc(var(--hue)), 70%, 36%);
-
--success: 139, 223, 35;
--warning: 255, 187, 62;
--critical: 223, 54, 84;
--special: 230, 0, 230;
- --window-icon-stroke: hsl(calc(var(--hue)), 43%, 92%);
--default-color: 255, 255, 255;
}
From a20bd56f36354fd772d9dec33f31ddfd30d9553c Mon Sep 17 00:00:00 2001
From: sctanf <36978460+sctanf@users.noreply.github.com>
Date: Sat, 13 Dec 2025 15:21:57 -0600
Subject: [PATCH 3/6] move to CustomThemeColors
---
gui/src/AppLayout.tsx | 60 +--------
.../components/commons/CustomThemeColors.tsx | 117 ++++++++++++++++++
.../settings/pages/InterfaceSettings.tsx | 9 +-
3 files changed, 124 insertions(+), 62 deletions(-)
create mode 100644 gui/src/components/commons/CustomThemeColors.tsx
diff --git a/gui/src/AppLayout.tsx b/gui/src/AppLayout.tsx
index e742cffaad..1578f9d9be 100644
--- a/gui/src/AppLayout.tsx
+++ b/gui/src/AppLayout.tsx
@@ -1,28 +1,7 @@
import { useLayoutEffect } from 'react';
import { useConfig } from './hooks/config';
import { Outlet, useNavigate } from 'react-router-dom';
-
-function hslToRGB(h: number, s: number, v: number): [number, number, number] {
- var r, g, b, i, f, p, q, t;
- i = Math.floor(h * 6);
- f = h * 6 - i;
- p = v * (1 - s);
- q = v * (1 - f * s);
- t = v * (1 - (1 - f) * s);
- switch (i % 6) {
- case 0: r = v, g = t, b = p; break;
- case 1: r = q, g = v, b = p; break;
- case 2: r = p, g = v, b = t; break;
- case 3: r = p, g = q, b = v; break;
- case 4: r = t, g = p, b = v; break;
- case 5: r = v, g = p, b = q; break;
- }
- return [
- Math.round(r * 255),
- Math.round(g * 255),
- Math.round(b * 255)
- ];
-}
+import { applyColors } from './components/commons/CustomThemeColors';
export function AppLayout() {
const { config } = useConfig();
@@ -32,42 +11,7 @@ export function AppLayout() {
if (!config) return;
if (config.theme !== undefined) {
document.documentElement.dataset.theme = config.theme;
- if (config.theme == 'custom-bright') {
- console.log(config.customHue);
- console.log(hslToRGB(config.customHue,1,1));
- document.documentElement.style.setProperty('--background-20', hslToRGB(config.customHue, 0.06, 0.91).join(','));
- document.documentElement.style.setProperty('--background-30', hslToRGB(config.customHue, 0.06, 0.83).join(','));
- document.documentElement.style.setProperty('--background-40', hslToRGB(config.customHue, 0.10, 0.61).join(','));
- document.documentElement.style.setProperty('--background-50', hslToRGB(config.customHue, 0.21, 0.38).join(','));
- document.documentElement.style.setProperty('--background-60', hslToRGB(config.customHue, 0.25, 0.28).join(','));
- document.documentElement.style.setProperty('--background-70', hslToRGB(config.customHue, 0.27, 0.22).join(','));
- document.documentElement.style.setProperty('--background-80', hslToRGB(config.customHue, 0.29, 0.15).join(','));
- }
- else {
- document.documentElement.style.setProperty('--background-20', null);
- document.documentElement.style.setProperty('--background-30', null);
- document.documentElement.style.setProperty('--background-40', null);
- document.documentElement.style.setProperty('--background-50', null);
- document.documentElement.style.setProperty('--background-60', null);
- document.documentElement.style.setProperty('--background-70', null);
- document.documentElement.style.setProperty('--background-80', null);
- }
- if (config.theme == 'custom-bright' || config.theme == 'custom-dark') {
- document.documentElement.style.setProperty('--accent-background-10', hslToRGB(config.customHue, 0.20, 1).join(','));
- document.documentElement.style.setProperty('--accent-background-20', hslToRGB(config.customHue, 0.51, 0.92).join(','));
- document.documentElement.style.setProperty('--accent-background-30', hslToRGB(config.customHue, 0.62, 0.72).join(','));
- document.documentElement.style.setProperty('--accent-background-40', hslToRGB(config.customHue, 0.62, 0.56).join(','));
- document.documentElement.style.setProperty('--accent-background-50', hslToRGB(config.customHue, 0.70, 0.36).join(','));
- document.documentElement.style.setProperty('--window-icon-stroke', hslToRGB(config.customHue, 0.43, 0.92).join(','));
- }
- else {
- document.documentElement.style.setProperty('--accent-background-10', null);
- document.documentElement.style.setProperty('--accent-background-20', null);
- document.documentElement.style.setProperty('--accent-background-30', null);
- document.documentElement.style.setProperty('--accent-background-40', null);
- document.documentElement.style.setProperty('--accent-background-50', null);
- document.documentElement.style.setProperty('--window-icon-stroke', null);
- }
+ applyColors(config.theme, config.customHue);
}
if (config.fonts !== undefined) {
diff --git a/gui/src/components/commons/CustomThemeColors.tsx b/gui/src/components/commons/CustomThemeColors.tsx
new file mode 100644
index 0000000000..71e8c0790b
--- /dev/null
+++ b/gui/src/components/commons/CustomThemeColors.tsx
@@ -0,0 +1,117 @@
+function hsvToRGB(h: number, s: number, v: number): [number, number, number] {
+ let r = 0,
+ g = 0,
+ b = 0;
+ const i = Math.floor(h * 6);
+ const f = h * 6 - i;
+ const p = v * (1 - s);
+ const q = v * (1 - f * s);
+ const t = v * (1 - (1 - f) * s);
+ switch (i % 6) {
+ case 0:
+ r = v;
+ g = t;
+ b = p;
+ break;
+ case 1:
+ r = q;
+ g = v;
+ b = p;
+ break;
+ case 2:
+ r = p;
+ g = v;
+ b = t;
+ break;
+ case 3:
+ r = p;
+ g = q;
+ b = v;
+ break;
+ case 4:
+ r = t;
+ g = p;
+ b = v;
+ break;
+ case 5:
+ r = v;
+ g = p;
+ b = q;
+ break;
+ }
+ return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+}
+
+export function applyColors(theme: string, hue: number) {
+ if (theme == 'custom-bright') {
+ document.documentElement.style.setProperty(
+ '--background-20',
+ hsvToRGB(hue, 0.06, 0.91).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--background-30',
+ hsvToRGB(hue, 0.06, 0.83).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--background-40',
+ hsvToRGB(hue, 0.1, 0.61).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--background-50',
+ hsvToRGB(hue, 0.21, 0.38).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--background-60',
+ hsvToRGB(hue, 0.25, 0.28).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--background-70',
+ hsvToRGB(hue, 0.27, 0.22).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--background-80',
+ hsvToRGB(hue, 0.29, 0.15).join(',')
+ );
+ } else {
+ document.documentElement.style.setProperty('--background-20', null);
+ document.documentElement.style.setProperty('--background-30', null);
+ document.documentElement.style.setProperty('--background-40', null);
+ document.documentElement.style.setProperty('--background-50', null);
+ document.documentElement.style.setProperty('--background-60', null);
+ document.documentElement.style.setProperty('--background-70', null);
+ document.documentElement.style.setProperty('--background-80', null);
+ }
+ if (theme == 'custom-bright' || theme == 'custom-dark') {
+ document.documentElement.style.setProperty(
+ '--accent-background-10',
+ hsvToRGB(hue, 0.2, 1).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--accent-background-20',
+ hsvToRGB(hue, 0.51, 0.92).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--accent-background-30',
+ hsvToRGB(hue, 0.62, 0.72).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--accent-background-40',
+ hsvToRGB(hue, 0.62, 0.56).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--accent-background-50',
+ hsvToRGB(hue, 0.7, 0.36).join(',')
+ );
+ document.documentElement.style.setProperty(
+ '--window-icon-stroke',
+ hsvToRGB(hue, 0.43, 0.92).join(',')
+ );
+ } else {
+ document.documentElement.style.setProperty('--accent-background-10', null);
+ document.documentElement.style.setProperty('--accent-background-20', null);
+ document.documentElement.style.setProperty('--accent-background-30', null);
+ document.documentElement.style.setProperty('--accent-background-40', null);
+ document.documentElement.style.setProperty('--accent-background-50', null);
+ document.documentElement.style.setProperty('--window-icon-stroke', null);
+ }
+}
diff --git a/gui/src/components/settings/pages/InterfaceSettings.tsx b/gui/src/components/settings/pages/InterfaceSettings.tsx
index f8468b6cd4..04db9af718 100644
--- a/gui/src/components/settings/pages/InterfaceSettings.tsx
+++ b/gui/src/components/settings/pages/InterfaceSettings.tsx
@@ -489,9 +489,7 @@ export function InterfaceSettings() {
-
- {'Hue'}
-
+ {'Hue'}
From d807d9096adce3d3070f97400dcfc2f512a224a8 Mon Sep 17 00:00:00 2001
From: sctanf <36978460+sctanf@users.noreply.github.com>
Date: Sat, 13 Dec 2025 15:43:55 -0600
Subject: [PATCH 4/6] i18n hue
---
gui/public/i18n/en/translation.ftl | 2 ++
gui/src/components/settings/pages/InterfaceSettings.tsx | 2 +-
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/gui/public/i18n/en/translation.ftl b/gui/public/i18n/en/translation.ftl
index a02c9dab35..43397a1b34 100644
--- a/gui/public/i18n/en/translation.ftl
+++ b/gui/public/i18n/en/translation.ftl
@@ -704,6 +704,8 @@ settings-interface-appearance-decorations = Use the system native decorations
settings-interface-appearance-decorations-description = This will not render the top bar of the interface and will use the operating system's instead.
settings-interface-appearance-decorations-label = Use native decorations
+settings-interface-appearance-hue = Hue
+
## Notification settings
settings-interface-notifications = Notifications
settings-general-interface-serial_detection = Serial device detection
diff --git a/gui/src/components/settings/pages/InterfaceSettings.tsx b/gui/src/components/settings/pages/InterfaceSettings.tsx
index 04db9af718..83159c840a 100644
--- a/gui/src/components/settings/pages/InterfaceSettings.tsx
+++ b/gui/src/components/settings/pages/InterfaceSettings.tsx
@@ -489,7 +489,7 @@ export function InterfaceSettings() {
- {'Hue'}
+ {l10n.getString('settings-interface-appearance-hue')}
Date: Sat, 13 Dec 2025 16:39:28 -0600
Subject: [PATCH 5/6] use deg symbol
---
gui/src/components/settings/pages/InterfaceSettings.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/gui/src/components/settings/pages/InterfaceSettings.tsx b/gui/src/components/settings/pages/InterfaceSettings.tsx
index 83159c840a..8136676167 100644
--- a/gui/src/components/settings/pages/InterfaceSettings.tsx
+++ b/gui/src/components/settings/pages/InterfaceSettings.tsx
@@ -499,9 +499,9 @@ export function InterfaceSettings() {
max={1}
step={0.01}
values={[
- { value: 0, label: '0%' },
- { value: 0.5, label: '180%' },
- { value: 1, label: '360%' },
+ { value: 0, label: '0°' },
+ { value: 0.5, label: '180°' },
+ { value: 1, label: '360°' },
]}
disabled={
config?.theme != 'custom-bright' &&
From 468a52cbb76909acf424908516649235cf602dba Mon Sep 17 00:00:00 2001
From: sctanf <36978460+sctanf@users.noreply.github.com>
Date: Sat, 13 Dec 2025 16:41:46 -0600
Subject: [PATCH 6/6] lint
---
gui/src/components/settings/pages/InterfaceSettings.tsx | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/gui/src/components/settings/pages/InterfaceSettings.tsx b/gui/src/components/settings/pages/InterfaceSettings.tsx
index 8136676167..1efa68c863 100644
--- a/gui/src/components/settings/pages/InterfaceSettings.tsx
+++ b/gui/src/components/settings/pages/InterfaceSettings.tsx
@@ -489,7 +489,9 @@ export function InterfaceSettings() {
- {l10n.getString('settings-interface-appearance-hue')}
+
+ {l10n.getString('settings-interface-appearance-hue')}
+