SteelDynamite/onyx-tasks
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Desaturate onyx theme gold tones

Browse source 
Tweak several onyx theme color variables to slightly desaturate the gold
accents so the UI appears less saturated and more balanced. Update text,
option, and FAB colors, hover/background and border RGBA values, and add
a new thicker onyx-border utility for a prominent gold window border.
This commit is contained in:
Tristan Michael 2026-04-06 17:29:49 -07:00
parent b83a54328e
commit 5756e19ceb
1 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/tauri/src/app.css
View file

@ -146,8 +146,8 @@ body {
--color-surface-dark: #141414; --color-surface-dark: #141414;
--color-card-light: #1e1e1e; --color-card-light: #1e1e1e;
--color-card-dark: #1e1e1e; --color-card-dark: #1e1e1e;
--color-text-light: #d4bc72; --color-text-light: #d1bf82;
--color-text-dark: #d4bc72; --color-text-dark: #d1bf82;
--color-text-secondary-light: #a6905a; --color-text-secondary-light: #a6905a;
--color-text-secondary-dark: #a6905a; --color-text-secondary-dark: #a6905a;
--color-border-light: #5c4d2e; --color-border-light: #5c4d2e;
@ -163,7 +163,7 @@ body {
} }
[data-theme="onyx"] select option { [data-theme="onyx"] select option {
background-color: #141414; background-color: #141414;
color: #d4bc72; color: #d1bf82;
} }
/* Dark text on primary buttons/FAB */ /* Dark text on primary buttons/FAB */
@ -173,7 +173,7 @@ body {
/* FAB: match text gold instead of cream primary */ /* FAB: match text gold instead of cream primary */
[data-theme="onyx"] .rounded-full.bg-primary.shadow-lg { [data-theme="onyx"] .rounded-full.bg-primary.shadow-lg {
background-color: #d4bc72; background-color: #d1bf82;
} }
/* Checkbox borders: gold instead of gray */ /* Checkbox borders: gold instead of gray */
@ -186,12 +186,17 @@ body {
[data-theme="onyx"] .dark\:hover\:bg-white\/10:hover, [data-theme="onyx"] .dark\:hover\:bg-white\/10:hover,
[data-theme="onyx"] .dark\:hover\:bg-white\/5:hover, [data-theme="onyx"] .dark\:hover\:bg-white\/5:hover,
[data-theme="onyx"] .dark\:bg-white\/10 { [data-theme="onyx"] .dark\:bg-white\/10 {
background-color: rgb(212 188 114 / 0.1); background-color: rgb(209 191 130 / 0.1);
} }
/* Linux window border */ /* Linux window border */
[data-theme="onyx"] .linux-window-border { [data-theme="onyx"] .linux-window-border {
border-color: rgba(212, 188, 114, 0.15); border-color: rgba(209, 191, 130, 0.15);
}
/* Thick gold window border */
[data-theme="onyx"] .onyx-border {
border: 3px solid #a6905a;
} }
[data-theme="solarized"] { [data-theme="solarized"] {