Added a Nordic base theme (#4542)

* Added a Nordic base theme

* Added Nordic icon

* Added Nordic theme to switch

* Update src/renderer/themes.css

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>

---------

Co-authored-by: Jason <84899178+jasonhenriquez@users.noreply.github.com>

src/main/index.js

@@ -493,6 +493,8 @@ function runApp() {
           return '#ffd1dc'
         case 'hot-pink':
           return '#de1c85'
+        case 'nordic':
+          return '#2b2f3a'
         case 'system':
         default:
           return nativeTheme.shouldUseDarkColors ? '#212121' : '#f1f1f1'

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')
       ]
     },
 

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);
 
@@ -56,7 +60,8 @@
 .gray,
 .dracula,
 .catppuccinMocha,
-.hotPink {
+.hotPink,
+.nordic {
   --primary-shadow-color: rgba(0, 0, 0, 0.75);
 }
 
@@ -237,6 +242,25 @@ 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: #FFEA00;
+  --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;
+  --logo-icon: url("../../_icons/iconNordicLightSmall.png");
+  --logo-text: url("../../_icons/textNordicLightSmall.png");
+}
+
 .mainRed,
 .mainPink,
 .mainPurple,

static/locales/en-US.yaml

@@ -296,6 +296,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