make darkmode dependent on system color scheme

This commit is contained in:
HorizonCode 2024-01-10 14:50:58 +01:00
parent bbc3d7ed67
commit 1f1dc65a97
4 changed files with 25 additions and 21 deletions

View File

@ -23,6 +23,7 @@
let patch = true;
let loading = false;
let currentStatus = "Preparing launch...";
let rand = 0;
</script>
@ -34,7 +35,6 @@
>
</div>
<div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
<DarkMode class="dark:border-gray-700"></DarkMode>
<Avatar
class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
src={loggedIn ? "https://a.ez-pp.farm/1001" : "https://a.ez-pp.farm/0"}
@ -102,6 +102,7 @@
<Button
color="light"
size="xl"
class="active:!bg-gray-900"
on:click={() => {
rand = Math.random() * 100;
loading = true;
@ -112,7 +113,7 @@
</Checkbox>
{#if loading}
<div class="w-full flex flex-col justify-center items-center gap-2">
<p class="m-0 p-0 dark:text-gray-100">Waiting...</p>
<p class="m-0 p-0 dark:text-gray-100">{currentStatus}</p>
<Progressbar
animate={true}
progress={rand}

View File

@ -12,19 +12,10 @@ html .cet-titlebar {
color: #202020 !important;
}
html.dark .cet-titlebar {
background-color: #202020 !important;
color: #ececec !important;
}
html .cet-titlebar .cet-control-icon svg {
fill: #000;
}
html.dark .cet-titlebar .cet-control-icon svg {
fill: #fff;
}
.cet-titlebar .cet-icon {
display: none;
}
@ -42,7 +33,8 @@ html.dark .cet-titlebar .cet-control-icon svg {
animation: progress-loading 5s ease-in-out infinite;
}
html.dark .indeterminate {
@media (prefers-color-scheme: dark) {
.indeterminate {
background-image: repeating-linear-gradient(
90deg,
rgb(217 5 89) -1%,
@ -51,6 +43,17 @@ html.dark .indeterminate {
#535353 90%
);
}
html .cet-titlebar .cet-control-icon svg {
fill: #fff;
}
html .cet-titlebar {
background-color: #202020 !important;
color: #ececec !important;
}
}
@keyframes progress-loading {
50% {
background-position-x: -115%;

View File

@ -4,7 +4,7 @@ const config = {
"./src/**/*.{html,js,svelte,ts}",
"./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
],
darkMode: "class",
darkMode: "media",
theme: {
extend: {
colors: {

View File

@ -1,5 +1,5 @@
{
"extends": "@tsconfig/svelte/tsconfig.json",
"extends": "./node_modules/@tsconfig/svelte/tsconfig.json",
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],