Ellpeck/TinyLifeWeb
1
0
Fork 0
mirror of https://github.com/Ellpeck/TinyLifeWeb.git synced 2024-12-22 06:39:23 +01:00
Code Issues Projects Releases Wiki Activity

improved the way dark mode works

Browse source
This commit is contained in:
Ell 2023-06-18 19:12:43 +02:00
parent 55d255641c
commit 29ba63603d
4 changed files with 20 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/_layouts/default.html
View file

@ -21,7 +21,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/cadman">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="/style.css">
<link rel="icon" href="/favicon.ico">
<meta property="og:title" content="{{ page.title }}">
@ -39,6 +39,11 @@
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="80">
<script>
if (darkTheme)
$("body").addClass("dark-mode");
</script>
{% include navbar.html %}
{{ content }}

17
web/main.js
View file

@ -1,20 +1,13 @@
const darkStorage = localStorage.getItem("dark");
const darkTheme = darkStorage === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : darkStorage === "true";
if (darkTheme) {
$('head').append($("<link/>", {
rel: "stylesheet",
href: "/style/dark.css"
}));
}
$(function () {
$('.navbar-collapse a').on('click', () => $('.navbar-collapse').collapse('hide'));
$(".navbar-collapse a").on("click", () => $(".navbar-collapse").collapse("hide"));
let mode = $('#dark-mode');
mode.prop('checked', darkTheme);
mode.on('click', function () {
localStorage.setItem("dark", $(this).prop('checked'));
let mode = $("#dark-mode");
mode.prop("checked", darkTheme);
mode.on("click", function () {
localStorage.setItem("dark", $(this).prop("checked"));
location.hash = "";
location.reload();
});

9
web/style/style.css → web/style.css
View file

@ -169,6 +169,15 @@ pre.highlight {
border-radius: 5px;
}
body.dark-mode {
color: #d8d8d8;
background-color: #1b1b1b;
}
body.dark-mode .text-muted {
color: #929aa0 !important;
}
@media (max-width: 576px) {
.top-content {

8
web/style/dark.css
View file

@ -1,8 +0,0 @@
body {
color: #d8d8d8;
background-color: #1b1b1b;
}
.text-muted {
color: #929aa0 !important;
}