From ac9acff203c899de08984c868e5301dea6eda1b1 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Thu, 27 Jan 2022 11:59:27 +0100
Subject: [PATCH] Add the Monokai theme.

---
 source/scss/style.scss           | 1 +
 source/scss/themes/_monokai.scss | 9 +++++++++
 source/ts/utilities/themes.ts    | 4 ++++
 3 files changed, 14 insertions(+)
 create mode 100644 source/scss/themes/_monokai.scss

diff --git a/source/scss/style.scss b/source/scss/style.scss
index e4848f8..6fc1250 100644
--- a/source/scss/style.scss
+++ b/source/scss/style.scss
@@ -4,6 +4,7 @@
 // Theme definitions
 @use 'themes/dracula';
 @use 'themes/love';
+@use 'themes/monokai';
 @use 'themes/solarized';
 
 // Component styling
diff --git a/source/scss/themes/_monokai.scss b/source/scss/themes/_monokai.scss
new file mode 100644
index 0000000..b13d579
--- /dev/null
+++ b/source/scss/themes/_monokai.scss
@@ -0,0 +1,9 @@
+@use 'sass:color';
+
+.monokai {
+  --border-radius: 8px;
+  --foreground-1: #d6d6d6;
+  --foreground-2: #d6d6d6;
+  --background-1: #{color.scale(#2e2e2e, $lightness: -25%)};
+  --background-2: #2e2e2e;
+}
diff --git a/source/ts/utilities/themes.ts b/source/ts/utilities/themes.ts
index 3aa09e5..869e247 100644
--- a/source/ts/utilities/themes.ts
+++ b/source/ts/utilities/themes.ts
@@ -26,6 +26,10 @@ export const themes: Theme[] = [
     cssClass: 'dracula',
     name: 'Dracula',
   },
+  {
+    cssClass: 'monokai',
+    name: 'Monokai',
+  },
 ];
 
 export const themeContext = createContext<Theme>(themes[0]);