From 1ecfbacc89021b71521f79a79dbc38f7a63f895b Mon Sep 17 00:00:00 2001 From: janis Date: Thu, 31 Aug 2023 13:51:05 +0200 Subject: [PATCH] add dark mode on default start page --- src/server/backend/helperRoutes.js | 4 ++++ src/server/ui/home/active/en/index.html | 14 +++++++---- src/server/ui/home/helper.js | 26 +++++++++++++++++++++ src/server/ui/home/main.css | 31 +++++++++++++++++++++++++ 4 files changed, 70 insertions(+), 5 deletions(-) diff --git a/src/server/backend/helperRoutes.js b/src/server/backend/helperRoutes.js index ff3a1d2..43974eb 100644 --- a/src/server/backend/helperRoutes.js +++ b/src/server/backend/helperRoutes.js @@ -17,4 +17,8 @@ module.exports = ( app, settings ) => { app.get( '/startPage/helperFunction', ( req, res ) => { res.sendFile( path.join( __dirname + '/../ui/home/helper.js' ) ); } ); + + app.get( '/startPage/mainStyle', ( req, res ) => { + res.sendFile( path.join( __dirname + '/../ui/home/main.css' ) ); + } ); }; \ No newline at end of file diff --git a/src/server/ui/home/active/en/index.html b/src/server/ui/home/active/en/index.html index a0f9a8e..e2b8af5 100644 --- a/src/server/ui/home/active/en/index.html +++ b/src/server/ui/home/active/en/index.html @@ -3,16 +3,20 @@ + + + + libreevent

Welcome to libreevent!

diff --git a/src/server/ui/home/helper.js b/src/server/ui/home/helper.js index e69de29..8429f8b 100644 --- a/src/server/ui/home/helper.js +++ b/src/server/ui/home/helper.js @@ -0,0 +1,26 @@ +var theme = localStorage.getItem( 'theme' ) ?? ''; +if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches || theme === '☼' ) { + document.documentElement.classList.add( 'dark' ); + document.getElementById( 'themeSelector' ).innerHTML = '☼'; + theme = '☼'; +} else { + document.documentElement.classList.add( 'light' ); + document.getElementById( 'themeSelector' ).innerHTML = '☽'; + theme = '☽'; +} + +function changeTheme () { + if ( theme === '☼' ) { + document.documentElement.classList.remove( 'dark' ); + document.documentElement.classList.add( 'light' ); + localStorage.setItem( 'theme', '☽' ); + document.getElementById( 'themeSelector' ).innerHTML = '☽'; + theme = '☽'; + } else if ( theme === '☽' ) { + document.documentElement.classList.remove( 'light' ); + document.documentElement.classList.add( 'dark' ); + localStorage.setItem( 'theme', '☼' ); + document.getElementById( 'themeSelector' ).innerHTML = '☼'; + theme = '☼'; + } +} \ No newline at end of file diff --git a/src/server/ui/home/main.css b/src/server/ui/home/main.css index 9470177..2545cd3 100644 --- a/src/server/ui/home/main.css +++ b/src/server/ui/home/main.css @@ -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; } \ No newline at end of file