Alex/GoMembership
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

add: light theme

Browse Source
This commit is contained in:
Alex
2025-02-18 11:31:01 +01:00
parent 743493517b
commit f1fe64855d
2 changed files with 248 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
frontend/src/lib/components/Header.svelte
View File

@@ -1,68 +1,81 @@
<script> <script>
import { onMount } from "svelte"; import { onMount } from 'svelte';
import { applyAction, enhance } from "$app/forms"; import { applyAction, enhance } from '$app/forms';
import { page } from "$app/stores"; import { page } from '$app/stores';
// import Developer from "$lib/img/hero-image.png"; // import Developer from "$lib/img/hero-image.png";
// import Avatar from "$lib/img/TeamAvatar.jpeg"; // import Avatar from "$lib/img/TeamAvatar.jpeg";
import { t } from "svelte-i18n"; import { t } from 'svelte-i18n';
onMount(() => { import { writable } from 'svelte/store';
console.log("Page data in Header:", $page); onMount(() => {
}); console.log('Page data in Header:', $page);
document.documentElement.setAttribute('data-theme', $theme);
});
$: { $: {
console.log("Page data updated:", $page); console.log('Page data updated:', $page);
} }
// Create a theme store
const theme = writable(
typeof window !== 'undefined' ? localStorage.getItem('theme') || 'dark' : 'dark'
);
// Update theme and localStorage when changed
function toggleTheme() {
theme.update((current) => {
const newTheme = current === 'dark' ? 'bright' : 'dark';
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
return newTheme;
});
}
</script> </script>
<header class="header"> <header class="header">
<div class="header-container"> <div class="header-container">
<div class="header-left"> <div class="header-left">
<div class="header-crafted-by-container"> <div class="header-crafted-by-container">
<!-- <a href="https://tiny-bits.net/"> <!-- <a href="https://tiny-bits.net/">
<span>Developed by</span><img <span>Developed by</span><img
src={Developer} src={Developer}
alt="Alexander Stölting" alt="Alexander Stölting"
/> --> /> -->
<!-- </a> --> <!-- </a> -->
</div> </div>
</div> </div>
<div class="header-right"> <div class="header-right">
<div class="header-nav-item" class:active={$page.url.pathname === "/"}> <div class="header-nav-item" class:active={$page.url.pathname === '/'}>
<a href="/">home</a> <a href="/">home</a>
</div> </div>
{#if !$page.data.user} {#if !$page.data.user}
<div <div class="header-nav-item" class:active={$page.url.pathname === '/auth/login'}>
class="header-nav-item" <a href="/auth/login">login</a>
class:active={$page.url.pathname === "/auth/login"} </div>
> <!-- <div
<a href="/auth/login">login</a>
</div>
<!-- <div
class="header-nav-item" class="header-nav-item"
class:active={$page.url.pathname === "/auth/register"} class:active={$page.url.pathname === "/auth/register"}
> >
<a href="/auth/register">register</a> <a href="/auth/register">register</a>
</div> --> </div> -->
{:else} {:else}
<div class="header-nav-item"> <div class="header-nav-item">
<a href="/auth/about/{$page.data.user.id}"> <a href="/auth/about/{$page.data.user.id}">
<!-- <img <!-- <img
src={$page.data.user.profile_picture ? $page.data.user.profile_picture : Avatar} src={$page.data.user.profile_picture ? $page.data.user.profile_picture : Avatar}
alt={`${$page.data.user.first_name} ${$page.data.user.last_name}`} alt={`${$page.data.user.first_name} ${$page.data.user.last_name}`}
/> --> /> -->
{$page.data.user.first_name} {$page.data.user.first_name}
{$page.data.user.last_name} {$page.data.user.last_name}
</a> </a>
</div> </div>
{#if $page.data.user.role_id > 0} {#if $page.data.user.role_id > 0}
<div <div
class="header-nav-item" class="header-nav-item"
class:active={$page.url.pathname.startsWith("/auth/admin/users")} class:active={$page.url.pathname.startsWith('/auth/admin/users')}
> >
<a href="/auth/admin/users">{$t("user.management")}</a> <a href="/auth/admin/users">{$t('user.management')}</a>
</div> </div>
{/if} {/if}
<!-- {#if $page.data.user.is_superuser} <!-- {#if $page.data.user.is_superuser}
<div <div
class="header-nav-item" class="header-nav-item"
class:active={$page.url.pathname.startsWith("/auth/admin")} class:active={$page.url.pathname.startsWith("/auth/admin")}
@@ -70,19 +83,109 @@
<a href="/auth/admin">admin</a> <a href="/auth/admin">admin</a>
</div> </div>
{/if} --> {/if} -->
<form <form
class="header-nav-item" class="header-nav-item"
action="/auth/logout" action="/auth/logout"
method="POST" method="POST"
use:enhance={async () => { use:enhance={async () => {
return async ({ result }) => { return async ({ result }) => {
await applyAction(result); await applyAction(result);
}; };
}} }}
> >
<button type="submit">logout</button> <button type="submit">logout</button>
</form> </form>
{/if} {/if}
</div> <div class="theme-toggle">
</div> <label class="switch">
<input type="checkbox" checked={$theme === 'bright'} on:change={toggleTheme} />
<span class="slider">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</span>
</label>
</div>
</div>
</div>
</header> </header>
<style>
.theme-toggle {
display: flex;
align-items: center;
margin-left: 20px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--surface0);
transition: 0.4s;
border-radius: 30px;
padding: 4px;
}
.slider:before {
position: absolute;
content: '';
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: var(--text);
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--surface0);
}
input:checked + .slider:before {
transform: translateX(30px);
}
.fa-sun,
.fa-moon {
position: absolute;
font-size: 16px;
top: 7px;
color: var(--text);
transition: 0.4s;
}
.fa-sun {
left: 7px;
opacity: 0;
}
.fa-moon {
right: 7px;
opacity: 1;
}
input:checked + .slider .fa-sun {
opacity: 1;
}
input:checked + .slider .fa-moon {
opacity: 0;
}
</style>

99
frontend/src/lib/css/styles.min.css vendored
View File

@@ -1,4 +1,6 @@
:root { :root {
--white: #ffffff;
--black: #000000;
--rosewater: #f5e0dc; --rosewater: #f5e0dc;
--flamingo: #f2cdcd; --flamingo: #f2cdcd;
--pink: #f5c2e7; --pink: #f5c2e7;
@@ -26,6 +28,69 @@
--mantle: #181825; --mantle: #181825;
--crust: #11111b; --crust: #11111b;
--modal-backdrop: rgba(49, 50, 68, 0.45); /* For Mocha theme */ --modal-backdrop: rgba(49, 50, 68, 0.45); /* For Mocha theme */
/* Bright theme (Latte) colors */
--bright-white: #000000;
--bright-black: #ffffff;
--bright-rosewater: #dc8a78;
--bright-flamingo: #dd7878;
--bright-pink: #ea76cb;
--bright-mauve: #8839ef;
--bright-red: #d20f39;
--bright-maroon: #e64553;
--bright-peach: #fe640b;
--bright-yellow: #df8e1d;
--bright-green: #40a02b;
--bright-teal: #179299;
--bright-sky: #04a5e5;
--bright-sapphire: #209fb5;
--bright-blue: #1e66f5;
--bright-lavender: #7287fd;
--bright-text: #4c4f69;
--bright-subtext1: #5c5f77;
--bright-subtext0: #6c6f85;
--bright-overlay2: #7c7f93;
--bright-overlay1: #8c8fa1;
--bright-overlay0: #9ca0b0;
--bright-surface2: #acb0be;
--bright-surface1: #bcc0cc;
--bright-surface0: #ccd0da;
--bright-base: #eff1f5;
--bright-mantle: #e6e9ef;
--bright-crust: #dce0e8;
--bright-modal-backdrop: rgba(220, 224, 232, 0.45);
}
[data-theme='bright'] {
--white: var(--bright-white);
--black: var(--bright-black);
--rosewater: var(--bright-rosewater);
--flamingo: var(--bright-flamingo);
--pink: var(--bright-pink);
--mauve: var(--bright-mauve);
--red: var(--bright-red);
--maroon: var(--bright-maroon);
--peach: var(--bright-peach);
--yellow: var(--bright-yellow);
--green: var(--bright-green);
--teal: var(--bright-teal);
--sky: var(--bright-sky);
--sapphire: var(--bright-sapphire);
--blue: var(--bright-blue);
--lavender: var(--bright-lavender);
--text: var(--bright-text);
--subtext1: var(--bright-subtext1);
--subtext0: var(--bright-subtext0);
--overlay2: var(--bright-overlay2);
--overlay1: var(--bright-overlay1);
--overlay0: var(--bright-overlay0);
--surface2: var(--bright-surface2);
--surface1: var(--bright-surface1);
--surface0: var(--bright-surface0);
--base: var(--bright-base);
--mantle: var(--bright-mantle);
--crust: var(--bright-crust);
--modal-backdrop: var(--bright-modal-backdrop);
} }
@font-face { @font-face {
@@ -247,7 +312,7 @@ li strong {
transition: transition:
border-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
background-color 0.3s ease-in-out; background-color 0.3s ease-in-out;
color: white; color: var(--white);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
padding: 18px 28px; padding: 18px 28px;
@@ -264,7 +329,7 @@ li strong {
transition: transition:
border-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
background-color 0.3s ease-in-out; background-color 0.3s ease-in-out;
color: white; color: var(--white);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
padding: 18px 28px; padding: 18px 28px;
@@ -274,14 +339,14 @@ li strong {
border: 1px solid var(--mauve); border: 1px solid var(--mauve);
} }
.button-colorful:hover { .button-colorful:hover {
background-color: #c907ff; background-color: var(--bright-mauve);
border-color: #c907ff; border-color: var(--bright-mauve);
} }
.button-orange { .button-orange {
transition: transition:
border-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
background-color 0.3s ease-in-out; background-color 0.3s ease-in-out;
color: white; color: var(--white);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
padding: 18px 28px; padding: 18px 28px;
@@ -291,14 +356,14 @@ li strong {
border: 1px solid var(--peach); border: 1px solid var(--peach);
} }
.button-orange:hover { .button-orange:hover {
background-color: #ca3f12; background-color: var(--bright-peach);
border-color: #ca3f12; border-color: var(--bright-peach);
} }
.button-colorful:disabled { .button-colorful:disabled {
transition: transition:
border-color 0.3s ease-in-out, border-color 0.3s ease-in-out,
background-color 0.3s ease-in-out; background-color 0.3s ease-in-out;
color: white; color: var(--white);
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
padding: 18px 28px; padding: 18px 28px;
@@ -338,7 +403,7 @@ li strong {
.container { .container {
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
color: white; color: var(--white);
letter-spacing: 0; letter-spacing: 0;
opacity: 1; opacity: 1;
} }
@@ -348,7 +413,7 @@ li strong {
flex-grow: 1; flex-grow: 1;
} }
.container .content .step-title { .container .content .step-title {
color: #fff; color: var(--white);
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
line-height: 86px; line-height: 86px;
@@ -449,7 +514,7 @@ li strong {
.btn.primary { .btn.primary {
background-color: var(--blue); background-color: var(--blue);
border-color: var(--blue); border-color: var(--blue);
color: white; color: var(--white);
} }
.btn.primary:hover { .btn.primary:hover {
@@ -460,7 +525,7 @@ li strong {
.btn.danger { .btn.danger {
background-color: var(--red); background-color: var(--red);
border-color: var(--red); border-color: var(--red);
color: white; color: var(--white);
} }
.btn.danger:hover { .btn.danger:hover {
@@ -508,7 +573,7 @@ li strong {
} }
.footer-branding-container { .footer-branding-container {
color: white; color: var(--white);
font-weight: 300; font-weight: 300;
margin-bottom: 73px; margin-bottom: 73px;
} }
@@ -527,7 +592,7 @@ li strong {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 16px; margin-bottom: 16px;
color: white; color: var(--white);
} }
.footer-branding-container .footer-branding .footer-crafted-by-container span { .footer-branding-container .footer-branding .footer-crafted-by-container span {
display: inline-block; display: inline-block;
@@ -541,12 +606,12 @@ li strong {
} }
.footer-branding-container .footer-branding .footer-copyright { .footer-branding-container .footer-branding .footer-copyright {
color: #696969; color: var(--overlay0);
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.footer-container { .footer-container {
width: 100%; width: 100%;
color: white; color: var(--white);
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -575,7 +640,7 @@ li strong {
#000 1deg calc(360deg / var(--n) - var(--g) - 1deg), #000 1deg calc(360deg / var(--n) - var(--g) - 1deg),
#0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n)) #0000 calc(360deg / var(--n) - var(--g)) calc(360deg / var(--n))
), ),
radial-gradient(farthest-side, #0000 calc(98% - var(--b)), #000 calc(100% - var(--b))); radial-gradient(farthest-side, #0000 calc(98% - var(--b)), var(--black) calc(100% - var(--b)));
-webkit-mask: var(--_m); -webkit-mask: var(--_m);
mask: var(--_m); mask: var(--_m);
-webkit-mask-composite: destination-in; -webkit-mask-composite: destination-in;