From 042e4f5a0374be08f24cdcf5acf9b9ae3c79a1d9 Mon Sep 17 00:00:00 2001
From: array-in-a-matrix <git@arrayinamatrix.xyz>
Date: Tue, 21 Mar 2023 09:26:43 -0400
Subject: [PATCH] Almond Dark theme

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

diff --git a/src/app/organisms/settings/Settings.jsx b/src/app/organisms/settings/Settings.jsx
index d3c5e3c..efa0fe0 100644
--- a/src/app/organisms/settings/Settings.jsx
+++ b/src/app/organisms/settings/Settings.jsx
@@ -80,6 +80,7 @@ function AppearanceSection() {
                 { text: 'Butter' },
                 { text: 'Nord Dark' },
                 { text: 'Cyberpunk' },
+                { text: 'Almond Dark'},
               ]}
               onSelect={(index) => {
                 if (settings.useSystemTheme) toggleSystemTheme();
diff --git a/src/client/state/settings.js b/src/client/state/settings.js
index adb3e3c..81fc520 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', 'nord-dark-theme', 'cyberpunk'];
+    this.themes = ['', 'silver-theme', 'dark-theme', 'butter-theme', 'nord-dark-theme', 'cyberpunk', 'almond-dark'];
     this.themeIndex = this.getThemeIndex();
 
     this.useSystemTheme = this.getUseSystemTheme();
diff --git a/src/index.scss b/src/index.scss
index aa49f02..7e4f34e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -289,7 +289,8 @@
 .dark-theme,
 .butter-theme,
 .nord-dark-theme,
-.cyberpunk {
+.cyberpunk,
+.almond-dark {
   @include dark-mode();
 }
 
@@ -372,6 +373,33 @@
   --ic-surface-low: rgba(255, 251, 222, 64%);
 }
 
+.almond-dark {
+  /* background color | --bg-[background type]: value */
+  --bg-surface: hsl(0, 0%, 0%);
+  --bg-surface-transparent: hsla(0, 0%, 0%, 0);
+  --bg-surface-low: hsl(0, 0%, 1%);
+  --bg-surface-low-transparent: hsla(0, 0%, 0%, 0);
+  --bg-surface-extra-low: hsl(0, 0%, 2%);
+  --bg-surface-extra-low-transparent: hsla(0, 0%, 0%, 0);
+
+  --bg-badge: rgb(255, 251, 222, 90%);
+  --bg-positive: rgb(255, 251, 222, 90%);
+  --bg-positive-hover: rgba(255, 251, 222, 8%);
+  --bg-positive-active: rgba(255, 251, 222, 15%);
+  --bg-positive-border: rgba(255, 251, 222, 40%);
+
+  /* text color | --tc-[background type]-[priority]: value */
+  --tc-surface-high: rgb(255, 251, 222, 90%);
+  --tc-surface-normal: rgba(255, 251, 222, 90%);
+  --tc-surface-normal-low: rgba(255, 251, 222, 60%);
+  --tc-surface-low: rgba(255, 251, 222, 30%);
+
+  /* system icons | --ic-[background type]-[priority]: value */
+  --ic-surface-high: rgb(255, 251, 222, 90%);
+  --ic-surface-normal: rgba(255, 251, 222, 60%);
+  --ic-surface-low: rgba(255, 251, 222, 30%);
+}
+
 .font-primary {
   font-family: var(--font-primary);