tanner
/
personal-site
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move to custom dark mode

Browse Source
columns
Tanner Collin 4 years ago
parent 6bed384805
commit 786418496b
4 changed files with 160 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      themes/theme/static/darkmode-js.min.js
  2. 8
      themes/theme/static/enable-darkmode.js
  3. 46
      themes/theme/templates/base.html
  4. 136
      themes/theme/templates/style.css

1
themes/theme/static/darkmode-js.min.js vendored
View File

File diff suppressed because one or more lines are too long

8
themes/theme/static/enable-darkmode.js
Unescape View File

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

46
themes/theme/templates/base.html
Unescape 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>

136
themes/theme/templates/style.css
Unescape 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 {
filter: brightness(75%); 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;
} }
.darkmode--activated video { body.dark .content p.metadata {
mix-blend-mode: difference; color: #aaa;
} }
.darkmode--activated .contact-icons img { body.dark .content img {
filter: brightness(75%);
}
body.dark .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);
}
}

Write Preview
Loading…
Cancel
Save