From d99b34a57e119a236180daa0c0f1bdbfababa482 Mon Sep 17 00:00:00 2001
From: Jonas Wunderlich <git@03j.de>
Date: Wed, 12 Apr 2023 16:24:47 +0200
Subject: [PATCH] Add dracula theme

---
 src/app/organisms/settings/Settings.jsx |  1 +
 src/client/state/settings.js            |  2 +-
 src/index.scss                          | 39 ++++++++++++++++++++++++-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index a0869b615..61286c5ae 100644
--- 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
index 32f55fcc6..c83adbf58 100644
--- 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
index 39d0612b0..ace47691c 100644
--- 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%);