From ea910614c0e9180998c24caa1a037e834d65451b Mon Sep 17 00:00:00 2001 From: Elec3137 Date: Fri, 20 Mar 2026 13:00:01 -0700 Subject: [PATCH 1/2] Add black theme --- .changeset/add_black_theme.md | 5 ++ src/app/hooks/useTheme.ts | 9 ++++ src/app/styles/themes.css | 88 +++++++++++++++++++++++++++++++++++ src/colors.css.ts | 1 + src/index.css | 1 + 5 files changed, 104 insertions(+) create mode 100644 .changeset/add_black_theme.md diff --git a/.changeset/add_black_theme.md b/.changeset/add_black_theme.md new file mode 100644 index 000000000..b499f1ef2 --- /dev/null +++ b/.changeset/add_black_theme.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +# Add black theme diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts index 8c50882a7..735d03301 100755 --- a/src/app/hooks/useTheme.ts +++ b/src/app/hooks/useTheme.ts @@ -13,6 +13,7 @@ import { cinnySilverTheme, gruvdarkTheme, accordTheme, + blackTheme, } from '../../colors.css'; export enum ThemeKind { @@ -81,6 +82,12 @@ export const AccordTheme: Theme = { classNames: ['accord-theme', accordTheme, onDarkFontWeight, 'prism-dark'], }; +export const BlackTheme: Theme = { + id: 'black-theme', + kind: ThemeKind.Dark, + classNames: ['black-theme', blackTheme, onDarkFontWeight, 'prism-dark'], +}; + export const useThemes = (): Theme[] => { const themes: Theme[] = useMemo( () => [ @@ -94,6 +101,7 @@ export const useThemes = (): Theme[] => { CinnyDarkTheme, GruvdarkTheme, AccordTheme, + BlackTheme, ], [] ); @@ -114,6 +122,7 @@ export const useThemeNames = (): Record => [RosePineTheme.id]: 'Rose Pine', [GruvdarkTheme.id]: 'GruvDark', [AccordTheme.id]: 'Accord', + [BlackTheme.id]: 'Black', }), [] ); diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index 3ba479988..418073508 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -888,3 +888,91 @@ --sable-shadow: rgba(0, 0, 0, 1); --sable-overlay: rgba(0, 0, 0, 0.8); } + +.black-theme { + /* Background */ + --sable-bg-container: #000000; + --sable-bg-container-hover: #101010; + --sable-bg-container-active: #101010; + --sable-bg-container-line: #404040; + --sable-bg-on-container: #ffffff; + + /* Surface */ + --sable-surface-container: #000000; + --sable-surface-container-hover: #101010; + --sable-surface-container-active: #101010; + --sable-surface-container-line: #404040; + --sable-surface-on-container: #ffffff; + + /* Surface Variant */ + --sable-surface-var-container: #000000; + --sable-surface-var-container-hover: #101010; + --sable-surface-var-container-active: #101010; + --sable-surface-var-container-line: #404040; + --sable-surface-var-on-container: #bdb6ec; + + /* Primary */ + --sable-primary-main: #bdb6ec; + --sable-primary-main-hover: #a9a1e6; + --sable-primary-main-active: #958be0; + --sable-primary-main-line: #8175da; + --sable-primary-on-main: #1b1a21; + --sable-primary-container: #2d235c; + --sable-primary-container-hover: #382d70; + --sable-primary-container-active: #433784; + --sable-primary-container-line: #4e4198; + --sable-primary-on-container: #e3e1f7; + + /* Secondary */ + --sable-sec-main: #9992ac; + --sable-sec-main-hover: #aaa4ba; + --sable-sec-main-active: #bbb6c8; + --sable-sec-main-line: #ccc8d6; + --sable-sec-on-main: #1b1a21; + --sable-sec-container: #2d2c36; + --sable-sec-container-hover: #363541; + --sable-sec-container-active: #403f4c; + --sable-sec-container-line: #4b4a58; + --sable-sec-on-container: #eae8f0; + + /* Success */ + --sable-success-main: #85e0ba; + --sable-success-main-hover: #70dbaf; + --sable-success-main-active: #66d9a9; + --sable-success-main-line: #5cd6a3; + --sable-success-on-main: #0f3d2a; + --sable-success-container: #175c3f; + --sable-success-container-hover: #1a6646; + --sable-success-container-active: #1c704d; + --sable-success-container-line: #1f7a54; + --sable-success-on-container: #ccf2e2; + + /* Warning */ + --sable-warn-main: #e3ba91; + --sable-warn-main-hover: #dfaf7e; + --sable-warn-main-active: #dda975; + --sable-warn-main-line: #daa36c; + --sable-warn-on-main: #3f2a15; + --sable-warn-container: #5e3f20; + --sable-warn-container-hover: #694624; + --sable-warn-container-active: #734d27; + --sable-warn-container-line: #7d542b; + --sable-warn-on-container: #f3e2d1; + + /* Critical */ + --sable-crit-main: #e69d9d; + --sable-crit-main-hover: #e28d8d; + --sable-crit-main-active: #e08585; + --sable-crit-main-line: #de7d7d; + --sable-crit-on-main: #401c1c; + --sable-crit-container: #602929; + --sable-crit-container-hover: #6b2e2e; + --sable-crit-container-active: #763333; + --sable-crit-container-line: #803737; + --sable-crit-on-container: #f5d6d6; + + /* Other */ + --sable-focus-ring: rgba(189, 182, 236, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgba(15, 14, 18, 0.85); +} diff --git a/src/colors.css.ts b/src/colors.css.ts index ba8eca6a7..562dd362a 100755 --- a/src/colors.css.ts +++ b/src/colors.css.ts @@ -101,3 +101,4 @@ export const gruvdarkTheme = createTheme(color, sableThemeMapping); export const rosePineTheme = createTheme(color, sableThemeMapping); export const cinnyDarkTheme = createTheme(color, sableThemeMapping); export const accordTheme = createTheme(color, sableThemeMapping); +export const blackTheme = createTheme(color, sableThemeMapping); diff --git a/src/index.css b/src/index.css index 1c32c9170..a1c19aa26 100755 --- a/src/index.css +++ b/src/index.css @@ -25,6 +25,7 @@ } .dark-theme, +.black-theme, .butter-theme { --tc-link: hsl(213deg 100% 80%); From df3895c582ce477f83b8e40d37bffdc109ec7795 Mon Sep 17 00:00:00 2001 From: Elec3137 Date: Sat, 21 Mar 2026 12:40:26 -0700 Subject: [PATCH 2/2] Change colors in black theme for even better contrast --- src/app/styles/themes.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index 418073508..1088aa304 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -909,7 +909,7 @@ --sable-surface-var-container-hover: #101010; --sable-surface-var-container-active: #101010; --sable-surface-var-container-line: #404040; - --sable-surface-var-on-container: #bdb6ec; + --sable-surface-var-on-container: #ffffff; /* Primary */ --sable-primary-main: #bdb6ec; @@ -928,11 +928,11 @@ --sable-sec-main-hover: #aaa4ba; --sable-sec-main-active: #bbb6c8; --sable-sec-main-line: #ccc8d6; - --sable-sec-on-main: #1b1a21; - --sable-sec-container: #2d2c36; - --sable-sec-container-hover: #363541; - --sable-sec-container-active: #403f4c; - --sable-sec-container-line: #4b4a58; + --sable-sec-on-main: #000000; + --sable-sec-container: #101010; + --sable-sec-container-hover: #202020; + --sable-sec-container-active: #202020; + --sable-sec-container-line: #404040; --sable-sec-on-container: #eae8f0; /* Success */