Several changes

- added theme switching
- added dark theme support for the splash window

README.md

@@ -167,10 +167,10 @@ This is our current roadmap goals. You can find older ones [here](ROADMAP.md)
 * <s>Tooltips for some options</s>
 * <s>Debugger</s>
 * <s>Splash screen</s>
+* <s>Theming system</s>
 * Game pre-installation
 * Launcher auto-updates
 * Statistics window
-* Theming system
 * Chengelog window
 * Default runner auto-installation
 * Ability to change the temp directory where the launcher should download some files

neutralino.config.json

@@ -22,7 +22,7 @@
       "fullScreen": false,
       "alwaysOnTop": false,
       "icon": "/public/icons/64x64.png",
-      "enableInspector": true,
+      "enableInspector": false,
       "borderless": false,
       "maximize": false,
       "hidden": true,

src/sass/splash.sass

@@ -4,16 +4,20 @@
 
 @mixin themable($theme-name, $theme-map)
     body[data-theme=#{$theme-name}]
+        background-color: map.get($theme-map, "background")
+
         div
             width: 60%
             margin: 56px auto 0 auto
 
-            video
+            img
                 width: 100%
+                image-rendering: optimizeQuality
 
             h2, p
                 margin: 0
                 text-align: center
+                color: map.get($theme-map, "text")
 
             p
                 color: grey

src/settings.svelte

@@ -2,6 +2,8 @@
     import { onMount } from 'svelte';
     import { _, locale, locales } from 'svelte-i18n';
 
+    import Configs from './ts/Configs';
+
     import Checkbox from './components/Checkbox.svelte';
     import SelectionBox from './components/SelectionBox.svelte';
     import DXVKSelectionList from './components/DXVKSelectionList.svelte';
@@ -92,13 +94,18 @@
         selectedItem = visibleElement.getAttribute('id');
     };
 
+    const switchTheme = (theme: string) => {
+        if (theme === 'system')
+            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+        document.body.setAttribute('data-theme', theme as string);
+    };
+
     let dxvkRecommendable = true,
         runnersRecommendable = true;
 
     // Auto theme switcher
-    // TODO: an option to disable it
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches)
-        document.body.setAttribute('data-theme', 'dark');
+    Configs.get('theme').then((theme) => switchTheme(theme as string));
 
     // Do some stuff when all the content will be loaded
     onMount(() => {
@@ -136,6 +143,7 @@
                     lang="settings.general.items.theme.title"
                     prop="theme"
                     items={themes}
+                    valueChanged={switchTheme}
                 />
 
                 <Checkbox lang="settings.general.items.discord" prop="discord.enabled" />

src/splash.svelte

@@ -2,9 +2,14 @@
     import { onMount } from 'svelte';
     import { _, locale } from 'svelte-i18n';
 
+    import Configs from './ts/Configs';
+
     import Window from './ts/neutralino/Window';
 
-    import Splash from './assets/webms/loading.webm';
+    import Splash from './assets/gifs/running-qiqi.gif';
+    import SplashSecret from './assets/gifs/loading-marie-please.gif';
+
+    const splash = Math.round(Math.random() * 100) < 100 ? Splash : SplashSecret;
 
     let phrase = Math.round(Math.random() * 2);
 
@@ -37,14 +42,17 @@
     });
 
     // Auto theme switcher
-    // TODO: an option to disable it
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches)
-        document.body.setAttribute('data-theme', 'dark');
+    Configs.get('theme').then((theme) => {
+        if (theme === 'system')
+            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+        document.body.setAttribute('data-theme', theme as string);
+    });
 </script>
 
 {#if typeof $locale === 'string'}
     <main>
-        <video src={Splash} loop muted autoplay></video>
+        <img src={splash} alt="" />
 
         <h2>{$_('splash.title')}</h2>
         <p>{$_(`splash.phrases.${phrase}`)}</p>