From fb47a795ec2ba652559daef3cb797efec7f4045e Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Wed, 26 Jan 2022 13:04:03 +0100
Subject: [PATCH] Add the Dracula theme.

---
 source/scss/style.scss           | 1 +
 source/scss/themes/_dracula.scss | 7 +++++++
 source/ts/utilities/themes.ts    | 4 ++++
 3 files changed, 12 insertions(+)
 create mode 100644 source/scss/themes/_dracula.scss

diff --git a/source/scss/style.scss b/source/scss/style.scss
index 5e5da9f..e4848f8 100644
--- a/source/scss/style.scss
+++ b/source/scss/style.scss
@@ -2,6 +2,7 @@
 @use 'common';
 
 // Theme definitions
+@use 'themes/dracula';
 @use 'themes/love';
 @use 'themes/solarized';
 
diff --git a/source/scss/themes/_dracula.scss b/source/scss/themes/_dracula.scss
new file mode 100644
index 0000000..5d3461f
--- /dev/null
+++ b/source/scss/themes/_dracula.scss
@@ -0,0 +1,7 @@
+.dracula {
+  --border-radius: 8px;
+  --foreground-1: #f8f8f2;
+  --foreground-2: #f8f8f2;
+  --background-1: #282a36;
+  --background-2: #44475a;
+}
diff --git a/source/ts/utilities/themes.ts b/source/ts/utilities/themes.ts
index 79a8bcf..3aa09e5 100644
--- a/source/ts/utilities/themes.ts
+++ b/source/ts/utilities/themes.ts
@@ -22,6 +22,10 @@ export const themes: Theme[] = [
     cssClass: 'solarized-light',
     name: 'Solarized Light',
   },
+  {
+    cssClass: 'dracula',
+    name: 'Dracula',
+  },
 ];
 
 export const themeContext = createContext<Theme>(themes[0]);