Commit 995b27d6 authored by Gabriele Musco's avatar Gabriele Musco
Browse files

added website darkmode

parent 74ccab39
Pipeline #151362 passed with stage
in 22 seconds
......@@ -9,7 +9,12 @@
<script src="./marked.min.js"></script>
</head>
<body>
<span id="color_preference_detector"></span>
<button id="darkmodetoggle" onclick="darktoggle()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path d="M6.81 1.102A7 7 0 0 0 1 8a7 7 0 0 0 7 7 7 7 0 0 0 4.594-1.729A8.797 8.797 0 0 1 6 4.766a8.797 8.797 0 0 1 .81-3.664z" style="isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none" color="#000" overflow="visible" fill="#2e3436"/>
</svg>
</button>
<div id="markdown">
</div>
......@@ -46,6 +51,17 @@
getFile('./page.md', populatemd);
document.getElementById('yearspan').innerHTML = new Date().getFullYear();
function darktoggle() {
body = document.getElementsByTagName('body')[0];
body.className = body.className == 'darkmode' ? '' : 'darkmode';
}
if (window.getComputedStyle(
document.getElementById('color_preference_detector')
).content === '"dark"') {
darktoggle();
}
</script>
</body>
</html>
......@@ -27,6 +27,11 @@ body, html {
padding: 0 0 0 0;
font-family: Cantarell, sans-serif;
color: #555;
transition: all 500ms linear;
}
a, a:visited {
color: #1a5fb4;
}
video {
......@@ -140,6 +145,7 @@ h2 {
#footer {
padding: 24px 24px 24px 24px;
background-color: #241F31;
transition: all 500ms linear;
}
#footer, #footer a, #footer a:visited {
color: #81DFFE;
......@@ -154,3 +160,35 @@ h2 {
padding: 24px 24px 24px 24px;
text-align: center;
}
#darkmodetoggle {
position: fixed;
z-index: 999999;
top: 70px;
right: 5px;
background: none;
border: none;
}
.darkmode {
background-color: #241F31;
color: #FFFFFF;
}
.darkmode a, .darkmode a:visited {
color: white;
}
.darkmode #darkmodetoggle svg {
filter: invert(1);
}
@media (prefers-color-scheme: dark) {
#color_preference_detector {
content: 'dark';
}
}
.darkmode #footer {
background-color: #000000;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment