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

Move to custom dark mode

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

46
themes/theme/templates/base.html
View File

@@ -1,3 +1,12 @@
{% if PROD %}
<?php
$themeClass = '';
if (!empty($_COOKIE['theme'])) {
$themeClass = $_COOKIE['theme'];
}
?>
{% endif %}
<!DOCTYPE html>
<html lang="en">
<head>
@@ -24,12 +33,22 @@
{% include 'fonts.css' %}
</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>
<noscript>
<style type="text/css">
.theme-select {
display: none !important;
}
</style>
</noscript>
</head>
{% if PROD %}
<body class="<?php echo $themeClass; ?>">
{% else %}
<body>
{% endif %}
<div class="container">
<div class="sidebar">
<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://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
</p>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p>
</div>
</div>
<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://github.com/tannercollin" target="_blank" rel="noreferrer noopener"><img alt="github logo" src="/theme/github.svg" /></a>
</p>
<p class='theme-select'>
<a onClick="setTheme('light')">Light</a> / <a onClick="setTheme('dark')">Dark</a>
</p>
</div>
</div>
{% block content %}
{% endblock %}
</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>
</html>