From ee961c7c4f8eed6ce89ed026c1806ebb423037d5 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Wed, 18 Oct 2023 20:55:45 +0200
Subject: [PATCH] feat: add blur variants for all themes

---
 src/assets/base.css      | 10 +++++-----
 src/components/Prefs.vue |  7 +++++--
 src/locales/en.json      |  7 +++++--
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index e4333f2..8212db5 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -22,8 +22,8 @@
 }
 
 :root,
-body[data-theme='dark'],
-body[date-theme='black'] {
+body[data-theme^='dark'],
+body[date-theme^='black'] {
   --color-foreground: var(--vt-c-blue);
   --color-background: var(--vt-c-black);
   --color-background-soft: var(--vt-c-black-soft);
@@ -40,7 +40,7 @@ body[date-theme='black'] {
   --color-text: var(--vt-c-text-dark-2);
 }
 
-body[data-theme='black'] {
+body[data-theme^='black'] {
   --color-background: #000;
   --color-background-mute: #181818;
 }
@@ -62,7 +62,7 @@ body[data-theme^='light'] {
   --color-text: var(--vt-c-text-light-1);
 }
 
-body[data-theme='nord'] {
+body[data-theme^='nord'] {
   --color-foreground: #88c0d0;
   --color-background: #2e3440;
   --color-background-soft: #3b4252;
@@ -78,7 +78,7 @@ body[data-theme='nord'] {
   --color-text: #d8dee9;
 }
 
-body[data-theme='dracula'] {
+body[data-theme^='dracula'] {
   --color-foreground: #bd93f9;
   --color-background: #282a36;
   --color-background-soft: #44475a;
diff --git a/src/components/Prefs.vue b/src/components/Prefs.vue
index b53ba64..80c6efd 100644
--- a/src/components/Prefs.vue
+++ b/src/components/Prefs.vue
@@ -131,10 +131,13 @@ onMounted(() => {
     <option value="dark">{{ t('pref.dark') }}</option>
     <option value="light">{{ t('pref.light') }}</option>
     <option value="black">{{ t('pref.black') }}</option>
-    <option value="blur">{{ t('pref.blur') }}</option>
-    <option value="light blur">{{ t('pref.blur_light') }}</option>
     <option value="dracula">{{ t('pref.dracula') }}</option>
     <option value="nord">{{ t('pref.nord') }}</option>
+    <option value="dark blur">{{ t('pref.blur') }}</option>
+    <option value="light blur">{{ t('pref.blur_light') }}</option>
+    <option value="black blur">{{ t('pref.blur_black') }}</option>
+    <option value="dracula blur">{{ t('pref.blur_dracula') }}</option>
+    <option value="nord blur">{{ t('pref.blur_nord') }}</option>
   </select>
 
   <div class="left">
diff --git a/src/locales/en.json b/src/locales/en.json
index 8a1ff0e..84bf17e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -48,10 +48,13 @@
     "dark": "Dark (Default)",
     "light": "Light",
     "black": "Black",
-    "blur": "Blur",
-    "blur_light": "Blur (Light)",
+    "blur_black": "Black (Blur)",
+    "blur": "Dark (Blur)",
+    "blur_light": "Light (Blur)",
     "dracula": "Dracula",
+    "blur_dracula": "Dracula (Blur)",
     "nord": "Nord",
+    "blur_nord": "Nord (Blur)",
     "compact": "Compact View",
     "prm": "Prefers Reduced Motion",
     "language": "Language",