Fix the dark theme from flashing at you every page load

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

View file

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

View file

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

3
static/nofade.js Normal file
View file

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

View file

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