chore: started on light theme

Tormak9970 · Apr 18, 2023 · 1de420f · 1de420f
1 parent 608b3c5
commit 1de420f
Show file tree

Hide file tree

Showing 11 changed files with 80 additions and 20 deletions.
diff --git a/public/theme.css b/public/theme.css
@@ -24,6 +24,8 @@
 	--foreground-light: #3d3d3d;
 	--foreground-light-hover: #474747;
 
+	--shadow: #0e0e0e;
+
 	--highlight: #04e200;
 	--highlight-hover: #05FF00;
 	--highlight-dim: #039900;
@@ -33,6 +35,9 @@
 
 	--selection-color: #3891ff7a;
 
+	--link-color: #00bbff;
+	--link-color-visited: #005eff;
+
 	--success: #36ff04;
 
 	--save: #14a101;
@@ -42,6 +47,18 @@
 	--toastContainerTop: 2.5rem;
 }
 
+[data-theme="light"] {
+	--font-color: rgb(14, 14, 14);
+	--background: #ffffff;
+	--background-hover: #e5f7e8;
+	--foreground: #cfecd2;
+	--foreground-hover: #b3d8b6;
+	--foreground-light: #8de095;
+	--foreground-light-hover: #67db72;
+
+	--shadow: #868383;
+}
+
 .splitpanes {
 	background-color: var(--background) !important;
 }
@@ -52,8 +69,8 @@
 
 .splitpanes__splitter {
 	background-color: var(--background-hover) !important;
-    border-left: 1px solid var(--foreground-light) !important;
-    border-right: 1px solid var(--foreground-light) !important;
+	border-left: 1px solid var(--foreground-light) !important;
+	border-right: 1px solid var(--foreground-light) !important;
 	position: relative;
 }
 .splitpanes__splitter:before {
@@ -92,7 +109,7 @@
   transition-property: transform, visibility, opacity;
 	border-radius: 2px;
 
-	box-shadow: 3px 6px 10px 4px #0e0e0e;
+	box-shadow: 3px 6px 10px 4px var(--shadow);
 }
 
 .tippy-arrow {

diff --git a/src-tauri/settings.json b/src-tauri/settings.json
@@ -1,5 +1,6 @@
 {
   "version": "",
+  "theme": 0,
   "steamGridDbApiKey": "",
   "steamApiKeyMap": {},
   "hiddenGameIds": []

diff --git a/src/Stores.ts b/src/Stores.ts
@@ -25,6 +25,13 @@ export enum Platforms {
   NON_STEAM="Non Steam"
 }
 
+export enum Theme {
+  DARK,
+  LIGHT
+}
+
+export const theme = sharedStore(Theme.DARK, "theme");
+
 export const needsSGDBAPIKey = sharedStore(true, "needsSGDBAPIKey");
 export const needsSteamKey = sharedStore(true, "needsSteamKey");
 

diff --git a/src/components/Titlebar.svelte b/src/components/Titlebar.svelte
@@ -3,8 +3,8 @@
   import { onMount } from "svelte";
   import { exit } from "@tauri-apps/api/process";
   import { WindowController } from "../lib/controllers/WindowController";
-    import { canSave } from "../Stores";
-    import { dialog } from "@tauri-apps/api";
+  import { canSave } from "../Stores";
+  import { dialog } from "@tauri-apps/api";
 
   export let title: string;
 

diff --git a/src/components/core/filters/Filters.svelte → src/components/core/filters/Options.svelte b/src/components/core/filters/Filters.svelte → src/components/core/filters/Options.svelte
@@ -5,6 +5,8 @@
   import Accordion from "../../layout/Accordion.svelte";
   import VerticalSpacer from "../../spacers/VerticalSpacer.svelte";
   import SectionTitle from "../SectionTitle.svelte";
+    import { SettingsManager } from "../../../lib/utils/SettingsManager";
+    import { LogController } from "../../../lib/controllers/LogController";
 
   /**
    * Creates a function to update the specified filter.
@@ -34,12 +36,27 @@
       return word.substring(0,1).toUpperCase().concat(word.substring(1));
     }
   }
+
+  function onDarkModeChange(checked: boolean): void {
+    document.documentElement.setAttribute("data-theme", checked ? "dark" : "light");
+    SettingsManager.updateSetting("theme", checked ? 0 : 1);
+    LogController.log(`Set theme to "${checked ? "dark" : "light"}".`);
+  }
 </script>
 
 <Pane minSize={15} size={20}>
-  <SectionTitle title="Filters" />
+  <SectionTitle title="Options" />
+
+  <div class="content" style="height: 36px;">
+    <div style="margin-left: 6px; display: flex; justify-content: space-between;">
+      <Toggle label="Dark Mode" onChange={onDarkModeChange}/>
+    </div>
+
+    <div class="border" />
+    <VerticalSpacer />
+  </div>
 
-  <div class="content">
+  <div class="content" style="height: calc(100% - 85px);">
     {#each Object.keys($dbFilters[$gridType]) as section}
       <Accordion
         label="{section == "oneoftag" ? "Tags" : toUpperCaseSplit(section)}"
@@ -64,7 +81,13 @@
 <style>
   .content {
     margin: 0px 6px;
+    padding: 0px 6px;
     overflow: auto;
-    max-height: calc(100% - 45px)
+    max-height: calc(100% - 65px)
+  }
+
+  .border {
+    margin-top: 10px;
+    border-bottom: 1px solid var(--foreground);
   }
 </style>
diff --git a/src/components/interactables/Button.svelte b/src/components/interactables/Button.svelte
@@ -31,7 +31,7 @@
     font-size: 12px;
     cursor: pointer;
 
-    color: rgb(231, 231, 231);
+    color: var(--font-color);
 
     transition: background-color 0.15s ease-in-out;
   }

diff --git a/src/lib/controllers/AppController.ts b/src/lib/controllers/AppController.ts
@@ -20,7 +20,7 @@ import { ToastController } from "./ToastController";
 import { SettingsManager } from "../utils/SettingsManager";
 import { LogController } from "./LogController";
 import { get } from "svelte/store";
-import { GridTypes, Platforms, activeUserId, appLibraryCache, canSave, currentPlatform, gridType, hiddenGameIds, isOnline, loadingGames, needsSGDBAPIKey, needsSteamKey, nonSteamGames, originalAppLibraryCache, originalSteamShortcuts, selectedGameAppId, selectedGameName, steamGames, steamGridDBKey, steamKey, steamShortcuts, steamUsers } from "../../Stores";
+import { GridTypes, Platforms, activeUserId, appLibraryCache, canSave, currentPlatform, gridType, hiddenGameIds, isOnline, loadingGames, needsSGDBAPIKey, needsSteamKey, nonSteamGames, originalAppLibraryCache, originalSteamShortcuts, selectedGameAppId, selectedGameName, steamGames, steamGridDBKey, steamKey, steamShortcuts, steamUsers, theme } from "../../Stores";
 import { CacheController } from "./CacheController";
 import { RustInterop } from "./RustInterop";
 import type { SGDBImage } from "../models/SGDB";
@@ -95,6 +95,9 @@ export class AppController {
       needsSteamKey.set(false);
     }
 
+    theme.set(settings.theme);
+    document.documentElement.setAttribute("data-theme", settings.theme == 0 ? "dark" : "light");
+
     hiddenGameIds.set(settings.hiddenGameIds);
 
     if (activeUser.id32 == "0") {

diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -1,5 +1,6 @@
 type AppSettings = {
   version: string;
+  theme: number;
   steamGridDbApiKey: string;
   steamApiKeyMap: {
     [userId32: string]: string

diff --git a/src/windows/globalStyles.css b/src/windows/globalStyles.css
@@ -1,3 +1,5 @@
+@import "/theme.css";
+
 @font-face {
   font-family: "Raleway-Num";
   src: url("/font/Raleway-Regular.ttf") format("truetype");
@@ -49,19 +51,19 @@ body {
   width: 100%;
   height: 100%;
 
-  background-color: #1a1a1a;
-  color: rgb(231, 231, 231);
+  background-color: var(--background);
+  color: var(--font-color);
   font-family: 'Raleway-Num', 'Raleway', sans-serif;
 
   overflow: hidden;
 }
 
 a {
-  color: #00bbff;
+  color: var(--link-color);
 }
 
 a:visited {
-  color: #005eff;
+  color: var(--link-color-visited);
 }
 
 ::-webkit-scrollbar {
@@ -74,12 +76,12 @@ a:visited {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #383838;
+  background: var(--foreground-light);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #039900;
+  background: var(--foreground-light-hover);
 }
 
 ::-webkit-scrollbar-corner {

diff --git a/src/windows/main/Main.svelte b/src/windows/main/Main.svelte
@@ -4,7 +4,7 @@
 	import Titlebar from "../../components/Titlebar.svelte";
 	import { Splitpanes } from 'svelte-splitpanes';
 	import Footer from "../../components/Footer.svelte";
-	import Filters from "../../components/core/filters/Filters.svelte";
+	import Options from "../../components/core/filters/Options.svelte";
 	import Games from "../../components/core/games/Games.svelte";
 	import Grids from "../../components/core/grids/Grids.svelte";
   import { AppController } from "../../lib/controllers/AppController";
@@ -69,8 +69,8 @@
   </Titlebar>
 	<div class="content">
 		<Splitpanes>
-			<Filters />
-			
+			<Options />
+
 			<Games />
 
 			<Grids />

diff --git a/src/windows/settings/Settings.svelte b/src/windows/settings/Settings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { open } from "@tauri-apps/api/shell"
   import { onDestroy, onMount } from "svelte";
-  import { activeUserId, needsSGDBAPIKey, needsSteamKey, steamGridDBKey, steamKey } from "../../Stores";
+  import { activeUserId, needsSGDBAPIKey, needsSteamKey, steamGridDBKey, steamKey, theme } from "../../Stores";
 	import Titlebar from "../../components/Titlebar.svelte";
   import Button from "../../components/interactables/Button.svelte";
   import HorizontalSpacer from "../../components/spacers/HorizontalSpacer.svelte";
@@ -10,8 +10,10 @@
   import { LogController } from "../../lib/controllers/LogController";
   import { SettingsManager } from "../../lib/utils/SettingsManager";
   import { WindowController } from "../../lib/controllers/WindowController";
+  import type { Unsubscriber } from "svelte/store";
 
   let settingsFocusUnsub: any;
+  let themeUnsub: Unsubscriber;
 
   let canSave = false;
   let isFocused = false;
@@ -85,12 +87,16 @@
     settingsFocusUnsub = await WindowController.settingsWindow.onFocusChanged(({ payload: focused }) => {
       isFocused = focused;
     });
+    themeUnsub = theme.subscribe((theme) => {
+      document.documentElement.setAttribute("data-theme", theme == 0 ? "dark" : "light");
+    });
 
     await SettingsManager.setSettingsPath();
   });
 
   onDestroy(() => {
     if (settingsFocusUnsub) settingsFocusUnsub();
+    if (themeUnsub) themeUnsub();
   });
 </script>