From c7ba27acc50b06f0f7c2cced9b609a15cc9552d9 Mon Sep 17 00:00:00 2001 From: adam <56338480+adastx@users.noreply.github.com> Date: Sun, 28 Aug 2022 10:16:39 +0200 Subject: Added option to toggle dark mode --- dst/.files | 4 --- dst/ase.html | 38 ++++++++++++++++------------ dst/game.html | 38 ++++++++++++++++------------ dst/index.html | 38 ++++++++++++++++------------ dst/scripts/darktheme.js | 27 ++++++++++++++++++++ dst/spo.html | 38 ++++++++++++++++------------ dst/styles/style.css | 64 ++++++++++++++++++++++++++++++++++-------------- src/_footer.html | 35 ++++++++++++++------------ src/_header.html | 3 +++ src/scripts/darktheme.js | 27 ++++++++++++++++++++ src/styles/style.css | 64 ++++++++++++++++++++++++++++++++++-------------- 11 files changed, 254 insertions(+), 122 deletions(-) create mode 100644 dst/scripts/darktheme.js create mode 100644 src/scripts/darktheme.js diff --git a/dst/.files b/dst/.files index 1917e09..a425f16 100644 --- a/dst/.files +++ b/dst/.files @@ -1,5 +1 @@ ./styles/style.css -./game.md -./index.md -./ase.md -./spo.md diff --git a/dst/ase.html b/dst/ase.html index d722783..344a253 100644 --- a/dst/ase.html +++ b/dst/ase.html @@ -8,11 +8,14 @@ Q1. Software Process Model - Waterfall — adast.xyz +
adast.xyz +   •   +

⚠️ Test Site ⚠️

Q1. Software Process Model - Waterfall

@@ -923,20 +926,23 @@ Makes the development and release process faster and more robust.

Automated access to well defined environments. Tools like Docker for containerization or Virtual Machines.

- - + + + + + diff --git a/dst/game.html b/dst/game.html index 349dbd7..f814e39 100644 --- a/dst/game.html +++ b/dst/game.html @@ -8,11 +8,14 @@ Project Aftershock — adast.xyz +
adast.xyz +   •   +

⚠️ Test Site ⚠️

Project Aftershock

@@ -40,20 +43,23 @@

➤ Gameplay clips
➤ Follow my progress

- - + + + + + diff --git a/dst/index.html b/dst/index.html index e1f5271..0b82a1c 100644 --- a/dst/index.html +++ b/dst/index.html @@ -8,11 +8,14 @@ adast.xyz +
adast.xyz +   •   +

⚠️ Test Site ⚠️

Hello there!

@@ -24,20 +27,23 @@

Posts

➤ Project Aftershock

- - + + + + + diff --git a/dst/scripts/darktheme.js b/dst/scripts/darktheme.js new file mode 100644 index 0000000..a06aca2 --- /dev/null +++ b/dst/scripts/darktheme.js @@ -0,0 +1,27 @@ +// Get the theme toggle input +const currentTheme = localStorage.getItem("theme"); // If the current local storage item can be found + +if (window.matchMedia + && window.matchMedia("(prefers-color-scheme: dark)").matches + && !localStorage.getItem("theme")) { + localStorage.setItem("theme", "dark"); +} + +// Function that will switch the theme based on the if the theme toggle is checked or not +function switchTheme() { + if (document.body.classList.contains('dark-mode')) { + document.body.classList.remove("dark-mode"); + localStorage.setItem("theme", "light"); + } else { + document.body.classList.add("dark-mode"); + localStorage.setItem("theme", "dark"); + } +} +// Get the current theme from local storage +if (currentTheme === "dark") { + document.body.classList.add("dark-mode"); + localStorage.setItem("theme", "dark"); +} else { + document.body.classList.remove("dark-mode"); + localStorage.setItem("theme", "light"); +} diff --git a/dst/spo.html b/dst/spo.html index 4c98507..f875571 100644 --- a/dst/spo.html +++ b/dst/spo.html @@ -8,11 +8,14 @@ Exam — adast.xyz +
adast.xyz +   •   +

⚠️ Test Site ⚠️

Exam

@@ -673,20 +676,23 @@ Synthesized and inherited attributes.

Contextual analysis

Identification and type checking are combined into a depth-first traversal of the AST.

