Add everfrost dark and light themes (#1934)

Co-authored-by: Ross <ro@noirlab.edu>

src/renderer/store/env-settings-overrides.ts

@@ -10,6 +10,8 @@ const APP_THEMES = new Set([
     'defaultDark',
     'defaultLight',
     'dracula',
+    'everforestDark',
+    'everforestLight',
     'githubDark',
     'githubLight',
     'glassyDark',

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

@@ -23,6 +23,8 @@ export const THEME_DATA = [
     { label: 'One Dark', type: 'dark', value: AppTheme.ONE_DARK },
     { label: 'Solarized Dark', type: 'dark', value: AppTheme.SOLARIZED_DARK },
     { label: 'Solarized Light', type: 'light', value: AppTheme.SOLARIZED_LIGHT },
+    { label: 'Everforest Dark', type: 'dark', value: AppTheme.EVERFOREST_DARK },
+    { label: 'Everforest Light', type: 'light', value: AppTheme.EVERFOREST_LIGHT },
     { label: 'GitHub Dark', type: 'dark', value: AppTheme.GITHUB_DARK },
     { label: 'GitHub Light', type: 'light', value: AppTheme.GITHUB_LIGHT },
     { label: 'Glassy Dark', type: 'dark', value: AppTheme.GLASSY_DARK },

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

@@ -10,6 +10,8 @@ export enum AppTheme {
     DEFAULT_DARK = 'defaultDark',
     DEFAULT_LIGHT = 'defaultLight',
     DRACULA = 'dracula',
+    EVERFOREST_DARK = 'everforestDark',
+    EVERFOREST_LIGHT = 'everforestLight',
     GITHUB_DARK = 'githubDark',
     GITHUB_LIGHT = 'githubLight',
     GLASSY_DARK = 'glassyDark',

src/shared/themes/app-theme.ts

@@ -11,6 +11,8 @@ import { defaultTheme } from '/@/shared/themes/default';
 import { defaultDark } from '/@/shared/themes/default-dark/default-dark';
 import { defaultLight } from '/@/shared/themes/default-light/default-light';
 import { dracula } from '/@/shared/themes/dracula/dracula';
+import { everforestDark } from '/@/shared/themes/everforest-dark/everforest-dark';
+import { everforestLight } from '/@/shared/themes/everforest-light/everforest-light';
 import { githubDark } from '/@/shared/themes/github-dark/github-dark';
 import { githubLight } from '/@/shared/themes/github-light/github-light';
 import { glassyDark } from '/@/shared/themes/glassy-dark/glassy-dark';
@@ -42,6 +44,8 @@ export const appTheme: Record<AppTheme, AppThemeConfiguration> = {
     [AppTheme.DEFAULT_DARK]: defaultDark,
     [AppTheme.DEFAULT_LIGHT]: defaultLight,
     [AppTheme.DRACULA]: dracula,
+    [AppTheme.EVERFOREST_DARK]: everforestDark,
+    [AppTheme.EVERFOREST_LIGHT]: everforestLight,
     [AppTheme.GITHUB_DARK]: githubDark,
     [AppTheme.GITHUB_LIGHT]: githubLight,
     [AppTheme.GLASSY_DARK]: glassyDark,

src/shared/themes/everforest-dark/everforest-dark.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const everforestDark: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(39 46 41 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(39 46 41 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(160, 160, 160, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(160, 160, 160, 40%)',
+    },
+    colors: {
+        background: 'rgb(35, 42, 46)',
+        'background-alternate': 'rgb(35, 42, 46)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(211, 198, 170)',
+        'foreground-muted': 'rgb(211, 198, 170)',
+        primary: 'rgb(167, 192, 128)',
+        'state-error': 'rgb(230, 126, 128)',
+        'state-info': 'rgb(127, 187, 179)',
+        'state-success': 'rgb(167, 192, 128)',
+        'state-warning': 'rgb(219, 188, 127)',
+        surface: 'rgb(52, 63, 56)',
+        'surface-foreground': 'rgb(211, 198, 170)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'dark',
+};

src/shared/themes/everforest-light/everforest-light.ts

@@ -0,0 +1,28 @@
+import { AppThemeConfiguration } from '/@/shared/themes/app-theme-types';
+
+export const everforestLight: AppThemeConfiguration = {
+    app: {
+        'overlay-header':
+            'linear-gradient(transparent 0%, rgb(253 246 227 / 85%) 100%), var(--theme-background-noise)',
+        'overlay-subheader':
+            'linear-gradient(180deg, rgb(253 246 227 / 5%) 0%, var(--theme-colors-background) 100%), var(--theme-background-noise)',
+        'scrollbar-handle-background': 'rgba(90, 107, 78, 20%)',
+        'scrollbar-handle-hover-background': 'rgba(90, 107, 78, 40%)',
+    },
+    colors: {
+        background: 'rgb(253, 246, 227)',
+        'background-alternate': 'rgb(237, 230, 211)',
+        black: 'rgb(0, 0, 0)',
+        foreground: 'rgb(92, 103, 76)',
+        'foreground-muted': 'rgb(131, 145, 112)',
+        primary: 'rgb(141, 165, 96)',
+        'state-error': 'rgb(241, 103, 98)',
+        'state-info': 'rgb(59, 145, 152)',
+        'state-success': 'rgb(141, 165, 96)',
+        'state-warning': 'rgb(223, 163, 59)',
+        surface: 'rgb(237, 230, 211)',
+        'surface-foreground': 'rgb(92, 103, 76)',
+        white: 'rgb(255, 255, 255)',
+    },
+    mode: 'light',
+};