diff options
| author | adam <56338480+adastx@users.noreply.github.com> | 2022-08-28 10:16:39 +0200 |
|---|---|---|
| committer | adam <56338480+adastx@users.noreply.github.com> | 2022-08-28 10:20:56 +0200 |
| commit | c7ba27acc50b06f0f7c2cced9b609a15cc9552d9 (patch) | |
| tree | f4f7625186f5841ddec667989660a51c0897ce06 /src | |
| parent | 77cfc954e906edbf9a72aae5fa5fa091e58b014a (diff) | |
Added option to toggle dark mode
Diffstat (limited to 'src')
| -rw-r--r-- | src/_footer.html | 35 | ||||
| -rw-r--r-- | src/_header.html | 3 | ||||
| -rw-r--r-- | src/scripts/darktheme.js | 27 | ||||
| -rw-r--r-- | src/styles/style.css | 64 |
4 files changed, 94 insertions, 35 deletions
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 @@ - <footer> - <a href="/" class="homepage-link">adast.xyz</a> - — - <a href="https://git.adast.xyz/explore/repos">Gitea</a> - • - <a href="https://github.com/adastx">Github</a> - • - <a href="https://odysee.com/@adamski:f">Odysee</a> - • - <a href="https://youtube.com/c/adamski1">Youtube</a> - • - <a href="https://www.twitch.tv/adastx">Twitch</a> - • - <a href="https://steamcommunity.com/id/adastx">Steam</a> - </footer> - </body> +<footer> + <a href="/" class="homepage-link">adast.xyz</a> + — + <a href="https://git.adast.xyz/explore/repos">Gitea</a> + • + <a href="https://github.com/adastx">Github</a> + • + <a href="https://odysee.com/@adamski:f">Odysee</a> + • + <a href="https://youtube.com/c/adamski1">Youtube</a> + • + <a href="https://www.twitch.tv/adastx">Twitch</a> + • + <a href="https://steamcommunity.com/id/adastx">Steam</a> +</footer> + +<script src="scripts/darktheme.js"></script> +</body> + </html> 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 @@ <title></title> <link rel="icon" type="image/x-icon" href="images/favicon.ico"> <link rel="stylesheet" href="styles/style.css"> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <a href="/" class="homepage-link">adast.xyz</a> + • + <a id="darkmodetoggle" class="fa fa-moon-o" onclick="switchTheme()" aria-hidden="true"></a> </header> <h2>⚠️ Test Site ⚠️</h2> 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; } |