Add Rosé Pine themes (#1549)

* Add Rosé Pine theme

src/renderer/themes/use-app-theme.ts

@@ -38,6 +38,9 @@ export const THEME_DATA = [
     { label: 'Shades of Purple', type: 'dark', value: AppTheme.SHADES_OF_PURPLE },
     { label: 'VS Code Dark+', type: 'dark', value: AppTheme.VSCODE_DARK_PLUS },
     { label: 'VS Code Light+', type: 'light', value: AppTheme.VSCODE_LIGHT_PLUS },
+    { label: 'Rosé Pine', type: 'dark', value: AppTheme.ROSE_PINE },
+    { label: 'Rosé Pine Moon', type: 'dark', value: AppTheme.ROSE_PINE_MOON },
+    { label: 'Rosé Pine Dawn', type: 'light', value: AppTheme.ROSE_PINE_DAWN },
 ];
 
 export const useAppTheme = (overrideTheme?: AppTheme) => {

src/shared/themes/app-theme-types.ts

@@ -22,6 +22,9 @@ export enum AppTheme {
     NIGHT_OWL = 'nightOwl',
     NORD = 'nord',
     ONE_DARK = 'oneDark',
+    ROSE_PINE = 'rosePine',
+    ROSE_PINE_DAWN = 'rosePineDawn',
+    ROSE_PINE_MOON = 'rosePineMoon',
     SHADES_OF_PURPLE = 'shadesOfPurple',
     SOLARIZED_DARK = 'solarizedDark',
     SOLARIZED_LIGHT = 'solarizedLight',

src/shared/themes/app-theme.ts

@@ -23,6 +23,9 @@ import { monokai } from '/@/shared/themes/monokai/monokai';
 import { nightOwl } from '/@/shared/themes/night-owl/night-owl';
 import { nord } from '/@/shared/themes/nord/nord';
 import { oneDark } from '/@/shared/themes/one-dark/one-dark';
+import { rosePineDawn } from '/@/shared/themes/rose-pine-dawn/rose-pine-dawn';
+import { rosePineMoon } from '/@/shared/themes/rose-pine-moon/rose-pine-moon';
+import { rosePine } from '/@/shared/themes/rose-pine/rose-pine';
 import { shadesOfPurple } from '/@/shared/themes/shades-of-purple/shades-of-purple';
 import { solarizedDark } from '/@/shared/themes/solarized-dark/solarized-dark';
 import { solarizedLight } from '/@/shared/themes/solarized-light/solarized-light';
@@ -50,6 +53,9 @@ export const appTheme: Record<AppTheme, AppThemeConfiguration> = {
     [AppTheme.NIGHT_OWL]: nightOwl,
     [AppTheme.NORD]: nord,
     [AppTheme.ONE_DARK]: oneDark,
+    [AppTheme.ROSE_PINE]: rosePine,
+    [AppTheme.ROSE_PINE_DAWN]: rosePineDawn,
+    [AppTheme.ROSE_PINE_MOON]: rosePineMoon,
     [AppTheme.SHADES_OF_PURPLE]: shadesOfPurple,
     [AppTheme.SOLARIZED_DARK]: solarizedDark,
     [AppTheme.SOLARIZED_LIGHT]: solarizedLight,

src/shared/themes/rose-pine-dawn/rose-pine-dawn.ts

@@ -0,0 +1,22 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const rosePineDawn: AppThemeConfiguration = {
+    app: {
+        'scrollbar-handle-active-background': 'rgba(206, 202, 205, 0.7)',
+        'scrollbar-handle-background': 'rgba(244, 237, 232, 0.5)',
+    },
+    colors: {
+        background: '#faf4ed', // base
+        'background-alternate': '#faf4ed', // base
+        foreground: '#575279', // text
+        'foreground-muted': '#9893a5', // muted
+        primary: '#d7827e', // rose
+        'state-error': '#b4637a', // love
+        'state-info': '#56949f', // foam
+        'state-success': '#286983', // pine
+        'state-warning': '#ea9d34', // gold
+        surface: '#fffaf3', // surface
+        'surface-foreground': '#797593', // subtle
+    },
+    mode: 'light',
+};

src/shared/themes/rose-pine-moon/rose-pine-moon.ts

@@ -0,0 +1,22 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const rosePineMoon: AppThemeConfiguration = {
+    app: {
+        'scrollbar-handle-active-background': 'rgba(86, 82, 110, 0.7)',
+        'scrollbar-handle-background': 'rgba(42, 40, 62, 0.5)',
+    },
+    colors: {
+        background: '#232136', // base
+        'background-alternate': '#232136', // base
+        foreground: '#e0def4', // text
+        'foreground-muted': '#6e6a86', // muted
+        primary: '#ea9a97', // rose
+        'state-error': '#eb6f92', // love
+        'state-info': '#9ccfd8', // foam
+        'state-success': '#3e8fb0', // pine
+        'state-warning': '#f6c177', // gold
+        surface: '#191724', // surface
+        'surface-foreground': '#908caa', // subtle
+    },
+    mode: 'dark',
+};

src/shared/themes/rose-pine/rose-pine.ts

@@ -0,0 +1,22 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const rosePine: AppThemeConfiguration = {
+    app: {
+        'scrollbar-handle-active-background': 'rgba(82, 79, 103, 0.7)',
+        'scrollbar-handle-background': 'rgba(33, 32, 46, 0.5)',
+    },
+    colors: {
+        background: '#191724', // base
+        'background-alternate': '#191724', // base
+        foreground: '#e0def4', // text
+        'foreground-muted': '#6e6a86', // muted
+        primary: '#ebbcba', // rose
+        'state-error': '#eb6f92', // love
+        'state-info': '#9ccfd8', // foam
+        'state-success': '#31748f', // pine
+        'state-warning': '#f6c177', // gold
+        surface: '#1f1d2e', // surface
+        'surface-foreground': '#908caa', // subtle
+    },
+    mode: 'dark',
+};