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 1 commit 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 all commits
Commits
Show all changes
1 commit
Select commit
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
Copy Markdown
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">
Comment on lines +1 to +4
Copy link

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

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

_includes/footer.html should not introduce <body>, <header>, or <main> tags; this will create invalid HTML (nested/duplicated document structure) when included inside the layout and can break styling and scripts. This include should render only the footer markup (starting at <footer class="Footer">).

Copilot uses AI. Check for mistakes.
<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>
Copy link

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

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

Correct the brand capitalization from "Github" to "GitHub" in the link text.

Suggested change
<a href="https://github.com/BitDevsNBO/bitdevsnbo.org" target="_blank" rel="noopener nofollow">Source available on Github</a>
<a href="https://github.com/BitDevsNBO/bitdevsnbo.org" target="_blank" rel="noopener nofollow">Source available on GitHub</a>

Copilot uses AI. Check for mistakes.
</div>
<div class="Footer-rss">
<a href="/feed.xml">RSS Feed</a>
</div>
</div>
</div>
</footer>
</footer>
</body>
Comment on lines +16 to +17
Copy link

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

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

_includes/footer.html should not introduce <body>, <header>, or <main> tags; this will create invalid HTML (nested/duplicated document structure) when included inside the layout and can break styling and scripts. This include should render only the footer markup (starting at <footer class="Footer">).

Copilot uses AI. Check for mistakes.
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);
Comment on lines +9 to +10
Copy link

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

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

This sets data-theme on <html>, but the updated theme CSS in this PR is driven by body.dark-mode and CSS variables (not [data-theme="dark"]). As a result, the “apply before styles load” step won’t actually affect styling unless you either (a) update CSS to key off html[data-theme="dark"] (or similar), or (b) set the same dark-mode class used by the runtime script.

Suggested change
const theme = storedTheme || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
const theme = storedTheme || (prefersDark ? 'dark' : 'light');
// Keep data-theme for compatibility, but also apply the class used by theme CSS
document.documentElement.setAttribute('data-theme', theme);
if (theme === 'dark') {
document.documentElement.classList.add('dark-mode');
if (document.body) {
document.body.classList.add('dark-mode');
}
} else {
document.documentElement.classList.remove('dark-mode');
if (document.body) {
document.body.classList.remove('dark-mode');
}
}

Copilot uses AI. Check for mistakes.
} catch (e) {}
})();
</script>

<title>
{% if page.title == "Home" %}
{{ site.data.settings.title }} | {{ site.data.settings.tagline }}
Expand Down
2 changes: 1 addition & 1 deletion _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
</div>

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

</body>

Expand Down
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));
}
}
}
}
}
82 changes: 52 additions & 30 deletions assets/css/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,31 @@
$background-light: #ffffff;
$font-light: #000000;
$primary-color-light: #ff7f00;

$background-dark: #000000;
$font-dark: #ffffff;
$primary-color-dark: #ff7f00;
@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: $body-font;
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;

Expand All @@ -27,41 +40,42 @@ 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;
}

/* ✅ Make sure the body expands correctly for content and footer */
body {
background-color: $background-light;
color: $font-light;
background-color: var(--background-color);
color: var(--font-color);
flex: 1; /* allow content area to grow */
box-sizing: border-box;
}

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

&:hover {
color: lighten($primary-color-light, 10%);
}
}

body.dark-mode {
background-color: $background-dark;
color: $font-dark;
}

body.dark-mode a {
color: $primary-color-dark;

&:hover {
color: lighten($primary-color-dark, 10%);
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 {
Expand Down Expand Up @@ -98,4 +112,12 @@ h4 {
font-size: 1.2rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
}

* {
transition: none !important;
}

body.loaded * {
transition: all 0.1s ease;
Comment on lines +117 to +122
Copy link

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

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

Forcing transition: none !important on * and then transition: all on body.loaded * is very expensive (forces style recalculation widely) and also overrides intentional component-level transitions (and transition: all is particularly costly). Prefer scoping this to the properties involved in theme changes (e.g., background-color, color, border-color) and/or applying it only to elements that actually animate for theme switching (or using a body class like body:not(.loaded) to selectively disable).

Suggested change
* {
transition: none !important;
}
body.loaded * {
transition: all 0.1s ease;
body:not(.loaded),
body:not(.loaded) * {
transition: none !important;
}
body.loaded,
body.loaded * {
transition: background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;

Copilot uses AI. Check for mistakes.
}
68 changes: 43 additions & 25 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;
Copy link

Copilot AI Mar 3, 2026

Choose a reason for hiding this comment

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

The variables import path is inconsistent with other files (@use './variables' as vars;). Depending on the Sass load path configuration, @use 'variables' may fail to resolve. Align this to the same relative path used elsewhere to avoid build failures.

Suggested change
@use 'variables' as vars;
@use './variables' as vars;

Copilot uses AI. Check for mistakes.

.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;
color: var(--font-color);
}

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

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

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

.theme-toggle {
background: none;
border: 1px solid $primary-color-dark;
color: $primary-color-dark;
border-radius: 8px;
padding: 0.4rem 0.8rem;
cursor: pointer;
margin-left: 1.5rem;
font-size: 1.1rem;
transition: background 0.2s ease, color 0.2s ease;
a {
color: #F7931A; // ensure link inherits orange color
text-decoration: none;
transition: color 0.3s ease;

&:hover {
background: $primary-color-dark;
color: #000;
&: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;
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
Loading