feat: add 4 light & 4 dark app theme

src/main/store/module/preferences.ts

@@ -14,6 +14,7 @@ export default new Store<PreferencesStore>({
   defaults: {
     storagePath: defaultPath,
     backupPath,
+    theme: 'light:chrome',
     editor: {
       wrap: 'free',
       fontFamily: 'SF Mono, Consolas, Menlo',
@@ -22,7 +23,8 @@ export default new Store<PreferencesStore>({
       tabSize: 2,
       trailingComma: 'none',
       semi: false,
-      singleQuote: true
+      singleQuote: true,
+      theme: 'github'
     }
   }
 })

src/renderer/App.vue

@@ -39,6 +39,7 @@ const snippetStore = useSnippetStore()
 const isUpdateAvailable = ref(false)
 
 const init = () => {
+  const theme = store.preferences.get('theme')
   const isValid = appStore.isEditorSettingsValid(
     store.preferences.get('editor')
   )
@@ -48,6 +49,12 @@ const init = () => {
   appStore.sizes.sidebar = store.app.get('sidebarWidth')
   appStore.sizes.snippetList = store.app.get('snippetListWidth')
 
+  if (theme) {
+    appStore.setTheme(theme)
+  } else {
+    appStore.setTheme('light:chrome')
+  }
+
   trackAppUpdate()
 }
 

src/renderer/assets/scss/base.scss

@@ -45,7 +45,6 @@ h6 {
   text-transform: uppercase;
   margin: var(--spacing-xs) 0;
   font-weight: 700;
-  color: var(--color-contrast-medium);
 }
 
 .gutter-line {
@@ -69,6 +68,6 @@ h6 {
 
 .desc {
   font-size: var(--text-sm);
-  color: var(--color-contrast-medium);
+  color: var(--color-text-3);
   margin-top: var(--spacing-xs);
 }

src/renderer/assets/scss/main.scss

@@ -2,6 +2,6 @@
 @import './variables';
 @import './markdown';
 @import './base';
-@import './vendor';
 @import './ace';
-@import './themes';
+@import './themes';
+@import './vendor';

src/renderer/assets/scss/themes.scss

@@ -1,28 +1,179 @@
-[data-theme='light'] {
-  .snippet-list-item--selected {
-    background-color: var(--color-contrast-lower);
-    &.focus {
-      background-color: var(--color-primary);
-      .title,
-      .meta {
-        color: #fff;
-      }
-    }
-  }
+[data-theme='light:solarized'] {
+  --color-primary: hsl(44, 84%, 54%);
+
+  --color-bg: hsl(44, 87%, 94%);
+
+  --color-contrast-lower: hsl(44, 84%, 90%);
+  --color-contrast-lower-alt: hsl(44, 0%, 98%);
+  --color-contrast-lower-alt2: hsl(44, 60%, 94%);
+  --color-contrast-lower-alt3: hsl(44, 60%, 85%);
+  --color-contrast-lower-alt4: hsl(44, 60%, 75%);
+  --color-contrast-low: hsl(44, 60%, 60%);
+  --color-contrast-low-alt: hsl(44, 60%, 70%);
+  --color-contrast-medium: hsl(44, 60%, 40%);
+  --color-contrast-high: hsl(44, 60%, 30%);
+  --color-contrast-higher: hsl(44, 60%, 10%);
+
+  --color-snippet-selected: var(--color-contrast-lower-alt2);
+
+  --color-sidebar: #fff;
+  --color-sidebar-item-selected: var(--color-contrast-lower-alt3);
+
+  --color-border: var(--color-contrast-lower-alt3);
+
+  --color-button: hsl(44, 60%, 85%);
+  --color-button-hover: var(--color-contrast-low-alt);
+  --color-button-action-hover: var(--color-contrast-lower-alt3); 
+
+  --color-checkbox: var(--color-contrast-lower-alt);
+
+  --color-input: var(--color-contrast-lower-alt);
+
+  --color-select: var(--color-contrast-lower-alt);
+
+  --color-menu-selected: var(--color-contrast-lower-alt3);
+
+  --color-tag-delete: var(--color-contrast-lower-alt4);
 }
-[data-theme='dark'] {
-  .snippet-list-item--selected {
-    background-color: var(--color-contrast-lower);
-    &.focus {
-      background-color: var(--color-primary);
-      .title,
-      .meta {
-        color: #fff;
-      }
-    }
-    .title,
-    .meta {
-      color: #fff;
-    }
-  }
+
+[data-theme='dark:one'] {
+  --color-primary: hsl(215, 69%, 45%);
+
+  --color-bg: hsl(220, 13%, 18%);
+
+  --color-contrast-lower: hsl(220, 13%, 20%);
+  --color-contrast-lower-alt: hsl(220, 13%, 22%);
+  --color-contrast-lower-alt2: hsl(220, 13%, 25%);
+  --color-contrast-lower-alt3: hsl(220, 13%, 30%);
+  --color-contrast-lower-low: hsl(220, 13%, 40%);
+  --color-contrast-medium: hsl(220, 13%, 50%);
+
+  --color-border: var(--color-contrast-lower-alt2);
+
+  --color-snippet-list: var(--color-bg);
+  --color-snippet-selected: var(--color-contrast-lower-alt);
+
+  --color-sidebar: var(--color-bg);
+  --color-sidebar-item-selected: var(--color-contrast-lower-alt);
+  --color-sidebar-icon: var(--color-text);
+
+  --color-text: hsl(0, 0%, 70%);
+
+  --color-button: var(--color-contrast-lower-alt);
+  --color-button-hover: var(--color-contrast-lower-alt2);
+  --color-button-action: var(--color-contrast-low); 
+  --color-button-action-hover: var(--color-contrast-lower-alt2); 
+
+  --color-input: var(--color-bg);
+
+  --color-menu-selected: var(--color-contrast-lower-alt);
+
+  --color-tag-delete: var(--color-contrast-lower-alt3);
 }
+
+[data-theme='dark:dracula'] {
+  --color-primary: hsl(215, 69%, 45%);
+
+  // при конвертации в hsl цвет отличается, поэтому оставляем в hex
+  --color-bg: #282A36; 
+
+  --color-contrast-lower: hsl(231, 15%, 20%);
+  --color-contrast-lower-alt: hsl(231, 15%, 22%);
+  --color-contrast-lower-alt2: hsl(231, 15%, 25%);
+  --color-contrast-lower-alt3: hsl(231, 15%, 30%);
+  --color-contrast-lower-low: hsl(231, 15%, 40%);
+  --color-contrast-lower-medium: hsl(231, 15%, 50%);
+
+  --color-snippet-list: var(--color-bg);
+  --color-snippet-selected: var(--color-contrast-lower-alt2);
+
+  --color-sidebar: var(--color-bg);
+  --color-sidebar-item-selected: var(--color-contrast-lower-alt2);
+  --color-sidebar-icon: var(--color-text);
+
+  --color-border: var(--color-contrast-lower-alt2);
+
+  --color-text: hsl(0, 0%, 70%);
+
+  --color-button: var(--color-contrast-lower-alt);
+  --color-button-hover: var(--color-contrast-lower-alt2);
+  --color-button-action: var(--color-contrast-low); 
+  --color-button-action-hover: var(--color-contrast-lower-alt2);
+
+  --color-input: var(--color-bg);
+
+  --color-menu-selected: var(--color-contrast-lower-alt2);
+
+  --color-tag-delete: var(--color-contrast-lower-alt3);
+}
+
+[data-theme='dark:monokai'] {
+  --color-primary: hsl(215, 69%, 45%);
+
+  // при конвертации в hsl цвет отличается, поэтому оставляем в hex
+  --color-bg: #272822;
+
+  --color-contrast-lower: hsl(70, 8%, 20%);
+  --color-contrast-lower-alt: hsl(70, 8%, 22%);
+  --color-contrast-lower-alt2: hsl(70, 8%, 25%);
+  --color-contrast-lower-alt3: hsl(70, 8%, 30%);
+  --color-contrast-lower-low: hsl(70, 8%, 40%);
+  --color-contrast-lower-medium: hsl(70, 8%, 50%);
+
+  --color-snippet-list: var(--color-bg);
+  --color-snippet-selected: var(--color-contrast-lower);
+
+  --color-sidebar: var(--color-bg);
+  --color-sidebar-item-selected: var(--color-contrast-lower);
+  --color-sidebar-icon: var(--color-text);
+
+  --color-border: var(--color-contrast-lower-alt2);
+
+  --color-text: hsl(0, 0%, 70%);
+
+  --color-button: var(--color-contrast-lower-alt);
+  --color-button-hover: var(--color-contrast-lower-alt2);
+  --color-button-action: var(--color-contrast-low); 
+  --color-button-action-hover: var(--color-contrast-lower-alt2);
+
+  --color-input: var(--color-bg);
+
+  --color-menu-selected: var(--color-contrast-lower);
+
+  --color-tag-delete: var(--color-contrast-lower-alt3);
+}
+
+[data-theme='dark:merbivore'] {
+  --color-primary: hsl(215, 69%, 45%);
+
+  --color-bg: hsl(0, 0%, 11%);
+
+  --color-contrast-lower: hsl(0, 0%, 20%);
+  --color-contrast-lower-alt: hsl(0, 0%, 22%);
+  --color-contrast-lower-alt2: hsl(0, 0%, 25%);
+  --color-contrast-lower-alt3: hsl(0, 0%, 30%);
+  --color-contrast-lower-low: hsl(0, 0%, 40%);
+  --color-contrast-lower-medium: hsl(0, 0%, 50%);
+
+  --color-snippet-list: var(--color-bg);
+  --color-snippet-selected: var(--color-contrast-lower);
+
+  --color-sidebar: var(--color-bg);
+  --color-sidebar-item-selected: var(--color-contrast-lower);
+  --color-sidebar-icon: var(--color-text);
+
+  --color-border: var(--color-contrast-lower-alt2);
+
+  --color-text: hsl(0, 0%, 70%);
+
+  --color-button: var(--color-contrast-lower-alt);
+  --color-button-hover: var(--color-contrast-lower-alt2);
+  --color-button-action: var(--color-contrast-low); 
+  --color-button-action-hover: var(--color-contrast-lower-alt2);
+
+  --color-input: var(--color-bg);
+
+  --color-menu-selected: var(--color-contrast-lower);
+
+  --color-tag-delete: var(--color-contrast-lower-alt3);
+}

src/renderer/assets/scss/variables.scss

@@ -24,12 +24,11 @@
   --text-xl: calc(var(--text-base-size) * 2.4);
   --text-xxl: calc(var(--text-base-size) * 3.2);
   --text-xxxl: calc(var(--text-base-size) * 3.6);
-}
 
-[data-theme='light'] {
   --color-primary: hsl(215, 93%, 52%);
 
   --color-bg: hsl(0, 0%, 100%);
+
   --color-contrast-lower: hsl(0, 0%, 97%);
   --color-contrast-lower-alt: hsl(0, 0%, 92%);
   --color-contrast-low: hsl(0, 0%, 85%);
@@ -38,26 +37,31 @@
   --color-contrast-high: hsl(0, 0%, 15%);
   --color-contrast-higher: hsl(0, 0%, 0%);
 
-  --color-text: var(--color-contrast-high);
+  --color-text: hsl(0, 0%, 0%);
+  --color-text-2: hsl(0, 0%, 15%);
+  --color-text-3: hsl(0, 0%, 50%);
+  --color-text-4: hsl(0, 0%, 80%);
+  --color-text-5: hsl(0, 0%, 85%);
+
   --color-border: var(--color-contrast-low);
 
+  --color-button: var(--color-contrast-lower-alt);
+  --color-button-hover: var(--color-contrast-low);
+  --color-button-action: var(--color-contrast-medium);
+  --color-button-action-hover: var(--color-contrast-lower-alt);
+
+  --color-sidebar: var(--color-contrast-lower);
   --color-sidebar-item-selected: var(--color-contrast-low);
+  --color-sidebar-icon: var(--color-text);
+  --color-sidebar-icon-selected: #fff;
+
   --color-snippet-selected: hsl(0, 0%, 94%);
+  --color-snippet-list: var(--color-bg);
 
   --color-editor-scrollbar: rgba(121, 121, 121, 0.4);
-}
 
-[data-theme='dark'] {
-  --color-primary: hsl(215, 93%, 52%);
-
-  --color-bg: hsl(0, 0%, 20%);
-  --color-contrast-lower: hsl(0, 0%, 25%);
-  --color-contrast-low: hsl(0, 0%, 32%);
-  --color-contrast-low-alt: hsl(0, 0%, 37%);
-  --color-contrast-medium: hsl(0, 0%, 50%);
-  --color-contrast-high: hsl(0, 0%, 85%);
-  --color-contrast-higher: hsl(0, 0%, 100%);
+  --color-menu-selected: var(--color-contrast-lower-alt);
 
-  --color-text: var(--color-contrast-high);
-  --color-border: var(--color-contrast-low);
+  --color-tag-delete: var(--color-contrast-lower-alt);
 }
+