Added a Nordic base theme

FreeTubeApp · Jan 13, 2024 · 396370b · 396370b
1 parent 40ff63a
commit 396370b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/src/renderer/components/theme-settings/theme-settings.js b/src/renderer/components/theme-settings/theme-settings.js
@@ -37,7 +37,8 @@ export default defineComponent({
         'dracula',
         'catppuccinMocha',
         'pastelPink',
-        'hotPink'
+        'hotPink',
+        'nordic'
       ]
     }
   },
@@ -102,7 +103,8 @@ export default defineComponent({
         this.$t('Settings.Theme Settings.Base Theme.Dracula'),
         this.$t('Settings.Theme Settings.Base Theme.Catppuccin Mocha'),
         this.$t('Settings.Theme Settings.Base Theme.Pastel Pink'),
-        this.$t('Settings.Theme Settings.Base Theme.Hot Pink')
+        this.$t('Settings.Theme Settings.Base Theme.Hot Pink'),
+        this.$t('Settings.Theme Settings.Base Theme.Nordic')
       ]
     },
 

diff --git a/src/renderer/themes.css b/src/renderer/themes.css
@@ -5,7 +5,8 @@
 .dracula,
 .catppuccinMocha,
 .pastelPink,
-.hotPink {
+.hotPink,
+.nordic {
   --primary-input-color: rgba(0, 0, 0, 0.50);
 }
 
@@ -15,7 +16,8 @@
 .dracula,
 .catppuccinMocha,
 .pastelPink,
-.hotPink {
+.hotPink,
+.nordic {
   --link-color: var(--accent-color);
   --link-visited-color: var(--accent-color-visited);
   --instance-menu-color: var(--search-bar-color);
@@ -27,7 +29,8 @@
 .gray,
 .dracula,
 .catppuccinMocha,
-.pastelPink {
+.pastelPink,
+.nordic {
   --primary-input-color: rgba(0, 0, 0, 0.50);
   --side-nav-hover-text-color: var(--primary-text-color);
 }
@@ -37,7 +40,8 @@
 .black,
 .gray,
 .dracula,
-.catppuccinMocha {
+.catppuccinMocha,
+.nordic {
   --side-nav-active-text-color: var(--primary-text-color);
   --scrollbar-text-color-hover: var(--primary-text-color);
 
@@ -46,7 +50,8 @@
 .system[data-system-theme*='light'], .light,
 .system[data-system-theme*='dark'], .dark,
 .black,
-.gray {
+.gray,
+.nordic {
   --logo-icon: url("../../_icons/iconColorSmall.png");
   --logo-text: url("../../_icons/textColorSmall.png");
 }
@@ -56,7 +61,8 @@
 .gray,
 .dracula,
 .catppuccinMocha,
-.hotPink {
+.hotPink,
+.nordic {
   --primary-shadow-color: rgba(0, 0, 0, 0.75);
 }
 
@@ -237,6 +243,23 @@ it can be safely elided. This looks quite pleasant on this theme. */
   text-decoration: underline;
 }
 
+.nordic {
+  --primary-text-color: #EEEEEE;
+  --secondary-text-color: #ddd;
+  --tertiary-text-color: #EEEEEE;
+  --title-color: #EEEEEE;
+  --bg-color: #2b2f3a;
+  --favorite-icon-color: #85a4c1;
+  --card-bg-color: #2e3440;
+  --secondary-card-bg-color: rgba(59, 66, 82, 0.75);
+  --scrollbar-color: #4b566a;
+  --scrollbar-color-hover: #4b566a;
+  --side-nav-color: #2e3440;
+  --side-nav-hover-color: #3b4252;
+  --side-nav-active-color: #3b4252;
+  --search-bar-color: #4b566a;
+}
+
 .mainRed,
 .mainPink,
 .mainPurple,

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -284,6 +284,7 @@ Settings:
       Catppuccin Mocha: Catppuccin Mocha
       Pastel Pink: Pastel Pink
       Hot Pink: Hot Pink
+      Nordic: Nordic
     Main Color Theme:
       Main Color Theme: Main Color Theme
       Red: Red