Last active
November 12, 2023 11:22
-
-
Save iamdtms/ddc4e556805e60652c21c06281d5b3c2 to your computer and use it in GitHub Desktop.
theme-switcher-template
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--color: #fefefe; | |
--bg-color: #010101; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en" dir="ltr"> | |
<head> | |
<meta http-equiv="Content-Security-Policy" content=" | |
default-src 'self' 'unsafe-inline'; | |
font-src fonts.gstatic.com 'self'; | |
style-src fonts.googleapis.com 'self' 'unsafe-inline'; | |
script-src 'self' 'unsafe-inline'; | |
img-src 'self' data:; | |
manifest-src 'self'; | |
connect-src 'self' 'unsafe-inline'; | |
object-src 'none';"> | |
<meta charset="utf-8"> | |
<title>Theme switcher</title> | |
<meta property="og:type" content="website"> | |
<meta property="og:site_name" content=""> | |
<meta name="twitter:creator" content="@iamdtms"> | |
<meta property="og:site_name" content=""> | |
<meta name="twitter:title" content=""> | |
<meta name="description" content=""> | |
<meta property="og:description" content=""> | |
<meta itemprop="description" content=""> | |
<meta name="twitter:description" content=""> | |
<meta name="author" content="@iamdtms"> | |
<meta name="keywords" content=""> | |
<meta name="viewport" content="initial-scale=1,width=device-width"> | |
<meta name="googlebot" content="all"> | |
<meta name="msapplication-TileColor" content="#cccccc"> | |
<link rel="stylesheet" href="assets/style/sanitize.min.css"> | |
<link rel="stylesheet" href="#" id="color-scheme"><!-- dynamic --> | |
<link rel="stylesheet" href="assets/style/style.css"> | |
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#010101"> | |
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fefefe"> | |
</head> | |
<body> | |
<div class="container"> | |
<a class="btn-toggle" href="#"></a> | |
<h1>Theme switcher</h1> | |
</div> | |
<script src="assets/script/site.js" defer></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--color: #010101; | |
--bg-color: #fefefe; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
var toggleBtn = document.querySelector(".btn-toggle"); | |
var themeColor = document.querySelector('[name=theme-color]'); | |
var style = document.getElementById('color-scheme'); | |
var useDark = window.matchMedia("(prefers-color-scheme: dark)").matches; | |
function styleSetup() { | |
if (useDark) { | |
style.href = "/assets/style/dark-theme.css"; | |
toggleBtn.innerHTML = '☀️' | |
toggleBtn.title = 'Turn lights on'; | |
themeColor.content = '#0a0a0a'; | |
useDark = false; | |
} else { | |
style.href = "/assets/style/light-theme.css"; | |
toggleBtn.innerHTML = '🌙'; | |
toggleBtn.title = 'Turn lights off'; | |
themeColor.content = '#3c8cd1'; | |
useDark = true; | |
} | |
} | |
window.onload = styleSetup(); | |
window.matchMedia('(prefers-color-scheme: dark)') | |
.addEventListener('change',({ matches }) => { | |
styleSetup(); | |
}); | |
toggleBtn.addEventListener("click", function (event) { | |
styleSetup(); | |
event.preventDefault(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-color: var(--bg-color); | |
color: var(--color); | |
} | |
.container { | |
display: grid; | |
text-align: right; | |
.btn-toggle { | |
text-decoration: none; | |
border-radius: 0 0 0 1.5rem; | |
position: absolute; | |
display: inline-block; | |
right: 0; | |
top: 0; | |
background-color: var(--color); | |
padding: .25rem .25rem .5rem .5rem; | |
} | |
h1 { | |
color: inherit; | |
text-align: left; | |
padding: 0 1rem; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment