Skip to content

fix(theme): prevent white flash during page load #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Mujojo03 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

fix(theme): prevent white flash during page load #81

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b9f71bc
feat(ui): add dark/light mode toggle button
Mujojo03 Oct 20, 2025
fe9ed1c
fix(theme): prevent white flash during page load
Mujojo03 Oct 22, 2025
102de10
Merge branch 'master' into feature
Mujojo03 Oct 22, 2025
2a31eed
Revert "fix(theme): prevent white flash during page load"
Mujojo03 Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions Gemfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ GEM
specs:
addressable (2.8.7)
public_suffix (>= 2.0.2, < 7.0)
base64 (0.2.0)
Copy link
Contributor

@okjodom okjodom Oct 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Mujojo03 was this change intended to be part of this PR? Looks extraneous and accidental!

bigdecimal (3.1.9)
base64 (0.3.0)
bigdecimal (3.3.1)
colorator (1.1.0)
concurrent-ruby (1.3.5)
csv (3.3.2)
csv (3.3.5)
em-websocket (0.5.3)
eventmachine (>= 0.12.9)
http_parser.rb (~> 0)
eventmachine (1.2.7)
ffi (1.17.1)
ffi (1.17.2)
forwardable-extended (2.6.0)
google-protobuf (4.29.3)
google-protobuf (4.33.0)
bigdecimal
rake (>= 13)
http_parser.rb (0.8.0)
Expand Down Expand Up @@ -50,7 +50,7 @@ GEM
jekyll (>= 3.7, < 5.0)
jekyll-watch (2.2.1)
listen (~> 3.0)
json (2.10.1)
json (2.15.1)
kramdown (2.5.1)
rexml (>= 3.3.9)
kramdown-parser-gfm (1.1.0)
Expand All @@ -62,16 +62,16 @@ GEM
mercenary (0.4.0)
pathutil (0.16.2)
forwardable-extended (~> 2.6)
public_suffix (6.0.1)
rake (13.2.1)
public_suffix (6.0.2)
rake (13.3.0)
rb-fsevent (0.11.2)
rb-inotify (0.11.1)
ffi (~> 1.0)
rexml (3.4.1)
rouge (4.5.1)
rexml (3.4.4)
rouge (4.6.1)
safe_yaml (1.0.5)
sass-embedded (1.85.0)
google-protobuf (~> 4.29)
sass-embedded (1.93.2)
google-protobuf (~> 4.31)
rake (>= 13)
terminal-table (3.0.2)
unicode-display_width (>= 1.1.1, < 3)
Expand Down
26 changes: 15 additions & 11 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<footer class="Footer">
<div class="Footer-border">
==============================================================================================================================================================
</div>
<div class="Footer-inner">
<div class="Footer-source">
<a href="https://github.com/BitDevsNBO/bitdevsnbo.org" target="_blank" rel="noopener nofollow">Source available on Github</a>
<body>
<header>...</header>
<main>...</main>
<footer class="Footer">
<div class="Footer-border">
==============================================================================================================================================================
</div>
<div class="Footer-rss">
<a href="/feed.xml">RSS Feed</a>
<div class="Footer-inner">
<div class="Footer-source">
<a href="https://github.com/BitDevsNBO/bitdevsnbo.org" target="_blank" rel="noopener nofollow">Source available on Github</a>
</div>
<div class="Footer-rss">
<a href="/feed.xml">RSS Feed</a>
</div>
</div>
</div>
</footer>
</footer>
</body>
12 changes: 12 additions & 0 deletions _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,17 @@
<head>

<script>
// Immediately apply saved theme before styles load
(function() {
try {
const storedTheme = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = storedTheme || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
} catch (e) {}
})();
</script>

<title>
{% if page.title == "Home" %}
{{ site.data.settings.title }} | {{ site.data.settings.tagline }}
Expand Down
11 changes: 9 additions & 2 deletions _includes/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,25 @@
<div class="Header-logo">
<a href="{{ site.github.url }}/">{{ site.data.settings.title }}</a>
</div>

<nav class="Header-nav">
{% for item in site.data.settings.menu %}
{% if item.external %}
<a href="{{ item.url }}" target="_blank" rel="noopener nofollow">
<a href="{{ item.url }}" target="_blank" rel="noopener nofollow">
{{ item.name }}
</a>
</a>
{% else %}
<a href="{{ site.github.url }}{{ item.url }}">{{ item.name }}</a>
{% endif %}
{% endfor %}

<!-- 🌙☀️ Theme Toggle Button -->
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
🌙
</button>
</nav>
</div>

<div class="Header-border">
==============================================================================================================================================================
</div>
Expand Down
7 changes: 5 additions & 2 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,11 @@

{% include footer.html %}

<div>
</div>

<!-- ✅ Load theme toggle script -->
<script src="{{ '/assets/js/script.js' | relative_url }}" defer></script>

</body>

</html>
</html>
12 changes: 6 additions & 6 deletions assets/css/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.Footer {
margin-top: 2rem;
color: $font-color;
color: var(--font-color);
padding: 2rem;
text-align: center;

Expand All @@ -9,7 +9,7 @@
margin-bottom: 1em;
overflow: hidden;
user-select: none;
color: $font-color;
color: var(--font-color);
}

