diff --git a/README.md b/README.md index 28e1be9..edebc12 100644 --- a/README.md +++ b/README.md @@ -167,10 +167,10 @@ This is our current roadmap goals. You can find older ones [here](ROADMAP.md) * Tooltips for some options * Debugger * Splash screen +* Theming system * 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 diff --git a/neutralino.config.json b/neutralino.config.json index a590ce1..4b43044 100644 --- a/neutralino.config.json +++ b/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, diff --git a/src/assets/gifs/loading-that-marie-disallow-to-use.gif b/src/assets/gifs/loading-marie-please.gif similarity index 100% rename from src/assets/gifs/loading-that-marie-disallow-to-use.gif rename to src/assets/gifs/loading-marie-please.gif diff --git a/src/assets/gifs/running-qiqi.gif b/src/assets/gifs/running-qiqi.gif new file mode 100644 index 0000000..8f07168 Binary files /dev/null and b/src/assets/gifs/running-qiqi.gif differ diff --git a/src/sass/splash.sass b/src/sass/splash.sass index 9db3a31..63ecb42 100644 --- a/src/sass/splash.sass +++ b/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 diff --git a/src/settings.svelte b/src/settings.svelte index fc774dd..3467e33 100644 --- a/src/settings.svelte +++ b/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} /> diff --git a/src/splash.svelte b/src/splash.svelte index 873234f..d0db6ce 100644 --- a/src/splash.svelte +++ b/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); + }); {#if typeof $locale === 'string'} - + {$_('splash.title')} {$_(`splash.phrases.${phrase}`)}
{$_(`splash.phrases.${phrase}`)}