[UI] Add Nord Light and Dark theme (#1941)

* Add Nord Light theme * Make secondary text more readable * Add indicator colors * Add Nord Dark theme * Add new themes to menu * Change Nord Light background & input box color * Correct linting * Swap inactive and active icon colours * Dim action icon colour for Nord Dark
Heroic-Games-Launcher · Nov 1, 2022 · 54ac7cc · 54ac7cc
1 parent 9150d61
commit 54ac7cc
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 4 deletions.
diff --git a/src/frontend/components/UI/ThemeSelector/index.tsx b/src/frontend/components/UI/ThemeSelector/index.tsx
@@ -22,7 +22,9 @@ export const defaultThemes = {
   marine: 'Marine',
   'marine-classic': 'Marine Classic',
   zombie: 'Zombie',
-  'zombie-classic': 'Zombie Classic'
+  'zombie-classic': 'Zombie Classic',
+  'nord-light': 'Nord Light',
+  'nord-dark': 'Nord Dark'
 }
 
 export const ThemeSelector = () => {

diff --git a/src/frontend/screens/Library/components/GameCard/index.css b/src/frontend/screens/Library/components/GameCard/index.css
@@ -93,7 +93,7 @@
   font-size: var(--text-md);
   font-weight: var(--bold);
   line-height: 17px;
-  color: var(--text-default);
+  color: var(--text-gametitle);
   cursor: pointer;
   z-index: 3;
   pointer-events: none;

diff --git a/src/frontend/screens/Settings/components/LogSettings/index.css b/src/frontend/screens/Settings/components/LogSettings/index.css
@@ -50,7 +50,7 @@
 }
 
 .log-warning {
-  color: #f5cf69;
+  color: var(--text-log);
 }
 
 .log-info {
@@ -59,7 +59,7 @@
 
 .long-log-hint {
   font-style: italic;
-  color: #f5cf69;
+  color: var(--text-log);
 }
 
 .icon {

diff --git a/src/frontend/styles/_colors.scss b/src/frontend/styles/_colors.scss
@@ -78,6 +78,8 @@
   --text-tertiary: #101111; /* This is not defined in figma */
   --text-quartenary: #5a5e5f; /* this is meant to be a background colour */
   --text-danger: #d22121;
+  --text-gametitle: var(--text-default);
+  --text-log: #f5cf69;
 
   /*Action Icons*/
   --action-icon: var(--text-default);

diff --git a/src/frontend/themes.css b/src/frontend/themes.css
@@ -35,6 +35,78 @@ body.dracula-classic {
   --action-icon-active: var(--accent);
 }
 
+body.nord-light {
+  --accent: #88c0d0;
+  --accent-overlay: #81a1c1;
+  --navbar-accent: #81a1c1;
+  --background: #eceff4;
+  --body-background: var(--background);
+  --background-darker: var(--body-background);
+  --current-background: var(--body-background);
+  --navbar-background: #4c566a;
+  --navbar-active-background: #2e3440;
+  --gradient-body-background: linear-gradient(
+    90deg,
+    var(--background-darker) -32px,
+    var(--body-background) 64px,
+    var(--body-background) 100%
+  );
+  --input-background: #d8dee9;
+  --modal-background: var(--body-background);
+  --modal-border: var(--body-background);
+  --success: #a3be8c;
+  --success-hover: #8faf74;
+  --primary: #b48ead;
+  --primary-hover: #a17399;
+  --danger: #bf616a;
+  --text-log: #f7b32a;
+  --text-title: #2e3440;
+  --text-default: var(--text-title);
+  --text-secondary: #868b95;
+  --osk-background: var(--body-background);
+  --osk-button-background: var(--input-background);
+  --osk-button-border: var(--navbar-background);
+  --action-icon: #748aa0;
+  --action-icon-hover: var(--accent);
+  --action-icon-active: var(--text-default);
+}
+
+body.nord-dark {
+  --accent: #88c0d0;
+  --accent-overlay: #bdeaf7;
+  --navbar-accent: #5d6a82;
+  --background: #191c22;
+  --body-background: var(--background);
+  --background-darker: var(--body-background);
+  --current-background: var(--body-background);
+  --navbar-background: #2e3440;
+  --navbar-active-background: #191c22;
+  --gradient-body-background: linear-gradient(
+    90deg,
+    var(--background-darker) -32px,
+    var(--body-background) 64px,
+    var(--body-background) 100%
+  );
+  --input-background: #2e3440;
+  --modal-background: var(--body-background);
+  --modal-border: var(--body-background);
+  --success: #94f1ab;
+  --success-hover: #75e08f;
+  --primary: #b48ead;
+  --primary-hover: #a17399;
+  --danger: #bf616a;
+  --text-log: #f7b32a;
+  --text-title: #e5e9f0;
+  --text-default: var(--text-title);
+  --text-secondary: #e5e9f0;
+  --osk-background: var(--body-background);
+  --osk-button-background: var(--input-background);
+  --osk-button-border: var(--navbar-background);
+  --action-icon: #748aa0;
+  --action-icon-hover: var(--accent-overlay);
+  --action-icon-active: var(--text-default);
+}
+
 body.marine,
 body.marine-classic {
   --background: #042028;