diff --git a/site/src/css/colors.css b/site/src/css/colors.css new file mode 100644 index 0000000..8d68fbf --- /dev/null +++ b/site/src/css/colors.css @@ -0,0 +1,15 @@ +#theme-switcher-icon { + font-size: 1rem; + margin-right: 5px; +} + +.theme-selector { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; +} + +.slider-controls { + background-color: var( --color-background-accent ) !important; +} diff --git a/site/src/css/footer.css b/site/src/css/footer.css index 4ef9190..1ac574a 100644 --- a/site/src/css/footer.css +++ b/site/src/css/footer.css @@ -1,6 +1,6 @@ footer { border-top: solid black 1px; - background-color: rgb(226, 226, 226); + background-color: var( --color-background-accent ); width: 100vw; margin-top: 40px; } @@ -32,14 +32,14 @@ footer .logo { } .footer-category a { - color: black; + color: var( --color-text-primary ); text-decoration: none; transition: all 0.5s; font-size: 1rem; } .footer-category a:hover { - color: rgb(21, 43, 92); + color: var( --color-button-hover ); font-size: 1.1rem; } @@ -54,7 +54,7 @@ footer .logo { width: 300px; height: 400px; position: fixed; - background-color: rgb(193, 193, 223); + background-color: var( --color-background-analytics ); border-radius: 20px; padding: 10px; text-align: center; @@ -70,6 +70,7 @@ footer .logo { } .analytics-button { + color: var( --color-text-primary ); position: absolute; top: 10px; right: 10px; @@ -79,12 +80,16 @@ footer .logo { cursor: pointer; } +#matomo-opt-out { + color: var( --color-text-primary ) !important; +} + .analytics-notice .small-symbol { position: fixed; bottom: -3px; border-top-left-radius: 10px; border-top-right-radius: 10px; - background-color: rgb(193, 193, 223); + background-color: var( --color-background-analytics ); border: solid black 1px; cursor: pointer; transition: all 1s; @@ -100,4 +105,4 @@ footer .logo { .analytics-notice.show .small-symbol { bottom: -100px; transition-delay: 0s; -} \ No newline at end of file +} diff --git a/site/src/css/nav.css b/site/src/css/nav.css index 0df67b1..88f2fc1 100644 --- a/site/src/css/nav.css +++ b/site/src/css/nav.css @@ -23,7 +23,7 @@ nav { nav a { /* TODO: Update colours */ - color: black; + color: var( --color-text-primary ); text-decoration: none; } @@ -48,7 +48,7 @@ nav a { display: flex; flex-direction: column; z-index: 100; - background-color: rgb(226, 226, 226); + background-color: var( --color-background-accent ); transition: all 0.5s; } @@ -58,7 +58,7 @@ nav a { left: 0; width: 100vw; height: 20vh; - background-color: rgb(226, 226, 226); + background-color: var( --color-background-accent ); display: flex; align-items: center; z-index: 100; @@ -102,7 +102,7 @@ nav a { margin-left: auto; margin-right: 20px; text-decoration: none; - color: black; + color: var( --color-text-primary ); font-size: 5vh; cursor: pointer; width: 35px; @@ -118,7 +118,7 @@ nav a { display: block; width: 100%; height: 2px; - background-color: black; + background-color: var( --color-text-primary ); } #line1 { @@ -166,7 +166,7 @@ nav a { flex-direction: row; top: 0; left: 0; - border-bottom: black 1px solid; + border-bottom: var( --color-text-primary ) 1px solid; } .nav-menu.slide-up { @@ -183,7 +183,7 @@ nav a { width: max-content; transform-origin: top; transition: transform 0.5s; - background-color: white; + background-color: var( --color-background-primary ); border-radius: 10px; padding: 15px; z-index: 2; @@ -212,7 +212,7 @@ nav a { .nav-link-header::before, .nav-link-header::after { opacity: 0; - border: white 15px solid; + border: var( --color-background-primary ) 15px solid; border-top-color: transparent; width: 20px; height: 20px; @@ -240,7 +240,7 @@ nav a { } .nav-link-wrapper:hover .nav-link-header { - background-color: white; + background-color: var( --color-background-primary ); } .nav-link-wrapper:hover .nav-link-dropdown { @@ -255,4 +255,4 @@ nav a { .nav-toggle { display: none; } -} \ No newline at end of file +} diff --git a/site/src/css/style.css b/site/src/css/style.css index b8551b9..77427cc 100644 --- a/site/src/css/style.css +++ b/site/src/css/style.css @@ -1,9 +1,48 @@ @import url( 'https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap' ); @import url( 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' ); @import url( '/css/nav.css' ); +@import url( '/css/colors.css' ); @import url( '/css/footer.css' ); +/* Color Theme */ +:root, :root.light { + --color-text-primary: black; + --color-text-accent: #303030; + --color-link: rgb(10, 10, 100); + --color-background-primary: white; + --color-background-accent: rgb(226, 226, 226); + --color-background-analytics: rgb(193, 193, 223); + --color-button: rgb(21, 43, 92); + --color-button-hover: rgb(2, 10, 27); +} +:root.dark { + --color-text-primary: white; + --color-text-accent: #b5b5b5; + --color-link: rgb(0, 70, 150); + --color-background-primary: #151515; + --color-background-accent: black; + --color-background-analytics: #303030; + --color-button: rgb(20, 150, 200); + --color-button-hover: rgb(15, 125, 175); +} + +@media (prefers-color-scheme: dark) { + :root { + --color-text-primary: white; + --color-text-accent: #b5b5b5; + --color-link: rgb(0, 70, 150); + --color-background-primary: #151515; + --color-background-accent: black; + --color-background-analytics: #303030; + --color-button: rgb(20, 150, 200); + --color-button-hover: rgb(15, 125, 175); + } +} + +/* + * MAIN + */ body { height: 100%; width: 100%; @@ -14,6 +53,8 @@ body { justify-content: center; align-items: center; flex-direction: column; + background-color: var( --color-background-primary ); + color: var( --color-text-primary ); } .material-symbols-outlined { @@ -39,7 +80,7 @@ body { .button { padding: 20px; - background-color: rgb(21, 43, 92); + background-color: var( --color-button ); color: white; text-decoration: none; border-radius: 10px; @@ -48,13 +89,13 @@ body { .button:hover { border-radius: 5px; - background-color: rgb(2, 10, 27); + background-color: var( --color-button-hover ); } .pullquote-lines { - border-color: black; + border-color: var( --color-text-primary ); margin-bottom: 2%; margin-top: 2%; width: 100%; diff --git a/site/src/footer.html b/site/src/footer.html index b6232d5..2cca024 100644 --- a/site/src/footer.html +++ b/site/src/footer.html @@ -14,6 +14,14 @@

Info

About janishutz.com About Janis Hutz +
+ light_mode + +

Support

@@ -59,5 +67,35 @@ if ( !localStorage.getItem( 'analytics-dismissed' ) ) { 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(); + document.getElementById( 'theme-select' ).value = loadedTheme; + + function changeTheme () { + theme = document.getElementById( 'theme-select' ).value; + localStorage.setItem( 'theme', theme ); + loadTheme(); + }
diff --git a/site/src/nav.html b/site/src/nav.html index ac9aaba..a768e74 100644 --- a/site/src/nav.html +++ b/site/src/nav.html @@ -20,6 +20,7 @@ StorageManager QR & Barcode Insight libreǝvent + ConductorCalc @@ -102,4 +103,4 @@ } ); // TODO: Hide menu on when scrolling down - \ No newline at end of file +