Skip to content

Instantly share code, notes, and snippets.

@iamdtms

iamdtms/dark-theme.css

Last active September 22, 2024 17:07
Show Gist options
  • Save iamdtms/ddc4e556805e60652c21c06281d5b3c2 to your computer and use it in GitHub Desktop.
Save iamdtms/ddc4e556805e60652c21c06281d5b3c2 to your computer and use it in GitHub Desktop.
Download ZIP
theme-switcher-template
Raw
dark-theme.css
:root {
--color: #fefefe;
--bg-color: #010101;
}
Raw
index.html
<!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 property="og:site_name" content="">
<meta name="description" content="">
<meta property="og:description" content="">
<meta itemprop="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>
Raw
light-theme.css
:root {
--color: #010101;
--bg-color: #fefefe;
}
Raw
site.js
'use strict';
var toggleBtn = document.querySelector(".btn-toggle");
var themeColor = document.querySelector('[name=theme-color]');
var colorScheme = document.getElementById('color-scheme');
var useDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
function styleSetup() {
if (useDark) {
colorScheme.href = "assets/style/dark-theme.css";
toggleBtn.innerHTML = '☀️'
toggleBtn.title = 'Turn lights on';
themeColor.content = '#0a0a0a';
Cookies.set('mode', 'dark', { expires: 7 });
useDark = false;
} else {
colorScheme.href = "assets/style/light-theme.css";
toggleBtn.innerHTML = '🌙';
toggleBtn.title = 'Turn lights off';
themeColor.content = '#3c8cd1';
Cookies.set('mode', 'light', { expires: 7 });
useDark = true;
}
}
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', () => {
styleSetup();
});
toggleBtn.addEventListener("click", function (event) {
styleSetup();
event.preventDefault();
});
document.addEventListener("DOMContentLoaded", function () {
var useMode = Cookies.get('mode');
if (useMode == 'light') {
useDark = false;
} if (useMode == 'dark') {
useDark = true;
}
styleSetup();
});
Raw
style.scss
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