From 57d6abc43e85dfa51c469680bfd7f70572747220 Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Thu, 6 Jun 2024 09:24:02 -0700
Subject: [PATCH 1/8] add AMOLED styling

---
 src/assets/locales/en.json             |   3 +-
 src/pages/parts/settings/ThemePart.tsx |   5 +
 themes/all.ts                          |   4 +-
 themes/list/amoled.ts                  | 261 +++++++++++++++++++++++++
 4 files changed, 271 insertions(+), 2 deletions(-)
 create mode 100644 themes/list/amoled.ts

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 17cc9c93..77c53c8b 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -545,7 +545,8 @@
         "default": "Default",
         "gray": "Gray",
         "red": "Red",
-        "teal": "Teal"
+        "teal": "Teal",
+        "amoled": "AMOLED"
       },
       "title": "Appearance"
     },
diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx
index b5600181..dc411207 100644
--- a/src/pages/parts/settings/ThemePart.tsx
+++ b/src/pages/parts/settings/ThemePart.tsx
@@ -30,6 +30,11 @@ const availableThemes = [
     selector: "theme-gray",
     key: "settings.appearance.themes.gray",
   },
+  {
+    id: "amoled",
+    selector: "theme-amoled",
+    key: "settings.appearance.themes.amoled",
+  },
 ];
 
 function ThemePreview(props: {
diff --git a/themes/all.ts b/themes/all.ts
index f59aac81..d6166319 100644
--- a/themes/all.ts
+++ b/themes/all.ts
@@ -2,10 +2,12 @@ import teal from "./list/teal";
 import blue from "./list/blue";
 import red from "./list/red";
 import gray from "./list/gray";
+import amoled from "./list/amoled";
 
 export const allThemes = [
   teal,
   blue,
   gray,
-  red
+  red,
+  amoled
 ]
diff --git a/themes/list/amoled.ts b/themes/list/amoled.ts
new file mode 100644
index 00000000..2ec343d5
--- /dev/null
+++ b/themes/list/amoled.ts
@@ -0,0 +1,261 @@
+import { createTheme } from "../types";
+
+const tokens = {
+  purple: {
+    c50: "#aaafff",
+    c100: "#8288fe",
+    c200: "#5a62eb",
+    c300: "#454cd4",
+    c400: "#333abe",
+    c500: "000000", //changed
+    c600: "#1f2363",
+    c700: "#191b4a",
+    c800: "#111334",
+    c900: "#0b0d22",
+    c1000: "#292d86"
+  },
+  shade: {
+    c25: "#9c9c9c",
+    c50: "#7c7c7c",
+    c100: "#666666",
+    c200: "#333333", 
+    c300: "#000000",
+    c400: "#0d0d0d",
+    c500: "#000000",
+    c600: "#0d0d0d",
+    c700: "#0d0d0d",
+    c800: "#151515",
+    c900: "#000000"
+  },
+  ash: {
+    c50: "#8d8d8d",
+    c100: "#6b6b6b",
+    c200: "#545454",
+    c300: "#3c3c3c",
+    c400: "#313131",
+    c500: "#2c2c2c",
+    c600: "#252525",
+    c700: "#1e1e1e",
+    c800: "#181818",
+    c900: "#111111"
+  },
+  blue: {
+    c50: "#ccccd6",
+    c100: "#a2a2a2",
+    c200: "#1e1e1e",
+    c300: "#646464",
+    c400: "#141414",
+    c500: "#000000",
+    c600: "#2e2e2e",
+    c700: "#272727",
+    c800: "#181818",
+    c900: "#0f0f0f"
+  }
+};
+
+export default createTheme({
+  name: "amoled",
+  extend: {
+    colors: {
+      themePreview: {
+        primary: tokens.blue.c500,
+        secondary: tokens.shade.c700
+      },
+
+      pill: {
+        background: tokens.shade.c700,
+        backgroundHover: tokens.shade.c800,
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c700,
+      },
+
+      global: {
+        accentA: tokens.blue.c200,
+        accentB: tokens.blue.c300
+      },
+
+      lightBar: {
+        light: tokens.blue.c400
+      },
+
+      buttons: {
+        toggle: tokens.purple.c300,
+        toggleDisabled: tokens.ash.c500,
+
+        secondary: tokens.ash.c700,
+        secondaryHover: tokens.ash.c700,
+        purple: tokens.purple.c600,
+        purpleHover: tokens.purple.c1000,
+        cancel: tokens.shade.c700,
+        cancelHover: tokens.shade.c800
+      },
+
+      background: {
+        main: tokens.shade.c900,
+        secondary: tokens.shade.c700,
+        secondaryHover: tokens.shade.c400,
+        accentA: tokens.purple.c500,
+        accentB: tokens.blue.c500
+      },
+
+      modal: {
+        background: tokens.shade.c800,
+      },
+
+      type: {
+        logo: tokens.purple.c100,
+        text: tokens.shade.c50,
+        dimmed: tokens.shade.c50,
+        divider: tokens.ash.c500,
+        secondary: tokens.ash.c100,
+        link: tokens.purple.c100,
+        linkHover: tokens.purple.c50
+      },
+
+      search: {
+        background: tokens.shade.c500,
+        hoverBackground: tokens.shade.c600,
+        focused: tokens.shade.c400,
+        placeholder: tokens.shade.c100,
+        icon: tokens.shade.c100
+      },
+
+      mediaCard: {
+        hoverBackground: tokens.shade.c600,
+        hoverAccent: tokens.shade.c100,
+        hoverShadow: tokens.shade.c900,
+        shadow: tokens.shade.c700,
+        barColor: tokens.ash.c800,
+        barFillColor: tokens.ash.c600,
+        badge: tokens.shade.c700,
+        badgeText: tokens.ash.c100
+      },
+
+      largeCard: {
+        background: tokens.shade.c600,
+        icon: tokens.purple.c400
+      },
+
+      dropdown: {
+        background: tokens.shade.c600,
+        altBackground: tokens.shade.c600,
+        hoverBackground: tokens.shade.c600,
+        text: tokens.shade.c50,
+        secondary: tokens.shade.c100,
+        border: tokens.shade.c400,
+        contentBackground: tokens.shade.c500
+      },
+
+      authentication: {
+        border: tokens.shade.c300,
+        inputBg: tokens.shade.c600,
+        inputBgHover: tokens.shade.c500,
+        wordBackground: tokens.shade.c500,
+        copyText: tokens.shade.c100,
+        copyTextHover: tokens.ash.c50
+      },
+
+      settings: {
+        sidebar: {
+          activeLink: tokens.shade.c600,
+          badge: tokens.shade.c900,
+
+          type: {
+            secondary: tokens.shade.c200,
+            inactive: tokens.shade.c50,
+            icon: tokens.shade.c50,
+            iconActivated: tokens.shade.c200,
+            activated: tokens.blue.c300
+          }
+        },
+
+        card: {
+          border: tokens.shade.c400,
+          background: tokens.shade.c400,
+          altBackground: tokens.shade.c400
+        },
+
+        saveBar: {
+          background: tokens.shade.c600
+        }
+      },
+
+      utils: {
+        divider: tokens.ash.c300
+      },
+
+      errors: {
+        card: tokens.shade.c700,
+        border: tokens.ash.c500,
+
+        type: {
+          secondary: tokens.ash.c100
+        }
+      },
+
+      about: {
+        circle: tokens.ash.c500,
+        circleText: tokens.ash.c50
+      },
+
+      editBadge: {
+        bg: tokens.ash.c500,
+        bgHover: tokens.ash.c400,
+        text: tokens.ash.c50
+      },
+
+      progress: {
+        background: tokens.ash.c800,
+        preloaded: tokens.ash.c800,
+        filled: tokens.ash.c600
+      },
+
+      video: {
+        buttonBackground: tokens.ash.c600,
+
+        autoPlay: {
+          background: tokens.ash.c800,
+          hover: tokens.ash.c600 
+        },
+
+        scraping: {
+          card: tokens.shade.c700,
+          loading: tokens.purple.c200,
+          noresult: tokens.ash.c100
+        },
+
+        audio: {
+          set: tokens.ash.c600
+        },
+
+        context: {
+          background: tokens.shade.c600,
+          light: tokens.shade.c50,
+          border: tokens.ash.c600,
+          hoverColor: tokens.ash.c600,
+          buttonFocus: tokens.ash.c500,
+          flagBg: tokens.ash.c500,
+          inputBg: tokens.ash.c600,
+          buttonOverInputHover: tokens.ash.c500,
+          inputPlaceholder: tokens.ash.c200,
+          cardBorder: tokens.ash.c700,
+          slider: tokens.ash.c800,
+          sliderFilled: tokens.ash.c600,
+
+          buttons: {
+            list: tokens.ash.c700,
+            active: tokens.ash.c900
+          },
+
+          closeHover: tokens.ash.c800,
+
+          type: {
+            secondary: tokens.ash.c200,
+            accent: tokens.purple.c200
+          }
+        }
+      }
+    }
+  }
+});

From 6bbaf362954128cbfcf2214f3049344c23f5ea7d Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Thu, 6 Jun 2024 09:31:25 -0700
Subject: [PATCH 2/8] remove comment

---
 themes/list/amoled.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/list/amoled.ts b/themes/list/amoled.ts
index 2ec343d5..27bbce52 100644
--- a/themes/list/amoled.ts
+++ b/themes/list/amoled.ts
@@ -7,7 +7,7 @@ const tokens = {
     c200: "#5a62eb",
     c300: "#454cd4",
     c400: "#333abe",
-    c500: "000000", //changed
+    c500: "#000000",
     c600: "#1f2363",
     c700: "#191b4a",
     c800: "#111334",

From 1dc8439ab673ea44210ef85925a7aded0cd2bba6 Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Thu, 6 Jun 2024 11:22:08 -0700
Subject: [PATCH 3/8] make AMOLED styling better

---
 themes/list/amoled.ts | 101 ++++++++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 47 deletions(-)

diff --git a/themes/list/amoled.ts b/themes/list/amoled.ts
index 27bbce52..4013e5d9 100644
--- a/themes/list/amoled.ts
+++ b/themes/list/amoled.ts
@@ -1,31 +1,39 @@
 import { createTheme } from "../types";
 
 const tokens = {
+  black: "#000000",
+  white: "#FFFFFF",
+  semantic: {
+    silver: {
+      c100: "#DEDEDE",
+      c200: "#B6CAD7",
+      c300: "#8EA3B0",
+      c400: "#617A8A",
+    },
+  },
   purple: {
     c50: "#aaafff",
     c100: "#8288fe",
     c200: "#5a62eb",
     c300: "#454cd4",
     c400: "#333abe",
-    c500: "#000000",
+    c500: "#292d86",
     c600: "#1f2363",
     c700: "#191b4a",
     c800: "#111334",
-    c900: "#0b0d22",
-    c1000: "#292d86"
+    c900: "#0b0d22"
   },
   shade: {
-    c25: "#9c9c9c",
     c50: "#7c7c7c",
     c100: "#666666",
-    c200: "#333333", 
-    c300: "#000000",
-    c400: "#0d0d0d",
-    c500: "#000000",
-    c600: "#0d0d0d",
-    c700: "#0d0d0d",
+    c200: "#4f4f4f",
+    c300: "#404040",
+    c400: "#343434",
+    c500: "#282828",
+    c600: "#202020",
+    c700: "#1a1a1a",
     c800: "#151515",
-    c900: "#000000"
+    c900: "#0e0e0e"
   },
   ash: {
     c50: "#8d8d8d",
@@ -42,16 +50,16 @@ const tokens = {
   blue: {
     c50: "#ccccd6",
     c100: "#a2a2a2",
-    c200: "#1e1e1e",
+    c200: "#868686",
     c300: "#646464",
-    c400: "#141414",
-    c500: "#000000",
+    c400: "#4e4e4e",
+    c500: "#383838",
     c600: "#2e2e2e",
     c700: "#272727",
     c800: "#181818",
     c900: "#0f0f0f"
   }
-};
+}
 
 export default createTheme({
   name: "amoled",
@@ -63,10 +71,9 @@ export default createTheme({
       },
 
       pill: {
-        background: tokens.shade.c700,
-        backgroundHover: tokens.shade.c800,
+        background: tokens.black,
+        backgroundHover: tokens.shade.c500,
         highlight: tokens.blue.c200,
-
         activeBackground: tokens.shade.c700,
       },
 
@@ -76,27 +83,26 @@ export default createTheme({
       },
 
       lightBar: {
-        light: tokens.blue.c400
+        light: tokens.shade.c900,
       },
 
       buttons: {
         toggle: tokens.purple.c300,
         toggleDisabled: tokens.ash.c500,
-
         secondary: tokens.ash.c700,
         secondaryHover: tokens.ash.c700,
         purple: tokens.purple.c600,
-        purpleHover: tokens.purple.c1000,
+        purpleHover: tokens.purple.c400,
         cancel: tokens.shade.c700,
         cancelHover: tokens.shade.c800
       },
 
       background: {
-        main: tokens.shade.c900,
-        secondary: tokens.shade.c700,
-        secondaryHover: tokens.shade.c400,
-        accentA: tokens.purple.c500,
-        accentB: tokens.blue.c500
+        main: tokens.black,
+        secondary: tokens.black,
+        secondaryHover: tokens.black,
+        accentA: tokens.black,
+        accentB: tokens.black
       },
 
       modal: {
@@ -114,18 +120,18 @@ export default createTheme({
       },
 
       search: {
-        background: tokens.shade.c500,
-        hoverBackground: tokens.shade.c600,
-        focused: tokens.shade.c400,
-        placeholder: tokens.shade.c100,
-        icon: tokens.shade.c100
+        background: tokens.shade.c800,
+        hoverBackground: tokens.shade.c900,
+        focused: tokens.shade.c700,
+        placeholder: tokens.shade.c200,
+        icon: tokens.shade.c500
       },
 
       mediaCard: {
-        hoverBackground: tokens.shade.c600,
+        hoverBackground: tokens.shade.c900,
         hoverAccent: tokens.shade.c100,
-        hoverShadow: tokens.shade.c900,
-        shadow: tokens.shade.c700,
+        hoverShadow: tokens.black,
+        shadow: tokens.shade.c800,
         barColor: tokens.ash.c800,
         barFillColor: tokens.ash.c600,
         badge: tokens.shade.c700,
@@ -138,13 +144,13 @@ export default createTheme({
       },
 
       dropdown: {
-        background: tokens.shade.c600,
-        altBackground: tokens.shade.c600,
-        hoverBackground: tokens.shade.c600,
+        background: tokens.shade.c800,
+        altBackground: tokens.black,
+        hoverBackground: tokens.shade.c700,
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.shade.c500
+        contentBackground: tokens.black
       },
 
       authentication: {
@@ -158,7 +164,7 @@ export default createTheme({
 
       settings: {
         sidebar: {
-          activeLink: tokens.shade.c600,
+          activeLink: tokens.shade.c800,
           badge: tokens.shade.c900,
 
           type: {
@@ -171,13 +177,13 @@ export default createTheme({
         },
 
         card: {
-          border: tokens.shade.c400,
-          background: tokens.shade.c400,
-          altBackground: tokens.shade.c400
+          border: tokens.shade.c700,
+          background: tokens.shade.c700,
+          altBackground: tokens.shade.c700
         },
 
         saveBar: {
-          background: tokens.shade.c600
+          background: tokens.black
         }
       },
 
@@ -186,7 +192,7 @@ export default createTheme({
       },
 
       errors: {
-        card: tokens.shade.c700,
+        card: tokens.black,
         border: tokens.ash.c500,
 
         type: {
@@ -220,7 +226,7 @@ export default createTheme({
         },
 
         scraping: {
-          card: tokens.shade.c700,
+          card: tokens.black,
           loading: tokens.purple.c200,
           noresult: tokens.ash.c100
         },
@@ -230,7 +236,7 @@ export default createTheme({
         },
 
         context: {
-          background: tokens.shade.c600,
+          background: tokens.black,
           light: tokens.shade.c50,
           border: tokens.ash.c600,
           hoverColor: tokens.ash.c600,
@@ -252,7 +258,8 @@ export default createTheme({
 
           type: {
             secondary: tokens.ash.c200,
-            accent: tokens.purple.c200
+            accent: tokens.purple.c200,
+            main: tokens.semantic.silver.c300
           }
         }
       }

From 3330e6ba4fa249e732a9f8f1c30bc876a1342033 Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Thu, 6 Jun 2024 12:02:15 -0700
Subject: [PATCH 4/8] re-add purple coloring

---
 themes/list/amoled.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/themes/list/amoled.ts b/themes/list/amoled.ts
index 4013e5d9..8b8c40a3 100644
--- a/themes/list/amoled.ts
+++ b/themes/list/amoled.ts
@@ -132,8 +132,8 @@ export default createTheme({
         hoverAccent: tokens.shade.c100,
         hoverShadow: tokens.black,
         shadow: tokens.shade.c800,
-        barColor: tokens.ash.c800,
-        barFillColor: tokens.ash.c600,
+        barColor: tokens.ash.c200,
+        barFillColor: tokens.purple.c100,
         badge: tokens.shade.c700,
         badgeText: tokens.ash.c100
       },
@@ -171,8 +171,8 @@ export default createTheme({
             secondary: tokens.shade.c200,
             inactive: tokens.shade.c50,
             icon: tokens.shade.c50,
-            iconActivated: tokens.shade.c200,
-            activated: tokens.blue.c300
+            iconActivated: tokens.purple.c200,
+            activated: tokens.purple.c100
           }
         },
 
@@ -212,9 +212,9 @@ export default createTheme({
       },
 
       progress: {
-        background: tokens.ash.c800,
-        preloaded: tokens.ash.c800,
-        filled: tokens.ash.c600
+        background: tokens.ash.c50,
+        preloaded: tokens.ash.c50,
+        filled: tokens.purple.c200
       },
 
       video: {
@@ -232,7 +232,7 @@ export default createTheme({
         },
 
         audio: {
-          set: tokens.ash.c600
+          set: tokens.purple.c200
         },
 
         context: {

From 398bd9ace87209fec14cea5d6076e937c84d258d Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Thu, 6 Jun 2024 12:05:18 -0700
Subject: [PATCH 5/8] fix purple coloring

---
 themes/list/amoled.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/list/amoled.ts b/themes/list/amoled.ts
index 8b8c40a3..0c29cf23 100644
--- a/themes/list/amoled.ts
+++ b/themes/list/amoled.ts
@@ -246,8 +246,8 @@ export default createTheme({
           buttonOverInputHover: tokens.ash.c500,
           inputPlaceholder: tokens.ash.c200,
           cardBorder: tokens.ash.c700,
-          slider: tokens.ash.c800,
-          sliderFilled: tokens.ash.c600,
+          slider: tokens.ash.c50,
+          sliderFilled: tokens.purple.c200,
 
           buttons: {
             list: tokens.ash.c700,

From 8b6e7d3643a58607c481140ab9ce5262a2eba516 Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Sun, 9 Jun 2024 17:02:20 -0700
Subject: [PATCH 6/8] rename AMOLED to black & implement darker theme per
 request

---
 src/assets/locales/en.json             |  2 +-
 src/pages/parts/settings/ThemePart.tsx |  6 +-
 themes/all.ts                          |  4 +-
 themes/list/{amoled.ts => black.ts}    | 78 ++++++++++++++------------
 4 files changed, 48 insertions(+), 42 deletions(-)
 rename themes/list/{amoled.ts => black.ts} (76%)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 77c53c8b..3a8717d0 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -546,7 +546,7 @@
         "gray": "Gray",
         "red": "Red",
         "teal": "Teal",
-        "amoled": "AMOLED"
+        "black": "Black"
       },
       "title": "Appearance"
     },
diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx
index dc411207..7f99a4aa 100644
--- a/src/pages/parts/settings/ThemePart.tsx
+++ b/src/pages/parts/settings/ThemePart.tsx
@@ -31,9 +31,9 @@ const availableThemes = [
     key: "settings.appearance.themes.gray",
   },
   {
-    id: "amoled",
-    selector: "theme-amoled",
-    key: "settings.appearance.themes.amoled",
+    id: "black",
+    selector: "theme-black",
+    key: "settings.appearance.themes.black",
   },
 ];
 
diff --git a/themes/all.ts b/themes/all.ts
index d6166319..025cd1a3 100644
--- a/themes/all.ts
+++ b/themes/all.ts
@@ -2,12 +2,12 @@ import teal from "./list/teal";
 import blue from "./list/blue";
 import red from "./list/red";
 import gray from "./list/gray";
-import amoled from "./list/amoled";
+import black from "./list/black";
 
 export const allThemes = [
   teal,
   blue,
   gray,
   red,
-  amoled
+  black
 ]
diff --git a/themes/list/amoled.ts b/themes/list/black.ts
similarity index 76%
rename from themes/list/amoled.ts
rename to themes/list/black.ts
index 0c29cf23..e56f9fbd 100644
--- a/themes/list/amoled.ts
+++ b/themes/list/black.ts
@@ -1,8 +1,14 @@
 import { createTheme } from "../types";
 
 const tokens = {
-  black: "#000000",
   white: "#FFFFFF",
+  black: {
+    c50: "#000000",
+    c100: "#0d0d0d",
+    c125: "#141414",
+    c150: "#1a1a1a",
+    c200: "#262626"
+  },
   semantic: {
     silver: {
       c100: "#DEDEDE",
@@ -62,7 +68,7 @@ const tokens = {
 }
 
 export default createTheme({
-  name: "amoled",
+  name: "black",
   extend: {
     colors: {
       themePreview: {
@@ -71,8 +77,8 @@ export default createTheme({
       },
 
       pill: {
-        background: tokens.black,
-        backgroundHover: tokens.shade.c500,
+        background: tokens.black.c100,
+        backgroundHover: tokens.black.c125,
         highlight: tokens.blue.c200,
         activeBackground: tokens.shade.c700,
       },
@@ -88,21 +94,21 @@ export default createTheme({
 
       buttons: {
         toggle: tokens.purple.c300,
-        toggleDisabled: tokens.ash.c500,
-        secondary: tokens.ash.c700,
-        secondaryHover: tokens.ash.c700,
+        toggleDisabled: tokens.black.c200,
+        secondary: tokens.black.c100,
+        secondaryHover: tokens.black.c150,
         purple: tokens.purple.c600,
         purpleHover: tokens.purple.c400,
-        cancel: tokens.shade.c700,
-        cancelHover: tokens.shade.c800
+        cancel: tokens.black.c100,
+        cancelHover: tokens.black.c150
       },
 
       background: {
-        main: tokens.black,
-        secondary: tokens.black,
-        secondaryHover: tokens.black,
-        accentA: tokens.black,
-        accentB: tokens.black
+        main: tokens.black.c50,
+        secondary: tokens.black.c50,
+        secondaryHover: tokens.black.c50,
+        accentA: tokens.black.c50,
+        accentB: tokens.black.c50
       },
 
       modal: {
@@ -120,9 +126,9 @@ export default createTheme({
       },
 
       search: {
-        background: tokens.shade.c800,
+        background: tokens.black.c100,
         hoverBackground: tokens.shade.c900,
-        focused: tokens.shade.c700,
+        focused: tokens.black.c125,
         placeholder: tokens.shade.c200,
         icon: tokens.shade.c500
       },
@@ -130,7 +136,7 @@ export default createTheme({
       mediaCard: {
         hoverBackground: tokens.shade.c900,
         hoverAccent: tokens.shade.c100,
-        hoverShadow: tokens.black,
+        hoverShadow: tokens.black.c50,
         shadow: tokens.shade.c800,
         barColor: tokens.ash.c200,
         barFillColor: tokens.purple.c100,
@@ -139,24 +145,24 @@ export default createTheme({
       },
 
       largeCard: {
-        background: tokens.shade.c600,
+        background: tokens.black.c100,
         icon: tokens.purple.c400
       },
 
       dropdown: {
-        background: tokens.shade.c800,
-        altBackground: tokens.black,
-        hoverBackground: tokens.shade.c700,
+        background: tokens.black.c100,
+        altBackground: tokens.black.c50,
+        hoverBackground: tokens.black.c150,
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
         border: tokens.shade.c400,
-        contentBackground: tokens.black
+        contentBackground: tokens.black.c50
       },
 
       authentication: {
         border: tokens.shade.c300,
-        inputBg: tokens.shade.c600,
-        inputBgHover: tokens.shade.c500,
+        inputBg: tokens.black.c100,
+        inputBgHover: tokens.black.c150,
         wordBackground: tokens.shade.c500,
         copyText: tokens.shade.c100,
         copyTextHover: tokens.ash.c50
@@ -164,13 +170,13 @@ export default createTheme({
 
       settings: {
         sidebar: {
-          activeLink: tokens.shade.c800,
+          activeLink: tokens.black.c100,
           badge: tokens.shade.c900,
 
           type: {
             secondary: tokens.shade.c200,
             inactive: tokens.shade.c50,
-            icon: tokens.shade.c50,
+            icon: tokens.black.c200,
             iconActivated: tokens.purple.c200,
             activated: tokens.purple.c100
           }
@@ -178,12 +184,12 @@ export default createTheme({
 
         card: {
           border: tokens.shade.c700,
-          background: tokens.shade.c700,
-          altBackground: tokens.shade.c700
+          background: tokens.black.c100,
+          altBackground: tokens.black.c100
         },
 
         saveBar: {
-          background: tokens.black
+          background: tokens.black.c50
         }
       },
 
@@ -192,7 +198,7 @@ export default createTheme({
       },
 
       errors: {
-        card: tokens.black,
+        card: tokens.black.c50,
         border: tokens.ash.c500,
 
         type: {
@@ -201,7 +207,7 @@ export default createTheme({
       },
 
       about: {
-        circle: tokens.ash.c500,
+        circle: tokens.black.c100,
         circleText: tokens.ash.c50
       },
 
@@ -226,9 +232,9 @@ export default createTheme({
         },
 
         scraping: {
-          card: tokens.black,
+          card: tokens.black.c50,
           loading: tokens.purple.c200,
-          noresult: tokens.ash.c100
+          noresult: tokens.black.c200
         },
 
         audio: {
@@ -236,17 +242,17 @@ export default createTheme({
         },
 
         context: {
-          background: tokens.black,
+          background: tokens.black.c50,
           light: tokens.shade.c50,
           border: tokens.ash.c600,
           hoverColor: tokens.ash.c600,
           buttonFocus: tokens.ash.c500,
           flagBg: tokens.ash.c500,
-          inputBg: tokens.ash.c600,
+          inputBg: tokens.black.c100,
           buttonOverInputHover: tokens.ash.c500,
           inputPlaceholder: tokens.ash.c200,
           cardBorder: tokens.ash.c700,
-          slider: tokens.ash.c50,
+          slider: tokens.black.c200,
           sliderFilled: tokens.purple.c200,
 
           buttons: {

From d370e7b850d76fefb592494b6963156f27264a9c Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Sun, 9 Jun 2024 17:40:28 -0700
Subject: [PATCH 7/8] rename to BLCK & fix styling

---
 src/assets/locales/en.json             |  2 +-
 src/pages/parts/settings/ThemePart.tsx |  6 +++---
 themes/all.ts                          |  4 ++--
 themes/list/{black.ts => blck.ts}      | 23 +++++++++++++----------
 4 files changed, 19 insertions(+), 16 deletions(-)
 rename themes/list/{black.ts => blck.ts} (93%)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 3a8717d0..e62d0d65 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -546,7 +546,7 @@
         "gray": "Gray",
         "red": "Red",
         "teal": "Teal",
-        "black": "Black"
+        "blck": "BLCK"
       },
       "title": "Appearance"
     },
diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx
index 7f99a4aa..5a509482 100644
--- a/src/pages/parts/settings/ThemePart.tsx
+++ b/src/pages/parts/settings/ThemePart.tsx
@@ -31,9 +31,9 @@ const availableThemes = [
     key: "settings.appearance.themes.gray",
   },
   {
-    id: "black",
-    selector: "theme-black",
-    key: "settings.appearance.themes.black",
+    id: "blck",
+    selector: "theme-blck",
+    key: "settings.appearance.themes.blck",
   },
 ];
 
diff --git a/themes/all.ts b/themes/all.ts
index 025cd1a3..715597af 100644
--- a/themes/all.ts
+++ b/themes/all.ts
@@ -2,12 +2,12 @@ import teal from "./list/teal";
 import blue from "./list/blue";
 import red from "./list/red";
 import gray from "./list/gray";
-import black from "./list/black";
+import blck from "./list/blck";
 
 export const allThemes = [
   teal,
   blue,
   gray,
   red,
-  black
+  blck
 ]
diff --git a/themes/list/black.ts b/themes/list/blck.ts
similarity index 93%
rename from themes/list/black.ts
rename to themes/list/blck.ts
index e56f9fbd..5c3a09e2 100644
--- a/themes/list/black.ts
+++ b/themes/list/blck.ts
@@ -4,10 +4,13 @@ const tokens = {
   white: "#FFFFFF",
   black: {
     c50: "#000000",
+    c75: "#030303",
+    c80: "#080808",
     c100: "#0d0d0d",
     c125: "#141414",
     c150: "#1a1a1a",
-    c200: "#262626"
+    c200: "#262626",
+    c250: "#333333"
   },
   semantic: {
     silver: {
@@ -68,7 +71,7 @@ const tokens = {
 }
 
 export default createTheme({
-  name: "black",
+  name: "blck",
   extend: {
     colors: {
       themePreview: {
@@ -104,11 +107,11 @@ export default createTheme({
       },
 
       background: {
-        main: tokens.black.c50,
-        secondary: tokens.black.c50,
-        secondaryHover: tokens.black.c50,
-        accentA: tokens.black.c50,
-        accentB: tokens.black.c50
+        main: tokens.black.c75,
+        secondary: tokens.black.c75,
+        secondaryHover: tokens.black.c75,
+        accentA: tokens.black.c75,
+        accentB: tokens.black.c75
       },
 
       modal: {
@@ -135,7 +138,7 @@ export default createTheme({
 
       mediaCard: {
         hoverBackground: tokens.shade.c900,
-        hoverAccent: tokens.shade.c100,
+        hoverAccent: tokens.black.c250,
         hoverShadow: tokens.black.c50,
         shadow: tokens.shade.c800,
         barColor: tokens.ash.c200,
@@ -151,7 +154,7 @@ export default createTheme({
 
       dropdown: {
         background: tokens.black.c100,
-        altBackground: tokens.black.c50,
+        altBackground: tokens.black.c80,
         hoverBackground: tokens.black.c150,
         text: tokens.shade.c50,
         secondary: tokens.shade.c100,
@@ -198,7 +201,7 @@ export default createTheme({
       },
 
       errors: {
-        card: tokens.black.c50,
+        card: tokens.black.c75,
         border: tokens.ash.c500,
 
         type: {

From ed24abc10f96ee1ac3568933e09868648b35d0d5 Mon Sep 17 00:00:00 2001
From: kirbo <gpgsign@kirbo.zip>
Date: Sun, 9 Jun 2024 17:44:10 -0700
Subject: [PATCH 8/8] fix themePreview

---
 themes/list/blck.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/list/blck.ts b/themes/list/blck.ts
index 5c3a09e2..72a424da 100644
--- a/themes/list/blck.ts
+++ b/themes/list/blck.ts
@@ -75,8 +75,8 @@ export default createTheme({
   extend: {
     colors: {
       themePreview: {
-        primary: tokens.blue.c500,
-        secondary: tokens.shade.c700
+        primary: tokens.black.c80,
+        secondary: tokens.black.c100
       },
 
       pill: {