Add dracula theme

cinnyapp · Apr 12, 2023 · d99b34a · d99b34a
1 parent da92ce3
commit d99b34a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
@@ -71,6 +71,7 @@ function AppearanceSection() {
                 { text: 'Silver' },
                 { text: 'Dark' },
                 { text: 'Butter' },
+                { text: 'Dracula' },
               ]}
               onSelect={(index) => {
                 if (settings.useSystemTheme) toggleSystemTheme();

diff --git a/src/client/state/settings.js b/src/client/state/settings.js
@@ -20,7 +20,7 @@ class Settings extends EventEmitter {
   constructor() {
     super();
 
-    this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme'];
+    this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme', 'dracula-theme'];
     this.themeIndex = this.getThemeIndex();
 
     this.useSystemTheme = this.getUseSystemTheme();

diff --git a/src/index.scss b/src/index.scss
@@ -296,7 +296,8 @@
 }
 
 .dark-theme,
-.butter-theme {
+.butter-theme,
+.dracula-theme {
   @include dark-mode();
 }
 
@@ -306,6 +307,42 @@
   }
 }
 
+.dracula-theme {
+    --bg-surface: hsl(231, 15%, 18%);
+    --bg-surface-transparent: hsl(231, 15%, 18%, 0);
+    --bg-surface-low: hsl(231, 15%, 14%);
+    --bg-surface-low-transparent: hsl(231, 15%, 18%, 0);
+    --bg-surface-extra-low: hsl(231, 15%, 12%);
+    --bg-surface-extra-low-transparent: hsl(231, 15%, 18%, 0);
+    --bg-surface-hover: hsl(231, 15%, 25%, 30%);
+    --bg-surface-active: hsl(231, 15%, 30%);
+    --bg-surface-border: hsl(231, 15%, 8%);
+
+    --bg-primary: hsl(265, 89%, 78%);
+    --bg-primary-hover: hsl(265, 89%, 70%);
+    --bg-primary-active: hsl(265, 89%, 65%);
+    --bg-primary-border: white;
+
+    --bg-tooltip: hsl(225, 27%, 51%);
+    --bg-badge: hsl(231, 15%, 18%);
+    --bg-ping: hsla(135, 94%, 65%, 50%);
+    --bg-ping-hover: hsla(135, 94%, 65%, 60%);
+    --bg-divider: hsl(232, 14%, 31%);
+
+    --tc-surface-high: hsla(60, 30%, 96%, 98%);
+    --tc-surface-normal: hsla(60, 30%, 96%, 94%);
+    --tc-surface-normal-low: hsla(60, 30%, 96%, 60%);
+    --tc-surface-low: hsla(60, 30%, 96%, 58%);
+
+    --tc-code: hsl(326, 100%, 74%);
+    --tc-link: hsl(265, 89%, 78%);
+    --tc-badge: hsl(265, 89%, 78%);
+
+    --ic-surface-high: hsl(60, 30%, 96%);
+    --ic-surface-normal: hsla(60, 30%, 96%, 84%);
+    --ic-surface-low: hsla(60, 30%, 96%, 64%);
+
+}
 .butter-theme {
   /* background color | --bg-[background type]: value */
   --bg-surface: hsl(64, 6%, 14%);