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]);