Skip to content

Commit 2f6f362

Browse files
YonatanE22YonatanE22
authored
Merge pull request #128 from FhenixProtocol/darkmode-refresh-fix
[APPS-84] Fix text color change after refresh
2 parents 3bc51bd + e599f3a commit 2f6f362

File tree

5 files changed

+96
-87
lines changed

5 files changed

+96
-87
lines changed

‎docusaurus.config.ts‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,19 @@ const config: Config = {
1313
title: 'Fhenix',
1414
tagline: 'Unlock Onchain Confidentiality on Ethereum',
1515
favicon: 'img/Favicon_Dark.svg',
16+
17+
headTags: [
18+
{
19+
tagName: 'script',
20+
attributes: {},
21+
innerHTML: `
22+
(function() {
23+
const theme = localStorage.getItem('theme') || 'light';
24+
document.documentElement.setAttribute('data-theme', theme);
25+
})();
26+
`,
27+
},
28+
],
1629

1730
// Set the production url of your site here
1831
url: 'https://fhenixprotocol.github.io',
@@ -47,13 +60,14 @@ const config: Config = {
4760
],
4861

4962
scripts: [
50-
{
51-
src: '/scripts/styled-components-fix.js',
52-
async: true,
53-
},
5463
{
5564
src: '/scripts/theme-fix.js',
5665
async: false,
66+
defer: false,
67+
},
68+
{
69+
src: '/scripts/styled-components-fix.js',
70+
async: true,
5771
},
5872
],
5973

‎src/components/HomepageFeatures/index.tsx‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import clsx from 'clsx';
22
import Heading from '@theme/Heading';
33
import styles from './styles.module.css';
44
import React from "react";
5-
import { useColorMode } from '@docusaurus/theme-common';
65
import Link from "@docusaurus/Link";
76

87
type FeatureItem = {
@@ -65,20 +64,19 @@ const FeatureList: FeatureItem[] = [
6564
];
6665

6766
function Feature({title, Svg, description, linkTo, buttonTitle}: FeatureItem) {
68-
const { colorMode } = useColorMode();
6967
const svgClassName = `${styles.featureSvg} white-image`;
7068

7169
return (
72-
<div className={clsx("card", styles.custom__card)} style={{ height: '100%' , color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}>
70+
<div className={clsx("card", styles.custom__card)} style={{ height: '100%' }}>
7371
<div className="card__body custom__body_flex">
7472
<div>
75-
<Svg className={svgClassName} role="img" style={{ color: colorMode === 'dark' ? '#E6F7FF' : '#001623' }}/>
73+
<Svg className={svgClassName} role="img" />
7674
</div>
7775

78-
<Heading as="h2" className="" style={{ fontSize: 22 , color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}} >{title}</Heading>
79-
<p>{description}</p>
80-
<div className="row" style={{ flex: 1 , color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}></div>
81-
<div style={{ width: '100%', display: 'flex', justifyContent: 'start' , color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}>
76+
<Heading as="h2" className="card__title" style={{ fontSize: 22 }} >{title}</Heading>
77+
<p className="card__description">{description}</p>
78+
<div className="row" style={{ flex: 1 }}></div>
79+
<div style={{ width: '100%', display: 'flex', justifyContent: 'start' }}>
8280
<Link
8381
className='tutorial-button minimum'
8482
to={linkTo}>
@@ -91,7 +89,6 @@ function Feature({title, Svg, description, linkTo, buttonTitle}: FeatureItem) {
9189
}
9290

9391
export default function HomepageFeatures(): JSX.Element {
94-
const { colorMode } = useColorMode();
9592
return (
9693
<section className={styles.features} style={{ position: 'relative', overflow: 'visible'}}>
9794

@@ -141,7 +138,7 @@ export default function HomepageFeatures(): JSX.Element {
141138
</Heading>
142139
</div>
143140
{/* style={{ gap: "20px"}} */}
144-
<div className="row feature_container" style={{ gap: "20px", justifyContent: "space-between" , color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}>
141+
<div className="row feature_container" style={{ gap: "20px", justifyContent: "space-between" }}>
145142
{FeatureList.map((props, idx) => (
146143
<div key={idx} style={{ padding: '0px' }} className="col col--3">
147144
<Feature {...props} />
@@ -173,9 +170,9 @@ export default function HomepageFeatures(): JSX.Element {
173170
</Heading>
174171
</div>
175172
<div className="row" style={{display: 'flex', flexDirection: 'row', justifyContent: 'center', marginTop: '40px', gap: '20px'}}>
176-
<div className={clsx("card", styles.custom__card_1)} style={{ height: '200px', width: '500px', padding: '20px' , color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}>
177-
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold', color: colorMode === 'dark' ? '#E6F7FF' : '#001623' }}>Fhenix Developer Updates</div>
178-
<div style={{ color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}>Stay up-to-date on the latest Fhenix developer news</div>
173+
<div className={clsx("card", styles.custom__card_1)} style={{ height: '200px', width: '500px', padding: '20px' }}>
174+
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold' }}>Fhenix Developer Updates</div>
175+
<div>Stay up-to-date on the latest Fhenix developer news</div>
179176
<div className="row" style={{ flex: 1 }}></div>
180177
<div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: '10px' }}>
181178
<Link
@@ -186,9 +183,9 @@ export default function HomepageFeatures(): JSX.Element {
186183
</div>
187184

188185
</div>
189-
<div className={clsx("card", styles.custom__card_1)} style={{ height: '200px', width: '500px', padding: '20px', color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}>
190-
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold', color: colorMode === 'dark' ? '#E6F7FF' : '#001623' }}>Even More Resources</div>
191-
<div style={{ color: colorMode === 'dark' ? '#E6F7FF' : '#001623'}}>Hear from Fhenix co-founders, engineering and research teams, ecosystem projects, and more. Join us!</div>
186+
<div className={clsx("card", styles.custom__card_1)} style={{ height: '200px', width: '500px', padding: '20px' }}>
187+
<div className="orb-font" style={{ fontSize: 26, fontWeight: 'bold' }}>Even More Resources</div>
188+
<div>Hear from Fhenix co-founders, engineering and research teams, ecosystem projects, and more. Join us!</div>
192189
<div className="row" style={{ flex: 1 }}></div>
193190
<div style={{ display: 'flex', justifyContent: 'flex-start', marginTop: '10px' }}>
194191

‎src/css/custom.css‎

Lines changed: 31 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -582,27 +582,11 @@ html[data-theme='dark'] .header-github-link:before {
582582
max-width: 65%;
583583
}
584584

585-
/* CSS-only logo switching to prevent hydration issues */
586-
.fhenix-logo {
587-
/* Default to dark logo for light mode */
588-
content: url("/img/assets/dark-text-logo.svg");
589-
}
590-
591-
[data-theme='dark'] .fhenix-logo {
592-
/* Switch to white logo for dark mode */
593-
content: url("/img/assets/white-text-logo.svg");
594-
}
585+
/* Keep logo styling simple */
595586

596587
.page-cover-image {
597588
/*margin-top: 40px;*/
598589
opacity: 0.2;
599-
/* Default to light book image */
600-
content: url("/img/BookLight.svg");
601-
}
602-
603-
[data-theme='dark'] .page-cover-image {
604-
/* Switch to dark book image for dark mode */
605-
content: url("/img/BookDark.svg");
606590
}
607591

608592
img[alt=Bullet] { width: 18px; }
@@ -883,53 +867,57 @@ pre code[class*="language-"]{
883867
}
884868

885869
/* CSS-only fallbacks for card text that depends on JavaScript colorMode */
886-
/* Target card body and all text elements within */
887-
.custom__card .card__body,
888-
.custom__card_1 .card__body {
889-
color: #001623; /* Default light mode color */
870+
/* More aggressive selectors to override inline styles */
871+
872+
/* Light mode - default colors */
873+
[data-theme='light'] .custom__card,
874+
[data-theme='light'] .custom__card_1,
875+
[data-theme='light'] .custom__card .card__body,
876+
[data-theme='light'] .custom__card_1 .card__body {
877+
color: #001623 !important;
890878
}
891879

880+
[data-theme='light'] .custom__card h2,
881+
[data-theme='light'] .custom__card_1 h2,
882+
[data-theme='light'] .custom__card .card__body h2,
883+
[data-theme='light'] .custom__card_1 .card__body h2 {
884+
color: #001623 !important;
885+
}
886+
887+
[data-theme='light'] .custom__card p,
888+
[data-theme='light'] .custom__card_1 p,
889+
[data-theme='light'] .custom__card .card__body p,
890+
[data-theme='light'] .custom__card_1 .card__body p {
891+
color: #001623 !important;
892+
}
893+
894+
[data-theme='light'] .custom__card svg,
895+
[data-theme='light'] .custom__card_1 svg {
896+
color: #001623 !important;
897+
}
898+
899+
/* Dark mode - light colors */
900+
[data-theme='dark'] .custom__card,
901+
[data-theme='dark'] .custom__card_1,
892902
[data-theme='dark'] .custom__card .card__body,
893903
[data-theme='dark'] .custom__card_1 .card__body {
894904
color: #E6F7FF !important;
895905
}
896906

897-
/* Target headings specifically */
898-
.custom__card h2,
899-
.custom__card_1 h2,
900-
.custom__card .card__body h2,
901-
.custom__card_1 .card__body h2 {
902-
color: #001623 !important; /* Default light mode color with !important to override inline styles */
903-
}
904-
905907
[data-theme='dark'] .custom__card h2,
906908
[data-theme='dark'] .custom__card_1 h2,
907909
[data-theme='dark'] .custom__card .card__body h2,
908910
[data-theme='dark'] .custom__card_1 .card__body h2 {
909911
color: #E6F7FF !important;
910912
}
911913

912-
/* Target paragraphs specifically */
913-
.custom__card p,
914-
.custom__card_1 p,
915-
.custom__card .card__body p,
916-
.custom__card_1 .card__body p {
917-
color: #001623 !important; /* Default light mode color with !important to override inline styles */
918-
}
919-
920914
[data-theme='dark'] .custom__card p,
921915
[data-theme='dark'] .custom__card_1 p,
922916
[data-theme='dark'] .custom__card .card__body p,
923917
[data-theme='dark'] .custom__card_1 .card__body p {
924918
color: #E6F7FF !important;
925919
}
926920

927-
/* Fix SVG icons in cards */
928-
.custom__card svg,
929-
.custom__card_1 svg {
930-
color: #001623 !important; /* Default light mode color */
931-
}
932-
933921
[data-theme='dark'] .custom__card svg,
934922
[data-theme='dark'] .custom__card_1 svg {
935923
color: #E6F7FF !important;

‎src/pages/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ console.log("v0.1");
2828

2929
function HomepageHeader() {
3030
const {siteConfig} = useDocusaurusContext();
31-
const { colorMode } = useColorMode();
3231

3332
return (
3433
<header style={{ zIndex: 1, position: 'relative' }} className={clsx('hero hero--primary', styles.heroBanner)}>
@@ -40,13 +39,13 @@ function HomepageHeader() {
4039

4140
<Heading as="h1" className="hero__title">
4241
{ /* siteConfig.title */}
43-
<img className="fhenix-logo" alt="fhenix image" src={colorMode === 'dark' ? "img/assets/white-text-logo.svg" : "img/assets/dark-text-logo.svg"}/>
42+
<img className="fhenix-logo" alt="fhenix image" src="img/assets/dark-text-logo.svg"/>
4443
</Heading>
4544
</div>
4645
<div className="row">
4746
{/* <p className="hero__subtitle">{siteConfig.tagline}</p> */}
4847
<p className="home__description">
49-
<span style={{ color: colorMode === 'dark' ? '#E6F7FF' : '#00162399' }}>Tools and resources to help you build, launch, and grow your app on Fhenix.</span>
48+
<span>Tools and resources to help you build, launch, and grow your app on Fhenix.</span>
5049
</p>
5150
</div>
5251
<div className={clsx("row", styles.ButtonRow)} style={{ marginLeft: -30 , gap: '31px'}}>
@@ -99,7 +98,7 @@ function HomepageHeader() {
9998

10099
<div className="hide-small-width" style={{marginTop: "40px", position: 'relative', overflow: 'visible'}}>
101100
{/* <div className="" style={{marginTop: "-100px"}}> */}
102-
{ (colorMode === 'dark') ? <img className="page-cover-image" alt="fhenix stuttershock image" src="img/BookDark.svg" style={{maxWidth: '600px'}}/> : <img className="page-cover-image" alt="fhenix stuttershock image" src="img/BookLight.svg" style={{maxWidth: '600px'}}/>}
101+
<img className="page-cover-image" alt="fhenix stuttershock image" src="img/BookLight.svg" style={{maxWidth: '600px'}}/>
103102
<div style={{
104103
position: 'absolute',
105104
top: '-25%',

‎static/scripts/theme-fix.js‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,53 @@
33
// Check if we're in a browser environment
44
if (typeof window === 'undefined') return;
55

6-
function applyTheme() {
7-
// Get the stored theme preference (Docusaurus uses 'theme' key)
6+
function getTheme() {
87
const storedTheme = localStorage.getItem('theme');
98
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
9+
return storedTheme || (prefersDark ? 'dark' : 'light');
10+
}
11+
12+
function updateImages(theme) {
13+
// Update logo
14+
const logos = document.querySelectorAll('.fhenix-logo');
15+
logos.forEach(function(logo) {
16+
logo.src = theme === 'dark'
17+
? '/img/assets/white-text-logo.svg'
18+
: '/img/assets/dark-text-logo.svg';
19+
});
1020

11-
// Determine the theme to apply
12-
let theme = 'light'; // default
13-
if (storedTheme) {
14-
theme = storedTheme;
15-
} else if (prefersDark) {
16-
theme = 'dark';
17-
}
18-
19-
// Apply the theme immediately to prevent FOUC
20-
document.documentElement.setAttribute('data-theme', theme);
21+
// Update book image
22+
const bookImages = document.querySelectorAll('.page-cover-image');
23+
bookImages.forEach(function(bookImage) {
24+
bookImage.src = theme === 'dark'
25+
? '/img/BookDark.svg'
26+
: '/img/BookLight.svg';
27+
});
28+
}
29+
30+
function applyTheme() {
31+
const theme = getTheme();
2132

22-
// Also apply to body for additional compatibility
23-
if (document.body) {
24-
document.body.setAttribute('data-theme', theme);
25-
}
33+
// Update images immediately if they exist
34+
updateImages(theme);
2635

2736
return theme;
2837
}
2938

3039
// Apply theme immediately
31-
const currentTheme = applyTheme();
40+
let currentTheme = applyTheme();
3241

33-
// Also apply when DOM is ready (for additional safety)
42+
// Reapply when DOM is fully ready (catches images that load during page construction)
3443
if (document.readyState === 'loading') {
35-
document.addEventListener('DOMContentLoaded', applyTheme);
44+
document.addEventListener('DOMContentLoaded', function() {
45+
currentTheme = applyTheme();
46+
});
3647
}
3748

3849
// Listen for storage changes to sync across tabs
3950
window.addEventListener('storage', function(e) {
4051
if (e.key === 'theme') {
41-
applyTheme();
52+
currentTheme = applyTheme();
4253
}
4354
});
4455
})();

0 commit comments

Comments
 (0)