&-inner {
Expand All @@ -19,16 +19,16 @@
gap: 1rem;

a {
color: $primary-color; // orange
color: var(--primary-color);
opacity: 1;
text-decoration: none;
font-weight: 500;
transition: opacity 0.2s ease, color 0.2s ease;
transition: opacity 0.1s ease, color 0.1s ease;

&:hover {
opacity: 0.9;
color: lighten($primary-color, 10%);
color: var(--link-hover-color, var(--primary-color));
}
}
}
}
}
73 changes: 63 additions & 10 deletions assets/css/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,33 @@
html, body {
font-family: $body-font;
@use './variables' as vars;

$large-screen: 1100px !default;
$mid-screen: 800px !default;
$small-screen: 480px !default;

:root {
/* light theme defaults */
--background-color: #ffffff;
--font-color: #000000;
--primary-color: #F7931A;
--link-hover-color: lighten(#F7931A, 10%);
}

/* dark theme runtime overrides */
body.dark-mode {
--background-color: #000000;
--font-color: #ffffff;
--primary-color: #F7931A;
}

html,
body {
font-family: vars.$body-font;
font-size: 16px;
line-height: 1.5;
background-color: $background-color;
color: $font-color;
background-color: var(--background-color);
color: var(--font-color);

transition: background-color 0.4s ease, color 0.4s ease;

@media (max-width: $large-screen) {
font-size: 14px;
Expand All @@ -16,23 +40,44 @@ html, body {
@media (max-width: $small-screen) {
font-size: 12px;
}

/* ✅ Ensures each page fills the viewport height */
min-height: 100vh;

/* Helps prevent layout shift when footer is short */
display: flex;
flex-direction: column;
}

.Site {
max-width: 880px;
margin: 0 auto;
padding: 2rem;
/* ✅ Make sure the body expands correctly for content and footer */
body {
background-color: var(--background-color);
color: var(--font-color);
flex: 1; /* allow content area to grow */
box-sizing: border-box;
}

a {
color: $primary-color;
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;

&:hover {
color: rgba($primary-color, 0.8);
color: var(--link-hover-color, var(--primary-color));
}
}

/* ✅ Keeps layout centered and responsive */
.Site {
max-width: 880px;
margin: 0 auto;
padding: 2rem;
background-color: var(--background-color);
color: var(--font-color);
flex: 1; /* fills remaining height between header and footer */
transition: background-color 0.4s ease, color 0.4s ease;
}

p {
margin-bottom: 1rem;
}
Expand Down Expand Up @@ -68,3 +113,11 @@ h4 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}

* {
transition: none !important;
}

body.loaded * {
transition: all 0.1s ease;
}
60 changes: 48 additions & 12 deletions assets/css/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
// header.scss

@use 'variables' as vars;

.Header {
margin-bottom: 0.75rem;
background-color: var(--background-color);
color: var(--font-color);
transition: background-color 0.4s ease, color 0.4s ease;

&-border {
opacity: 0.3;
margin-top: 0.4rem;
overflow: hidden;
user-select: none;
color: $font-color; // makes the divider white-ish
color: var(--font-color);
}

&-inner {
Expand All @@ -16,35 +23,64 @@
padding: 1rem 0;
}

&-logo {
font-size: 2.2rem;
color: $font-color; // Make sure logo is visible too
&-logo {
font-size: 2.2rem;
color: #F7931A; // static orange color
transition: color 0.3s ease;

@media (max-width: vars.$small-screen) {
font-size: 1.8rem;
}

a {
color: #F7931A; // ensure link inherits orange color
text-decoration: none;
transition: color 0.3s ease;

@media (max-width: $small-screen) {
font-size: 1.8rem;
&:hover {
color: darken(#F7931A, 10%); // slightly darker orange on hover
}
}
}

.theme-toggle {
background: none;
border: 1px solid var(--primary-color);
color: var(--primary-color);
border-radius: 8px;
padding: 0.4rem 0.8rem;
cursor: pointer;
margin-left: 1.5rem;
font-size: 1.1rem;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;

&:hover {
background: var(--primary-color);
color: var(--background-color); /* stays readable in both modes */
}
}

&-nav {
display: flex;
font-size: 1.3rem;
transition: color 0.3s ease;

@media (max-width: $small-screen) {
@media (max-width: vars.$small-screen) {
font-size: 1.1rem;
}

a {
color: $primary-color; // bright orange
opacity: 1; // fully visible
color: var(--primary-color);
opacity: 1;
margin-left: 1.5rem;
text-decoration: none;
font-weight: 500;
transition: opacity 0.2s ease, color 0.2s ease;
transition: opacity 0.1s ease, color 0.1s ease;

&:hover {
color: lighten($primary-color, 10%);
color: var(--link-hover-color, var(--primary-color));
opacity: 0.9;
}
}
}
}
}
1 change: 1 addition & 0 deletions assets/css/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.Home {
&-about {
font-size: 1.2rem;
font-weight: bold;
}

&-posts {
Expand Down
Loading