Somewhat working dark-mode theme and a toggle
This commit is contained in:
parent
79c58e9ed6
commit
9c414cb2c1
|
|
@ -1,3 +1,14 @@
|
|||
<aside>
|
||||
<button id="theme-toggle">
|
||||
<span class="block-light d-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
|
||||
</span>
|
||||
<span class="block-dark d-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
|
||||
</span>
|
||||
</button>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<hr>
|
||||
<p>
|
||||
|
|
@ -8,3 +19,5 @@
|
|||
</p>
|
||||
<br />
|
||||
</footer>
|
||||
|
||||
<script src="/theme.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,5 +8,4 @@
|
|||
<a class="menu-item" href="/feed.xml">feed</a>
|
||||
<a class="menu-item" href="https://hachyderm.io/@jer">@jer</a>
|
||||
<a class="menu-item" href="https://github.com/badboy/">github</a>
|
||||
<hr>
|
||||
</nav>
|
||||
|
|
|
|||
78
style.css
78
style.css
|
|
@ -30,10 +30,48 @@ html{
|
|||
line-height:1.5rem
|
||||
}
|
||||
|
||||
:root,
|
||||
html[data-theme='light'] {
|
||||
--main-bg-color: white;
|
||||
--text-color: #111;
|
||||
--alt-text-color: black;
|
||||
--code-bg: rgba(0,0,0,.05);;
|
||||
--border-color: rgba(0,0,0,.05);
|
||||
--link-color: #00e;
|
||||
--link-color-visited: #60b;
|
||||
--inline-code: #111;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--main-bg-color: #111;
|
||||
--text-color: #b3b3b3;
|
||||
--alt-text-color: #999999;
|
||||
--code-bg: #ccc;
|
||||
--border-color: #414141;
|
||||
--link-color: #478be6;
|
||||
--link-color-visited: #c988ff;
|
||||
--inline-code: #323232;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
[data-theme='light'] .block-light,
|
||||
[data-theme='dark'] .block-dark {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--main-bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
code {
|
||||
color: var(--inline-code);
|
||||
background-color: var(--code-bg);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
|
@ -44,16 +82,16 @@ pre {
|
|||
line-height: 1.2rem;
|
||||
|
||||
/* cobalt's highlighting sets inline values, so we need to overwrite them */
|
||||
background-color: #f7f7f7 !important;
|
||||
background-color: var(--code-bg) !important;
|
||||
}
|
||||
|
||||
pre > span {
|
||||
/* cobalt's highlighting sets inline values, so we need to overwrite them */
|
||||
background-color: #f7f7f7 !important;
|
||||
background-color: var(--code-bg) !important;
|
||||
}
|
||||
|
||||
time {
|
||||
color: #1a1a1a;
|
||||
color: var(--alt-text-color);
|
||||
}
|
||||
|
||||
nav {
|
||||
|
|
@ -82,12 +120,27 @@ nav .menu-item.icon {
|
|||
}
|
||||
|
||||
nav a.menu-item {
|
||||
color: #000;
|
||||
color: var(--alt-text-color);
|
||||
}
|
||||
|
||||
aside {
|
||||
font-family: sans-serif;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
#theme-toggle {
|
||||
cursor: pointer;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.menu-item.current,
|
||||
.menu-item:hover {
|
||||
border-left: 3px solid #000;
|
||||
border-left: 3px solid var(--alt-text-color);
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -125,17 +178,24 @@ article.blog-list {
|
|||
}
|
||||
|
||||
article.blog-list a {
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
article.blog-list a:visited {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
article .metadata a {
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
color: var(--alt-text-color);
|
||||
}
|
||||
|
||||
article a {
|
||||
text-decoration: underline;
|
||||
color: var(--link-color);
|
||||
}
|
||||
article a:visited {
|
||||
color: var(--link-color-visited);
|
||||
}
|
||||
|
||||
/* begin article banner */
|
||||
|
|
@ -189,6 +249,10 @@ hr {
|
|||
background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-color: var(--border-color);
|
||||
|
||||
}
|
||||
blockquote p {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
|
|
|||
18
theme.js
Normal file
18
theme.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
var toggle = document.getElementById("theme-toggle");
|
||||
|
||||
var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
|
||||
if (storedTheme) {
|
||||
document.documentElement.setAttribute('data-theme', storedTheme)
|
||||
}
|
||||
|
||||
toggle.onclick = function() {
|
||||
var currentTheme = document.documentElement.getAttribute("data-theme");
|
||||
var targetTheme = "light";
|
||||
|
||||
if (currentTheme === "light") {
|
||||
targetTheme = "dark";
|
||||
}
|
||||
|
||||
document.documentElement.setAttribute('data-theme', targetTheme)
|
||||
localStorage.setItem('theme', targetTheme);
|
||||
};
|
||||
Loading…
Reference in a new issue