J3vb/OwnCord
1
0
Fork 0
mirror of https://github.com/J3vb/OwnCord.git synced 2026-09-03 03:50:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: make neon-glow default theme, accent color picker now overrides theme accent

Browse Source
This commit is contained in:
jevb
2026-03-27 13:19:07 +01:00
parent 2a2e6daed6
commit bc474a0119
4 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/tauri-client/src/components/SettingsOverlay.ts
+4 -5
View File
@@ -59,7 +59,7 @@ const TAB_ICONS: Record<TabName, IconName> = {
* Call at app startup so the UI doesn't flash default styles.
*/
export function applyStoredAppearance(): void {
applyTheme(loadPref<ThemeName>("theme", "dark"));
applyTheme(loadPref<ThemeName>("theme", "neon-glow"));
document.documentElement.style.setProperty(
"--font-size",
`${loadPref<number>("fontSize", 16)}px`,
@@ -71,10 +71,9 @@ export function applyStoredAppearance(): void {
document.documentElement.classList.toggle("reduced-motion", loadPref<boolean>("reducedMotion", false));
document.documentElement.classList.toggle("high-contrast", loadPref<boolean>("highContrast", false));
document.documentElement.classList.toggle("large-font", loadPref<boolean>("largeFont", false));
document.documentElement.style.setProperty(
"--accent",
loadPref<string>("accentColor", "#5865f2"),
);
const storedAccent = loadPref<string>("accentColor", "#00c8ff");
document.documentElement.style.setProperty("--accent", storedAccent);
document.body.style.setProperty("--accent", storedAccent);
syncOsMotionListener(loadPref<boolean>("syncOsMotion", false));
}
Client/tauri-client/src/components/settings/AppearanceTab.ts
+5 -2
View File
@@ -9,7 +9,7 @@ import { setTheme } from "@stores/ui.store";
export function buildAppearanceTab(signal: AbortSignal): HTMLDivElement {
const section = createElement("div", { class: "settings-pane active" });
const currentTheme = loadPref<ThemeName>("theme", "dark");
const currentTheme = loadPref<ThemeName>("theme", "neon-glow");
const currentFontSize = loadPref<number>("fontSize", 16);
const currentCompact = loadPref<boolean>("compactMode", false);
@@ -81,10 +81,13 @@ export function buildAppearanceTab(signal: AbortSignal): HTMLDivElement {
"#b9bbbe", // grey
];
const currentAccent = loadPref<string>("accentColor", "#5865f2");
const currentAccent = loadPref<string>("accentColor", "#00c8ff");
function applyAccent(color: string): void {
// Set on both documentElement and body so the accent wins over
// theme class specificity (body.theme-neon-glow sets --accent)
document.documentElement.style.setProperty("--accent", color);
document.body.style.setProperty("--accent", color);
}
function saveAccent(color: string): void {
Client/tauri-client/src/lib/themes.ts
+2 -2
View File
@@ -67,9 +67,9 @@ export function applyThemeByName(name: string): void {
localStorage.setItem(STORAGE_KEY_ACTIVE, name);
}
/** Returns the currently active theme name, defaulting to "dark". */
/** Returns the currently active theme name, defaulting to "neon-glow". */
export function getActiveThemeName(): string {
return localStorage.getItem(STORAGE_KEY_ACTIVE) ?? "dark";
return localStorage.getItem(STORAGE_KEY_ACTIVE) ?? "neon-glow";
}
/** Persists a custom theme to localStorage. */
Client/tauri-client/src/styles/theme-neon-glow.css
+8 -7
View File
@@ -10,21 +10,22 @@ body.theme-neon-glow {
--bg-hover: #1f2023;
--bg-active: #2a2b2e;
/* Accent — OC cyan/purple */
/* Accent — defaults to OC cyan, but accent picker overrides --accent
so --accent-primary and --accent-gradient follow the user's choice */
--accent: #00c8ff;
--accent-hover: #7b2fff;
--accent-active: #6620e0;
--accent-primary: #00c8ff;
--accent-secondary: #7b2fff;
--accent-gradient: linear-gradient(135deg, #00c8ff, #7b2fff);
--accent-primary: var(--accent);
--accent-secondary: var(--accent-hover);
--accent-gradient: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
/* Border glow */
/* Border glow — derived from accent for consistency */
--border: rgba(0, 200, 255, 0.08);
--border-strong: rgba(0, 200, 255, 0.15);
--border-glow: rgba(0, 200, 255, 0.08);
/* Text link */
--text-link: #00c8ff;
/* Text link — follows accent */
--text-link: var(--accent);
/* Semantic colors (theme contract) */
--color-success: #23a55a;