janishutz-website/old-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Mostly completed dark mode support

Browse Source
This commit is contained in:
Admin
2025-02-17 15:30:46 +01:00
parent b393b3cc55
commit 9df8fc5647
5 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
site/src/css/nav.css
View File

@@ -49,7 +49,7 @@ nav a {
flex-direction: column;
z-index: 100;
background-color: var( --color-background-accent );
transition: all 0.5s;
transition: left 0.5s, top 0.5s;
}
.nav-top-bar {

4
site/src/css/style.css
View File

@@ -57,6 +57,10 @@ body {
color: var( --color-text-primary );
}
body.loaded {
transition: color 0.5s, background-color 0.5s;
}
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,

2
site/src/css/timeline.css
View File

@@ -46,4 +46,4 @@
background-color: rgb(110, 110, 110);
display: flex;
left: calc( 5rem + 28px );
}
}

29
site/src/footer.html
View File

@@ -68,34 +68,7 @@
document.getElementById( 'analytics' ).classList.add( 'show' );
}
// Themeing
let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
var theme = loadedTheme;
let loadTheme = () => {
loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
if ( loadedTheme === 'auto' ) {
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
theme = 'dark_mode';
} else {
theme = 'light_mode';
}
}
if ( theme === 'dark_mode' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
document.documentElement.classList.remove( 'dark' );
theme === 'light_mode';
}
}
loadTheme();
// Show which theme is loaded
document.getElementById( 'theme-select' ).value = loadedTheme;
function changeTheme () {
theme = document.getElementById( 'theme-select' ).value;
localStorage.setItem( 'theme', theme );
loadTheme();
}
</script>
</div>

35
site/src/nav.html
View File

@@ -1,3 +1,38 @@
<script>
// Themeing
let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
var theme = loadedTheme;
let loadTheme = () => {
loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
if ( loadedTheme === 'auto' ) {
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
theme = 'dark_mode';
} else {
theme = 'light_mode';
}
}
if ( theme === 'dark_mode' ) {
document.documentElement.classList.remove( 'light' );
document.documentElement.classList.add( 'dark' );
} else {
document.documentElement.classList.add( 'light' );
document.documentElement.classList.remove( 'dark' );
theme === 'light_mode';
}
}
loadTheme();
setTimeout( () => {
document.querySelector( 'body' ).classList.add( 'loaded' );
}, 500 );
function changeTheme () {
theme = document.getElementById( 'theme-select' ).value;
localStorage.setItem( 'theme', theme );
loadTheme();
}
</script>
<div class="nav-placeholder"></div>
<div class="nav-top-bar">