morgan
/
blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Theme

This commit is contained in:
Morgan 2024-09-10 04:28:20 +09:00
parent 5631c6f140
commit 90e98199fd
No known key found for this signature in database
3 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
themes/plain/layouts/_default/baseof.html
View File

@ -42,10 +42,6 @@
<main> <main>
{{- block "main" . }}{{- end }} {{- block "main" . }}{{- end }}
</main> </main>
<div class="utils">
<div id="copy">&copy;morgan.kr</div>
<div id="toggleColor">Toggle Darkmode</div>
</div>
<script> <script>
console.log("Sending statistics to server. Personal info is redacted afterwards."); console.log("Sending statistics to server. Personal info is redacted afterwards.");
console.log(fetch(`https://log.blog.morgan.kr/?url=${encodeURIComponent(document.location)}&referer=${encodeURIComponent(document.referrer)}`)); console.log(fetch(`https://log.blog.morgan.kr/?url=${encodeURIComponent(document.location)}&referer=${encodeURIComponent(document.referrer)}`));

5
themes/plain/layouts/_default/list.html
View File

@ -21,4 +21,9 @@
{{- if .IsHome }} {{- if .IsHome }}
<a href="/blogs" style="font-size:10px; color: #AAA; bottom: 12px; position: fixed;">-</a> <a href="/blogs" style="font-size:10px; color: #AAA; bottom: 12px; position: fixed;">-</a>
{{- end }} {{- end }}
<div class="utils">
<div id="copy">&copy;morgan.kr</div>
<div id="toggleColor">Toggle Darkmode</div>
</div>
{{ end }} {{ end }}

47
themes/plain/layouts/partials/style.html
View File

@ -26,7 +26,7 @@
} }
:root[color-mode="dark"] { :root[color-mode="dark"] {
--primary-bg-color: #242424; --primary-bg-color: #181816;
--primary-text-color: white; --primary-text-color: white;
--link-color: #8cc2dd; --link-color: #8cc2dd;
--blockquote-text-color: #ccc; --blockquote-text-color: #ccc;
@ -39,18 +39,21 @@
} }
body { body {
font-family: "SUSE", "Inter", "Pretendard", sans-serif; font-family: "SUSE", "Inter", "Pretendard", sans-serif;
font-size: 1.1rem; font-size: 1.1rem;
letter-spacing: 0.28px; letter-spacing: 0.28px;
margin: auto; margin: auto;
padding: 20px; padding: 20px;
max-width: 780px; max-width: 780px;
text-align: left; text-align: left;
background-color: var(--primary-bg-color); background-color: var(--primary-bg-color);
word-wrap: break-word; word-wrap: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;
line-height: 1.8; line-height: 1.8;
color: var(--primary-text-color); color: var(--primary-text-color);
}
main {
} }
h1 { font-size: 26px; } h1 { font-size: 26px; }
@ -188,17 +191,17 @@
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
const userPref = localStorage.getItem("theme");
if (userPref === "dark") {
document.documentElement.setAttribute("color-mode", "dark");
} else if (userPref === "light") {
document.documentElement.setAttribute("color-mode", "light");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.setAttribute("color-mode", "dark");
}
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const toggleButton = document.getElementById("toggleColor") const toggleButton = document.getElementById("toggleColor")
const userPref = localStorage.getItem("theme");
if (userPref === "dark") {
document.documentElement.setAttribute("color-mode", "dark");
} else if (userPref === "light") {
document.documentElement.setAttribute("color-mode", "light");
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.documentElement.setAttribute("color-mode", "dark");
}
toggleButton.addEventListener("click", function() { toggleButton.addEventListener("click", function() {
if (document.documentElement.getAttribute("color-mode") === "dark") { if (document.documentElement.getAttribute("color-mode") === "dark") {