diff --git a/frontend/src/lib/navbar.svelte b/frontend/src/lib/navbar.svelte index c5b1e04..6320471 100644 --- a/frontend/src/lib/navbar.svelte +++ b/frontend/src/lib/navbar.svelte @@ -5,6 +5,7 @@ import { createTippy } from 'svelte-tippy'; import 'tippy.js/animations/perspective-subtle.css'; import 'tippy.js/dist/tippy.css'; + import { browser } from '$app/env'; const tippy = createTippy({ arrow: true, @@ -22,6 +23,13 @@ closeMenu = !closeMenu; menuItems = !menuItems; }; + let darkMode = false; + if (browser) { + darkMode = + localStorage.theme === 'dark' || + (!('theme' in localStorage) && + window.matchMedia('(prefers-color-scheme: dark)').matches); + } const switchDarkMode = (on: boolean): void => { if (on) { @@ -34,7 +42,7 @@ diff --git a/frontend/src/routes/index.svelte b/frontend/src/routes/index.svelte index 2b89e41..84a12db 100644 --- a/frontend/src/routes/index.svelte +++ b/frontend/src/routes/index.svelte @@ -63,27 +63,23 @@
-
+

ClassQuiz

{$t('index_page.slogan')}

-
-
-

{$t('words.stats')}

+
+
+

{$t('words.features')}

- {#await getStats() then stats} - {$t('index_page.stats', { - user_count: stats.user_count, - quiz_count: stats.quiz_count - })} - {/await} + {$t('index_page.features_description.1')} +
+ {$t('index_page.features_description.2')}

-

{$t('words.screenshot', { count: 2 })}

@@ -97,13 +93,17 @@ {/await}
-
-
-

{$t('words.features')}

+ +
+
+

{$t('words.stats')}

- {$t('index_page.features_description.1')} -
- {$t('index_page.features_description.2')} + {#await getStats() then stats} + {$t('index_page.stats', { + user_count: stats.user_count, + quiz_count: stats.quiz_count + })} + {/await}