Bun/nixfox-reborn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the dark theme from flashing at you every page load

Browse source
This commit is contained in:
Bun 2025-07-03 00:19:57 -04:00
parent df4979192e
commit 567b4a64fc
5 changed files with 29 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

6
sass/sidebar.scss
View file

@ -42,6 +42,7 @@
color:#7ccbd5;
font-size:17px;
text-decoration:none;
font-weight: bold;
}
.sb_img {
@ -75,6 +76,11 @@
display: inline-block;
}
.theme-toggle:hover {
background-color: var(--elm-inv-bg-color);
color: var(--text-inv-color);
}
.personal { color:#fc3f5b; }
.nixfox { color:#2abafc; }

15
sass/style.scss
View file

@ -8,7 +8,9 @@
[data-theme="light"] {
--bg-color: #DDE1E9;
--elm-bg-color: #EFF1F5;
--elm-inv-bg-color: #1F2223;
--text-color: #141414;
--text-inv-color: #DBD8D4;
--subtext-color: #6c7387;
--link-color: #b7162e;
}
@ -16,18 +18,24 @@
[data-theme="dark"] {
--bg-color: #181A1B;
--elm-bg-color: #1F2223;
--elm-inv-bg-color: #EFF1F5;
--text-color: #DBD8D4;
--text-inv-color: #141414;
--subtext-color: #8991a5;
--link-color: #DB4E63;
}
html {
background-color: var(--bg-color);
.preload {
transition: none !important;
animation-duration: 0.001s !important;
}
body {
color: var(--text-color);
background-color: var(--bg-color);
padding-bottom: 5em;
min-height: 100%;
}
.subtitle {
@ -44,7 +52,6 @@ a {
}
a:hover {
font-weight: bold;
outline: 3px solid;
}
@ -60,7 +67,7 @@ h1 {
max-width: 50em;
margin: auto;
top: 3em;
top: 2em;
left: 6.5em;
padding: 3em;

3
static/nofade.js Normal file
View file

@ -0,0 +1,3 @@
window.addEventListener("load", () => {
document.body.classList.remove("preload");
});

11
templates/base.html
View file

@ -1,18 +1,23 @@
<!DOCTYPE html>
<html lang="en" data-theme="light" data-sidebar="shown">
<html>
<head>
<html lang="en">
<html data-theme="light">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>nixfox den</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/style.css">
<link rel="stylesheet" href="/sidebar.css">
<script type="text/javascript" src="nofade.js"></script>
<title>nixfox den</title>
</head>
<body>
<body class="preload">
{% include "sidebar.html" %}
<button type="button" class="sidebar-toggle" id="sidebar-toggle" aria-pressed="false"></button>

2
templates/sidebar.html
View file

@ -2,7 +2,7 @@
<a href="/" class="sb_img"><img src="https://art.pixilart.com/sr2a62fc9ed2173.png" alt="teto creature"></a>
<button type="button" class="theme-toggle" data-theme-toggle aria-label="Toggle to dark"></button>
<script src="/darkmode.js"></script>
<script src="/darkmode.js"> </script>
<div class="sb_header personal"><b>personal</b></div>
<a href="/blog" class="sb_link pers">📰 blog</a><br>