rose pine

src/app/hooks/useTheme.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, lightTheme, silverTheme } from '../../colors.css';
+import { butterTheme, darkTheme, lightTheme, rosePineTheme, silverTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
@@ -36,9 +36,14 @@ export const ButterTheme: Theme = {
   kind: ThemeKind.Dark,
   classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
 };
+export const RosePineTheme: Theme = {
+  id: 'rose-pine-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['rose-pine-theme', rosePineTheme, onDarkFontWeight, 'prism-dark'],
+};
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, RosePineTheme], []);
 
   return themes;
 };
@@ -50,6 +55,7 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
+      [RosePineTheme.id]: 'Rose Pine',
     }),
     []
   );

src/app/styles/themes.css

@@ -354,3 +354,92 @@
   --sable-shadow: rgba(0, 0, 0, 0.6);
   --sable-overlay: rgba(15, 14, 12, 0.9);
 }
+
+/* --- Rose Pine --- */
+.rose-pine-theme {
+  /* Background */
+  --sable-bg-container: #191724;
+  --sable-bg-container-hover: #1f1d2e;
+  --sable-bg-container-active: #26233a;
+  --sable-bg-container-line: #2a2837;
+  --sable-bg-on-container: #e0def4;
+
+  /* Surface */
+  --sable-surface-container: #1f1d2e;
+  --sable-surface-container-hover: #26233a;
+  --sable-surface-container-active: #2a2837;
+  --sable-surface-container-line: #393552;
+  --sable-surface-on-container: #e0def4;
+
+  /* Surface Variant */
+  --sable-surface-var-container: #131020;
+  --sable-surface-var-container-hover: #191724;
+  --sable-surface-var-container-active: #1f1d2e;
+  --sable-surface-var-container-line: #393552;
+  --sable-surface-var-on-container: #c4a7e7;
+
+  /* Primary */
+  --sable-primary-main: #c4a7e7;
+  --sable-primary-main-hover: #b695db;
+  --sable-primary-main-active: #a783cf;
+  --sable-primary-main-line: #9871c3;
+  --sable-primary-on-main: #191724;
+  --sable-primary-container: #2a273f;
+  --sable-primary-container-hover: #363350;
+  --sable-primary-container-active: #423f61;
+  --sable-primary-container-line: #4e4b72;
+  --sable-primary-on-container: #e0def4;
+
+  /* Secondary */
+  --sable-sec-main: #908caa;
+  --sable-sec-main-hover: #a09db8;
+  --sable-sec-main-active: #b0aec6;
+  --sable-sec-main-line: #c0bed4;
+  --sable-sec-on-main: #191724;
+  --sable-sec-container: #26233a;
+  --sable-sec-container-hover: #2a2837;
+  --sable-sec-container-active: #393552;
+  --sable-sec-container-line: #44415a;
+  --sable-sec-on-container: #e0def4;
+
+  /* Success */
+  --sable-success-main: #9ccfd8;
+  --sable-success-main-hover: #87c5cf;
+  --sable-success-main-active: #7abcc6;
+  --sable-success-main-line: #6db2bd;
+  --sable-success-on-main: #1a2b2e;
+  --sable-success-container: #274248;
+  --sable-success-container-hover: #2e4d54;
+  --sable-success-container-active: #355860;
+  --sable-success-container-line: #3c636c;
+  --sable-success-on-container: #d8f0f2;
+
+  /* Warning */
+  --sable-warn-main: #f6c177;
+  --sable-warn-main-hover: #f4b562;
+  --sable-warn-main-active: #f2ad57;
+  --sable-warn-main-line: #f0a54c;
+  --sable-warn-on-main: #3d2f1a;
+  --sable-warn-container: #5d4728;
+  --sable-warn-container-hover: #6b522f;
+  --sable-warn-container-active: #795d36;
+  --sable-warn-container-line: #87683d;
+  --sable-warn-on-container: #fcedd6;
+
+  /* Critical */
+  --sable-crit-main: #eb6f92;
+  --sable-crit-main-hover: #e85d82;
+  --sable-crit-main-active: #e65479;
+  --sable-crit-main-line: #e44b70;
+  --sable-crit-on-main: #3d1d27;
+  --sable-crit-container: #5c2c3a;
+  --sable-crit-container-hover: #693343;
+  --sable-crit-container-active: #763a4c;
+  --sable-crit-container-line: #834155;
+  --sable-crit-on-container: #f9d8e1;
+
+  /* Other */
+  --sable-focus-ring: rgba(196, 167, 231, 0.5);
+  --sable-shadow: rgba(0, 0, 0, 0.5);
+  --sable-overlay: rgba(25, 23, 36, 0.85);
+}

src/colors.css.ts

@@ -95,3 +95,4 @@ export const silverTheme = createTheme(color, sableThemeMapping);
 export const darkTheme = createTheme(color, sableThemeMapping);
 export const butterTheme = createTheme(color, sableThemeMapping);
 export const lightTheme = createTheme(color, sableThemeMapping);
+export const rosePineTheme = createTheme(color, sableThemeMapping);