LobotomyLabs/classquiz-ai
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Added dark-mode

Browse Source
This commit is contained in:
Mawoka
2022-05-04 21:30:39 +02:00
parent 916c0c6f69
commit 691132cc7d
19 changed files with 166 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/__layout.svelte
+26 -1
View File
@@ -20,6 +20,24 @@
if (browser) {
pathname.set(window.location.pathname);
if (
localStorage.theme === 'dark' ||
(!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// Whenever the user explicitly chooses light mode
// localStorage.theme = 'light';
//
// // Whenever the user explicitly chooses dark mode
// localStorage.theme = 'dark';
//
// // Whenever the user explicitly chooses to respect the OS preference
// localStorage.removeItem('theme');
}
initLocalizationContext();
@@ -48,9 +66,10 @@
{/if}
<style lang="scss">
:global(body) {
:global(html:not(.dark)) {
// height: 100%;
// width: 100%;
background: linear-gradient(to right, #009444, #39b54a, #8dc63f) repeat-y;
background-size: cover;
/*background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%); */
@@ -62,6 +81,12 @@
//animation: background_animation 5s ease infinite;
}
:global(html.dark) {
background-color: #0f2702;
background-size: cover;
color: white;
}
@keyframes background_animation {
0% {
background-position: 0% 50%;
frontend/src/routes/create.svelte
+1 -1
View File
@@ -32,7 +32,7 @@
import Editor from '$lib/editor.svelte';
import { getLocalization } from '$lib/i18n';
import { navbarVisible } from '$lib/stores';
import { dataSchema } from '$lib/jupSchemas';
import { dataSchema } from '$lib/yupSchemas';
navbarVisible.set(true);
frontend/src/routes/docs/attribution.svelte
+1 -1
View File
@@ -3,7 +3,7 @@
<meta name="description" content="People who helped make with ClassQuiz." />
</svelte:head>
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4"
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>People</h1>
<h2>Contributors</h2>
frontend/src/routes/docs/develop.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
/>
</svelte:head>
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate text-yellow-50 px-4"
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Development-setup</h1>
frontend/src/routes/docs/import-from-kahoot.svelte
+3 -1
View File
@@ -5,7 +5,9 @@
content="How to import quizzes from KAHOOT! into ClassQuiz, the open-source quiz-application, easily"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Import Quizzes from Kahoot into ClassQuiz</h1>
<p>
frontend/src/routes/docs/index.svelte
+3 -1
View File
@@ -5,7 +5,9 @@
content="The overview about the docs for ClassQuiz, the open-source quiz-application"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Welcome to the ClassQuiz docs!</h1>
<h2>Index</h2>
<ul>
frontend/src/routes/docs/privacy-policy.svelte
+3 -1
View File
@@ -16,7 +16,9 @@
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-gray px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Privacy Policy</h1>
<h2>What gets stored for how long and why</h2>
frontend/src/routes/docs/roadmap.svelte
+3 -1
View File
@@ -5,7 +5,9 @@
content="The roadmap for ClassQuiz, the open-source quiz-application"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Roadmap</h1>
<ul>
frontend/src/routes/docs/self-host.svelte
+3 -1
View File
@@ -15,7 +15,9 @@
content="How to self-host ClassQuiz, the open-source quiz-application"
/>
</svelte:head>
<article class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-gray px-4">
<article
class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
>
<h1>Self-Hosting</h1>
<p>Since ClassQuiz is open-source, it can also be self-hosted.</p>
frontend/src/routes/edit.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
import Editor from '$lib/editor.svelte';
import { getLocalization } from '$lib/i18n';
import { navbarVisible } from '$lib/stores';
import { dataSchema } from '$lib/jupSchemas';
import { dataSchema } from '$lib/yupSchemas';
navbarVisible.set(true);
frontend/src/routes/explore.svelte
+7 -3
View File
@@ -47,14 +47,18 @@
{#each quizzes.hits as quiz}
<div class="flex justify-center">
<a href="/view/{quiz.id}" class="h-max w-fit">
<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
<div
class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20 dark:bg-slate-800"
>
<!-- <div class='flex justify-center md:justify-end -mt-16'>
<img class='w-20 h-20 object-cover rounded-full border-2 border-indigo-500'
src='https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80'>
</div>-->
<div>
<h2 class="text-gray-800 text-3xl font-semibold">{quiz.title}</h2>
<p class="mt-2 text-gray-600">{quiz.description}</p>
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">
{quiz.title}
</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">{quiz.description}</p>
</div>
<div class="flex mt-4">
<span>{$t('explore_page.made_by')} {quiz.user}</span>
frontend/src/routes/view/[quiz_id].svelte
+1 -1
View File
@@ -125,7 +125,7 @@
<h1 class="text-3xl m-1">{$t('words.question')} {index_question + 1}</h1>
<!-- <label class='m-1 flex flex-row gap-2 w-3/5'>-->
<p class="text-black w-full bg-inherit">
<p class="text-black w-full bg-inherit text-black dark:text-gray-200">
{$t('words.question')}: {question.question}
</p>
<!-- </label>-->