janishutz/libreevent
1
0
Fork 0
mirror of https://github.com/janishutz/libreevent.git synced 2025-11-25 13:24:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add dark mode on default start page

Browse Source
This commit is contained in:
janis
2023-08-31 13:51:05 +02:00
parent 6ea687fa47
commit 1ecfbacc89
4 changed files with 70 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/server/ui/home/active/en/index.html
View File

@@ -3,16 +3,20 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> -->
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="/supportFiles/style.css">
<link rel="stylesheet" href="/startPage/mainStyle">
<script defer src="/startPage/helperFunction"></script>
<title>libreevent</title>
</head>
<body>
<nav>
<a href="/">Home</a> |
<router-link to="/tickets">Tickets</router-link> |
<router-link to="/cart">Cart</router-link> |
<router-link to="/account">Account</router-link> |
<button @click="changeTheme();" v-html="theme" id="themeSelector"></button>
<a class="home">Home</a> |
<a href="/tickets">Tickets</a> |
<a href="/cart">Cart</a> |
<a href="/account">Account</a> |
<button onclick="changeTheme();" id="themeSelector">&#9789;</button>
</nav>
<img src="/otherAssets/logo.png" alt="libreevent logo" class="logo">
<h1>Welcome to libreevent!</h1>

26
src/server/ui/home/helper.js
View File

@@ -0,0 +1,26 @@
var theme = localStorage.getItem( 'theme' ) ?? '';
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme === '&#9788;' ) {
document.documentElement.classList.add( 'dark' );
document.getElementById( 'themeSelector' ).innerHTML = '&#9788;';
theme = '&#9788;';
} else {
document.documentElement.classList.add( 'light' );
document.getElementById( 'themeSelector' ).innerHTML = '&#9789;';
theme = '&#9789;';
}
function changeTheme () {
if ( theme === '&#9788;' ) {
document.documentElement.classList.remove( 'dark' );
document.documentElement.classList.add( 'light' );
localStorage.setItem( 'theme', '&#9789;' );
document.getElementById( 'themeSelector' ).innerHTML = '&#9789;';
theme = '&#9789;';
} else if ( theme === '&#9789;' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
localStorage.setItem( 'theme', '&#9788;' );
document.getElementById( 'themeSelector' ).innerHTML = '&#9788;';
theme = '&#9788;';
}
}

31
src/server/ui/home/main.css
View File

@@ -59,4 +59,35 @@
margin: 0;
border: none;
cursor: pointer;
}
nav {
padding: 30px;
}
nav a {
font-weight: bold;
color: var( --primary-color );
}
nav .home {
color: #42b983;
text-decoration: underline;
cursor: default;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: var( --primary-color );
background-color: var( --background-color );
transition: all 0.5s;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}