- - + + + + + diff --git a/dst/styles/style.css b/dst/styles/style.css index c5f9a89..0cee77a 100644 --- a/dst/styles/style.css +++ b/dst/styles/style.css @@ -1,13 +1,23 @@ :root { - --bg: #181a1b; - --bg-light: #222; - --fg: #ddd; - --gray: #888; - --gray-light: #555; - --yellow: #fda; - --yellow-dark: #ca8; - --yellow-warm: #e6c79a; - --wine: #c65a5a + --bg: #f3f3f3; + --fg: #181a1b; + --link: #006697; + --code: #e8e8e8; + --footer: #828997; + --home-link: #c02c38; + --quote-border: #c678dd; + --theme-toggle: #4078f2; +} + +.dark-mode { + --bg: #282c34; + --fg: #a6adba; + --link: #56b6c2; + --code: #363a45; + --footer: #828997; + --home-link: #e06c75; + --quote-border: #c678dd; + --theme-toggle: #5d8ffc; } body { @@ -20,9 +30,18 @@ body { } header { + overflow:hidden; margin-top: 1em; font-size: 2em; - color: var(--gray); + color: var(--footer); +} + +.nav-left { + float:left; +} + +.nav-right { + float:right; } footer { @@ -30,17 +49,16 @@ footer { margin-bottom: 1.5em; text-align: center; font-size: 0.95em; - color: var(--gray); + color: var(--footer); } a { - color: var(--yellow); + color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; - text-decoration-color: var(--yellow-dark); } pre > code { @@ -53,8 +71,8 @@ pre > code { pre, code { font-family: 'Fira Code', monospace; font-size: 0.98em; - color: var(--fg); - background-color: var(--bg-light); + /* color: var(--fg); */ + background-color: var(--code); border-radius: 5px; } @@ -74,14 +92,22 @@ img { } blockquote { - background-color: var(--bg-light); - border-left: 5px solid var(--yellow-warm); + background-color: var(--code); + border-left: 5px solid var(--quote-border); border-radius: 5px; margin: 0em 1em; padding-left: 1em; } .homepage-link { - color: var(--wine); - text-decoration-color: var(--gray-light); + color: var(--home-link); +} + +#darkmodetoggle { + color: var(--theme-toggle); +} + +#darkmodetoggle:hover { + cursor: pointer; + text-decoration: none; } diff --git a/src/_footer.html b/src/_footer.html index ca3390b..9dd7db1 100644 --- a/src/_footer.html +++ b/src/_footer.html @@ -1,17 +1,20 @@ - - + + + + + diff --git a/src/_header.html b/src/_header.html index d5ecc9f..9521b9c 100644 --- a/src/_header.html +++ b/src/_header.html @@ -8,10 +8,13 @@ +
adast.xyz +   •   +

⚠️ Test Site ⚠️

diff --git a/src/scripts/darktheme.js b/src/scripts/darktheme.js new file mode 100644 index 0000000..a06aca2 --- /dev/null +++ b/src/scripts/darktheme.js @@ -0,0 +1,27 @@ +// Get the theme toggle input +const currentTheme = localStorage.getItem("theme"); // If the current local storage item can be found + +if (window.matchMedia + && window.matchMedia("(prefers-color-scheme: dark)").matches + && !localStorage.getItem("theme")) { + localStorage.setItem("theme", "dark"); +} + +// Function that will switch the theme based on the if the theme toggle is checked or not +function switchTheme() { + if (document.body.classList.contains('dark-mode')) { + document.body.classList.remove("dark-mode"); + localStorage.setItem("theme", "light"); + } else { + document.body.classList.add("dark-mode"); + localStorage.setItem("theme", "dark"); + } +} +// Get the current theme from local storage +if (currentTheme === "dark") { + document.body.classList.add("dark-mode"); + localStorage.setItem("theme", "dark"); +} else { + document.body.classList.remove("dark-mode"); + localStorage.setItem("theme", "light"); +} diff --git a/src/styles/style.css b/src/styles/style.css index c5f9a89..0cee77a 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,13 +1,23 @@ :root { - --bg: #181a1b; - --bg-light: #222; - --fg: #ddd; - --gray: #888; - --gray-light: #555; - --yellow: #fda; - --yellow-dark: #ca8; - --yellow-warm: #e6c79a; - --wine: #c65a5a + --bg: #f3f3f3; + --fg: #181a1b; + --link: #006697; + --code: #e8e8e8; + --footer: #828997; + --home-link: #c02c38; + --quote-border: #c678dd; + --theme-toggle: #4078f2; +} + +.dark-mode { + --bg: #282c34; + --fg: #a6adba; + --link: #56b6c2; + --code: #363a45; + --footer: #828997; + --home-link: #e06c75; + --quote-border: #c678dd; + --theme-toggle: #5d8ffc; } body { @@ -20,9 +30,18 @@ body { } header { + overflow:hidden; margin-top: 1em; font-size: 2em; - color: var(--gray); + color: var(--footer); +} + +.nav-left { + float:left; +} + +.nav-right { + float:right; } footer { @@ -30,17 +49,16 @@ footer { margin-bottom: 1.5em; text-align: center; font-size: 0.95em; - color: var(--gray); + color: var(--footer); } a { - color: var(--yellow); + color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; - text-decoration-color: var(--yellow-dark); } pre > code { @@ -53,8 +71,8 @@ pre > code { pre, code { font-family: 'Fira Code', monospace; font-size: 0.98em; - color: var(--fg); - background-color: var(--bg-light); + /* color: var(--fg); */ + background-color: var(--code); border-radius: 5px; } @@ -74,14 +92,22 @@ img { } blockquote { - background-color: var(--bg-light); - border-left: 5px solid var(--yellow-warm); + background-color: var(--code); + border-left: 5px solid var(--quote-border); border-radius: 5px; margin: 0em 1em; padding-left: 1em; } .homepage-link { - color: var(--wine); - text-decoration-color: var(--gray-light); + color: var(--home-link); +} + +#darkmodetoggle { + color: var(--theme-toggle); +} + +#darkmodetoggle:hover { + cursor: pointer; + text-decoration: none; } -- cgit v1.2.3-70-g09d2