Move to custom dark mode

This commit is contained in:
Tanner Collin 2020-11-02 05:05:25 +00:00
parent 6bed384805
commit 786418496b
4 changed files with 161 additions and 32 deletions

File diff suppressed because one or more lines are too long

View File

@ -1,8 +0,0 @@
const options = {
bottom: '16px',
right: '16px',
buttonColorDark: '#666',
buttonColorLight: '#aaa',
label: '🌙',
};
new Darkmode(options).showWidget();

View File

@ -1,3 +1,12 @@
{% if PROD %}
<?php
$themeClass = '';
if (!empty($_COOKIE['theme'])) {
$themeClass = $_COOKIE['theme'];
}
?>
{% endif %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -24,12 +33,22 @@
{% include 'fonts.css' %} {% include 'fonts.css' %}
</style> </style>
<script defer src="/theme/darkmode-js.min.js"></script>
<script defer src="/theme/enable-darkmode.js"></script>
<script defer src="/theme/instant-page.js"></script> <script defer src="/theme/instant-page.js"></script>
<noscript>
<style type="text/css">
.theme-select {
display: none !important;
}
</style>
</noscript>
</head> </head>
{% if PROD %}
<body class="<?php echo $themeClass; ?>">
{% else %}
<body> <body>
{% endif %}
<div class="container"> <div class="container">
<div class="sidebar"> <div class="sidebar">
<img src="/theme/me.jpg" class="me" alt="A picture of me smiling" /> <img src="/theme/me.jpg" class="me" alt="A picture of me smiling" />
@ -42,6 +61,9 @@
<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a> <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a> <a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
</p> </p>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
@ -54,12 +76,32 @@
<a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a> <a href="https://t.me/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="telegram logo" src="/theme/telegram.svg" /></a>
<a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a> <a href="https://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
</p> </p>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p>
</div> </div>
</div> </div>
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</div> </div>
</div> </div>
<script>
function setTheme(theme) {
console.log('Setting theme to', theme);
if (theme == 'dark') {
document.body.classList.add('dark');
document.body.classList.remove('light');
} else if (theme == 'light') {
document.body.classList.add('light');
document.body.classList.remove('dark');
}
document.cookie = 'theme=' + theme + '; Max-Age=31536000; Path=/; SameSite=Lax';
}
</script>
</body> </body>
</html> </html>

View File

@ -5,20 +5,15 @@ html {
body { body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font: 1.2rem/1.0 Lato,sans-serif; font: 1.2rem/1.0 Lato,sans-serif;
background-color: rgb(245, 245, 245);
background-color: white;
} }
a { a {
color: #000000;
text-decoration: none; text-decoration: none;
outline: none; outline: none;
border-bottom: 1px solid #000;
} }
pre { pre {
font-size: 1rem; font-size: 1rem;
background-color: #eee;
padding: 1rem; padding: 1rem;
} }
@ -27,6 +22,12 @@ pre {
margin: 2rem auto 0 auto; margin: 2rem auto 0 auto;
} }
.theme-select {
font-size: 1rem;
margin-bottom: 0;
cursor: pointer;
}
.sidebar { .sidebar {
margin-top: 2px; margin-top: 2px;
float: left; float: left;
@ -63,7 +64,7 @@ pre {
.topbar .me { .topbar .me {
float: left; float: left;
height: 6rem; height: 6.5rem;
width: auto; width: auto;
} }
@ -74,7 +75,6 @@ pre {
} }
.topbar .contact-icons { .topbar .contact-icons {
margin-top: 1.5rem;
margin-left: 0.25rem; margin-left: 0.25rem;
margin-bottom: 0; margin-bottom: 0;
} }
@ -89,9 +89,12 @@ pre {
margin-right: 1rem; margin-right: 1rem;
} }
.topbar .theme-select {
margin-top: 0.5rem;
}
.toc { .toc {
float: right; float: right;
background-color: #eee;
padding: 0.75rem; padding: 0.75rem;
padding-top: 0; padding-top: 0;
margin-left: 0.75rem; margin-left: 0.75rem;
@ -107,7 +110,6 @@ pre {
} }
.content p.metadata { .content p.metadata {
color: #555;
font: 1rem/1.0 Apparatus SIL,serif; font: 1rem/1.0 Apparatus SIL,serif;
font-style: italic; font-style: italic;
} }
@ -164,24 +166,118 @@ pre {
} }
} }
.darkmode-toggle {
z-index: 500;
background: black !important; body {
background-color: #fff;
color: #000;
} }
.darkmode-toggle--white { a {
z-index: 500; color: #000;
background: grey !important; border-bottom: 1px solid #000;
} }
.darkmode--activated .content img { pre {
background-color: #eee;
}
.toc {
background-color: #eee;
}
.content p.metadata {
color: #555;
}
body.dark {
background-color: #000;
color: #fff;
}
body.dark a {
color: #fff;
border-bottom: 1px solid #fff;
}
body.dark pre {
background-color: #222;
}
body.dark .toc {
background-color: #222;
}
body.dark .content p.metadata {
color: #aaa;
}
body.dark .content img {
filter: brightness(75%); filter: brightness(75%);
} }
.darkmode--activated video { body.dark .contact-icons img {
mix-blend-mode: difference;
}
.darkmode--activated .contact-icons img {
filter: invert(1); filter: invert(1);
} }
@media (prefers-color-scheme: dark) {
body.light {
background-color: #fff;
color: #000;
}
body.light a {
color: #000;
border-bottom: 1px solid #000;
}
body.light pre {
background-color: #eee;
}
body.light .toc {
background-color: #eee;
}
body.light .content p.metadata {
color: #555;
}
body.light .contact-icons img {
filter: none;
}
body.light .content img {
filter: none;
}
body {
background-color: #000;
color: #fff;
}
a {
color: #fff;
border-bottom: 1px solid #fff;
}
pre {
background-color: #222;
}
.toc {
background-color: #222;
}
.content p.metadata {
color: #aaa;
}
.content img {
filter: brightness(75%);
}
.contact-icons img {
filter: invert(1);
}
}