feat: lightmode for haters

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

Hide file tree

Showing 7 changed files with 20 additions and 11 deletions.
diff --git a/public/img/CloseWindow.png b/public/img/CloseWindow.png
diff --git a/public/theme.css b/public/theme.css
@@ -49,14 +49,21 @@
 
 [data-theme="light"] {
 	--font-color: rgb(14, 14, 14);
-	--background: #ffffff;
+	/* --background: #ffffff;
 	--background-hover: #e5f7e8;
 	--foreground: #cfecd2;
 	--foreground-hover: #b3d8b6;
 	--foreground-light: #8de095;
-	--foreground-light-hover: #67db72;
+	--foreground-light-hover: #67db72; */
 
 	--shadow: #868383;
+
+	--background: #F1FDF3;
+	--background-hover: #E5F4E7;
+	--foreground: #D1E9D2;
+	--foreground-hover: #b7ebb9;
+	--foreground-light: #abe9be;
+	--foreground-light-hover: #a0e9b6;
 }
 
 .splitpanes {

diff --git a/src/components/Titlebar.svelte b/src/components/Titlebar.svelte
@@ -51,7 +51,7 @@
   <div class="btns">
     <div bind:this={minimize} class="titlebar-button" id="titlebar-minimize">
       <svg width="10" height="2" viewBox="0 0 11 2">
-        <path d="m11 0v1h-11v-1z" stroke-width="0.25" style="fill: white;" />
+        <path d="m11 0v1h-11v-1z" stroke-width="0.25" style="fill: var(--font-color);" />
       </svg>
     </div>
     <div bind:this={maximize} class="titlebar-button" id="titlebar-maximize">
@@ -60,20 +60,22 @@
           <path
             d="m11 8.7978h -2.2021v 2.2022h -8.7979v -8.7978h 2.2021v -2.2022h 8.7979z m-3.2979 -5.5h -6.6012v 6.6011h 6.6012z m2.1968 -2.1968h -6.6012v 1.1011h 5.5v 5.5h 1.1011z"
             stroke-width=".275"
-            style="fill: white;" />
+            style="fill: var(--font-color);" />
         </svg>
       {:else}
         <svg width="10" height="10" viewBox="0 0 10 10">
           <path
             d="m10-1.667e-6v10h-10v-10zm-1.001 1.001h-7.998v7.998h7.998z"
             stroke-width=".25"
-            style="fill: white;" />
+            style="fill: var(--font-color);" />
         </svg>
       {/if}
     </div>
     <div bind:this={close} class="titlebar-button" id="titlebar-close">
       <!-- svelte-ignore a11y-missing-attribute -->
-      <img src="/img/CloseWindow.png" height="20" />
+      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+        <path fill="none" stroke="var(--font-color)" stroke-width="2" d="M3,3 L21,21 M3,21 L21,3" />
+      </svg>
     </div>
   </div>
 </div>

diff --git a/src/components/core/filters/Options.svelte b/src/components/core/filters/Options.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Pane } from "svelte-splitpanes";
-  import { gridType, dbFilters } from "../../../Stores";
+  import { gridType, dbFilters, theme } from "../../../Stores";
   import Toggle from "../../interactables/Toggle.svelte";
   import Accordion from "../../layout/Accordion.svelte";
   import VerticalSpacer from "../../spacers/VerticalSpacer.svelte";
@@ -49,7 +49,7 @@
 
   <div class="content" style="height: 36px;">
     <div style="margin-left: 6px; display: flex; justify-content: space-between;">
-      <Toggle label="Dark Mode" onChange={onDarkModeChange}/>
+      <Toggle label="Dark Mode" checked={$theme == 0} onChange={onDarkModeChange}/>
     </div>
 
     <div class="border" />

diff --git a/src/components/core/games/Games.svelte b/src/components/core/games/Games.svelte
@@ -187,7 +187,7 @@
   .message {
     width: 100%;
     text-align: center;
-    opacity: 0.1;
+    opacity: 0.5;
     padding-top: 40px;
   }
 

diff --git a/src/components/core/grids/Grids.svelte b/src/components/core/grids/Grids.svelte
@@ -282,7 +282,7 @@
   .message {
     width: 100%;
     text-align: center;
-    opacity: 0.1;
+    opacity: 0.5;
     padding-top: 40px;
   }
 

diff --git a/src/windows/main/Main.svelte b/src/windows/main/Main.svelte
@@ -25,7 +25,7 @@
 
 	onMount(async () => {
     mainFocusUnsub = await WindowController.mainWindow.onFocusChanged(({ payload: focused }) => {
-      isFocused = focused;
+      isFocused = true; //focused;
     });
 		activeUserIdUnsub = activeUserId.subscribe((id) => {
 			selectedUser = Object.values($steamUsers).find((user) => user.id32 == id.toString())?.PersonaName