Skip to content

Commit 3bc51bd

Browse files
tovi-fhetovi-fhe
authored
Merge pull request #127 from FhenixProtocol/darkmode-fix
[APPS-84] Fix some darkmode issues
2 parents 08bc2ce + 9b60924 commit 3bc51bd

File tree

3 files changed

+214
-15
lines changed

3 files changed

+214
-15
lines changed

‎docusaurus.config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@ const config: Config = {
5151
src: '/scripts/styled-components-fix.js',
5252
async: true,
5353
},
54+
{
55+
src: '/scripts/theme-fix.js',
56+
async: false,
57+
},
5458
],
5559

5660
presets: [
@@ -93,6 +97,9 @@ const config: Config = {
9397
// Replace with your project's social card
9498
image: 'img/Splash.webp',
9599
colorMode: {
100+
defaultMode: 'light',
101+
disableSwitch: false,
102+
respectPrefersColorScheme: true,
96103
},
97104
navbar: {
98105
title: 'Fhenix Docs',

‎src/css/custom.css‎

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

585-
.fhenix-logo {
586-
/*filter: brightness(0) saturate(100%) invert(28%) sepia(94%) saturate(1960%) hue-rotate(197deg) brightness(97%) contrast(101%);*/
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");
587594
}
588595

589596
.page-cover-image {
590597
/*margin-top: 40px;*/
591598
opacity: 0.2;
599+
/* Default to light book image */
600+
content: url("/img/BookLight.svg");
592601
}
593602

594-
html[data-theme='light'] .page-cover-image {
595-
/* filter: brightness(0) saturate(100%) invert(28%) sepia(94%) saturate(1960%) hue-rotate(197deg) brightness(97%) contrast(101%); */
603+
[data-theme='dark'] .page-cover-image {
604+
/* Switch to dark book image for dark mode */
605+
content: url("/img/BookDark.svg");
596606
}
597607

598608
img[alt=Bullet] { width: 18px; }
@@ -744,16 +754,16 @@ pre code:has(.code-block-diff-remove-line) {
744754
}
745755

746756
[data-theme='dark']{
747-
--code-bg:#061d2b;
748-
--code-border:rgba(250,250,250,.08);
749-
--code-text:#fafafa;
750-
--code-shadow:0 10px 28px rgba(0,0,0,.45);
757+
--code-bg:#061d2b !important;
758+
--code-border:rgba(250,250,250,.08) !important;
759+
--code-text:#fafafa !important;
760+
--code-shadow:0 10px 28px rgba(0,0,0,.45) !important;
751761

752-
--title-bg:#001623;
753-
--title-text:#fafafa;
762+
--title-bg:#001623 !important;
763+
--title-text:#fafafa !important;
754764

755-
--copy-bg:#0ad9dc;
756-
--copy-text:#001623;
765+
--copy-bg:#0ad9dc !important;
766+
--copy-text:#001623 !important;
757767
}
758768

759769
/* Card */
@@ -787,7 +797,7 @@ pre code:has(.code-block-diff-remove-line) {
787797
.theme-code-block .prism-code,
788798
pre code[class*="language-"]{
789799
background: var(--code-bg) !important;
790-
color:var(--code-text);
800+
color:var(--code-text) !important;
791801
/* Correct, modern mono stack (Geist/JetBrains first if present) */
792802
font-family:"Inter", "Geist Mono","JetBrains Mono","Fira Code",
793803
ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,monospace;
@@ -798,6 +808,24 @@ pre code[class*="language-"]{
798808
-webkit-font-smoothing:antialiased;
799809
}
800810

811+
/* Explicit dark mode styles for code blocks to ensure production compatibility */
812+
[data-theme='dark'] .theme-code-block {
813+
background: #061d2b !important;
814+
border-color: rgba(250,250,250,.08) !important;
815+
}
816+
817+
[data-theme='dark'] .theme-code-block .prism-code,
818+
[data-theme='dark'] pre code[class*="language-"] {
819+
background: #061d2b !important;
820+
color: #fafafa !important;
821+
}
822+
823+
[data-theme='dark'] .theme-code-block-title {
824+
background: #001623 !important;
825+
color: #fafafa !important;
826+
border-bottom-color: rgba(250,250,250,.08) !important;
827+
}
828+
801829
/* Ensure wrapping looks good */
802830
.theme-code-block .prism-code{ white-space:pre-wrap; word-break:break-word; }
803831

@@ -828,6 +856,126 @@ pre code[class*="language-"]{
828856
border-radius:6px;
829857
font-size:.88em;
830858
}
859+
860+
/* Explicit dark mode styles for inline code */
861+
[data-theme='dark'] :not(pre)>code {
862+
background: #001623 !important;
863+
color: #fafafa !important;
864+
border-color: rgba(250,250,250,.08) !important;
865+
}
866+
867+
/* Additional dark mode fixes for production builds - targeting specific elements only */
868+
[data-theme='dark'] .main-wrapper {
869+
background-color: #001623 !important;
870+
}
871+
872+
[data-theme='dark'] .docusaurus-highlight-code-line {
873+
background-color: rgba(255, 255, 255, 0.08) !important;
874+
}
875+
876+
/* Fix homepage FOUC issues by providing CSS-only dark mode styles */
877+
[data-theme='dark'] .home__description span {
878+
color: #E6F7FF !important;
879+
}
880+
881+
[data-theme='light'] .home__description span {
882+
color: #00162399 !important;
883+
}
884+
885+
/* 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 */
890+
}
891+
892+
[data-theme='dark'] .custom__card .card__body,
893+
[data-theme='dark'] .custom__card_1 .card__body {
894+
color: #E6F7FF !important;
895+
}
896+
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+
905+
[data-theme='dark'] .custom__card h2,
906+
[data-theme='dark'] .custom__card_1 h2,
907+
[data-theme='dark'] .custom__card .card__body h2,
908+
[data-theme='dark'] .custom__card_1 .card__body h2 {
909+
color: #E6F7FF !important;
910+
}
911+
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+
920+
[data-theme='dark'] .custom__card p,
921+
[data-theme='dark'] .custom__card_1 p,
922+
[data-theme='dark'] .custom__card .card__body p,
923+
[data-theme='dark'] .custom__card_1 .card__body p {
924+
color: #E6F7FF !important;
925+
}
926+
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+
933+
[data-theme='dark'] .custom__card svg,
934+
[data-theme='dark'] .custom__card_1 svg {
935+
color: #E6F7FF !important;
936+
}
937+
938+
/* Homepage feature cards - removed redundant styles as they're already handled in styles.module.css */
939+
940+
/* Ensure proper background for the entire page */
941+
[data-theme='dark'] html {
942+
background: linear-gradient(270deg, #00253d, #001724) !important;
943+
}
944+
945+
[data-theme='light'] html {
946+
background: #fafafa !important;
947+
}
948+
949+
/* Fix "Useful Links" and "Connect With US" headings - only dark mode override needed */
950+
[data-theme='dark'] .orb-font {
951+
color: #fafafa !important;
952+
}
953+
954+
/* Fix feature container text colors - only dark mode override needed */
955+
[data-theme='dark'] .feature_container {
956+
color: #E6F7FF !important;
957+
}
958+
959+
/* Target only main content text, not admonitions or special elements */
960+
[data-theme='dark'] .theme-doc-markdown.markdown > p,
961+
[data-theme='dark'] .theme-doc-markdown.markdown > ul li,
962+
[data-theme='dark'] .theme-doc-markdown.markdown > ol li {
963+
color: #fafafa !important;
964+
}
965+
966+
/* Ensure admonitions work properly in dark mode */
967+
[data-theme='dark'] .theme-admonition {
968+
background: var(--admo-bg) !important;
969+
}
970+
971+
[data-theme='dark'] .theme-admonition [class^="admonitionHeading"],
972+
[data-theme='dark'] .theme-admonition [class^="admonitionContent"] {
973+
color: var(--admo-text) !important;
974+
}
975+
976+
[data-theme='dark'] .theme-admonition [class^="admonitionContent"] p {
977+
color: var(--admo-text) !important;
978+
}
831979
/* notes styling */
832980

833981
/* ===== Brand-style Admonitions (bubble card) ===== */
@@ -844,8 +992,8 @@ pre code[class*="language-"]{
844992
}
845993

846994
[data-theme='dark']{
847-
--admo-text: #fafafa;
848-
--admo-bg: #122530;
995+
--admo-text: #fafafa !important;
996+
--admo-bg: #122530 !important;
849997
}
850998

851999
/* Base card polish */

‎static/scripts/theme-fix.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
// Theme fix script to prevent FOUC (Flash of Unstyled Content)
2+
(function() {
3+
// Check if we're in a browser environment
4+
if (typeof window === 'undefined') return;
5+
6+
function applyTheme() {
7+
// Get the stored theme preference (Docusaurus uses 'theme' key)
8+
const storedTheme = localStorage.getItem('theme');
9+
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
10+
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+
22+
// Also apply to body for additional compatibility
23+
if (document.body) {
24+
document.body.setAttribute('data-theme', theme);
25+
}
26+
27+
return theme;
28+
}
29+
30+
// Apply theme immediately
31+
const currentTheme = applyTheme();
32+
33+
// Also apply when DOM is ready (for additional safety)
34+
if (document.readyState === 'loading') {
35+
document.addEventListener('DOMContentLoaded', applyTheme);
36+
}
37+
38+
// Listen for storage changes to sync across tabs
39+
window.addEventListener('storage', function(e) {
40+
if (e.key === 'theme') {
41+
applyTheme();
42+
}
43+
});
44+
})();

0 commit comments

Comments
 (0)