Merge pull request #901 from nojaf/avoid-flicker

Avoid theme flicker in dark mode.
fsprojects · Feb 8, 2024 · a807ec9 · a807ec9
2 parents a97ca87 + 7b84ed2
commit a807ec9
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 3 deletions.
diff --git a/FSharp.Formatting.sln b/FSharp.Formatting.sln
@@ -125,6 +125,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "content", "content", "{FAD5
 		docs\content\fsdocs-search.js = docs\content\fsdocs-search.js
 		docs\content\fsdocs-tips.js = docs\content\fsdocs-tips.js
 		docs\content\fsdocs-theme-toggle.js = docs\content\fsdocs-theme-toggle.js
+		docs\content\fsdocs-theme-set-dark.js = docs\content\fsdocs-theme-set-dark.js
 	EndProjectSection
 EndProject
 Global

diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 20.0.0-beta-002 - 2024-02-08
+
+### Fixed
+* Avoid theme flicker in dark mode. [#901](https://github.com/fsprojects/FSharp.Formatting/pull/901)
+
 ## 20.0.0-beta-001 - 2024-01-31
 
 ### Changed

diff --git a/docs/_template.html b/docs/_template.html
@@ -21,6 +21,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
     <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
     <link href="{{root}}{{fsdocs-favicon-src}}" rel="icon" sizes="32x32" type="image/png"/>
+    <script type="application/javascript" src="{{root}}content/fsdocs-theme-set-dark.js"></script>
     <link href="{{root}}content/fsdocs-default.css" rel="stylesheet" type="text/css"/>
     <link href="{{root}}content/fsdocs-theme.css" rel="stylesheet" type="text/css"/>
     {{fsdocs-head-extra}}

diff --git a/docs/content/fsdocs-theme-set-dark.js b/docs/content/fsdocs-theme-set-dark.js
@@ -0,0 +1,5 @@
+const prefersDark = window.matchMedia("@media (prefers-color-scheme: dark)").matches;
+let currentTheme = localStorage.getItem('theme') ?? (prefersDark ? 'dark' : 'light');
+if (currentTheme === 'dark') {
+    window.document.documentElement.setAttribute("data-theme", 'dark');
+}
diff --git a/docs/content/fsdocs-theme-toggle.js b/docs/content/fsdocs-theme-toggle.js
@@ -2,9 +2,6 @@
 
 const prefersDark = window.matchMedia("@media (prefers-color-scheme: dark)").matches;
 let currentTheme = localStorage.getItem('theme') ?? (prefersDark ? 'dark' : 'light');
-if (currentTheme === 'dark') {
-    window.document.documentElement.setAttribute("data-theme", 'dark');
-}
 
 export class ThemeToggle extends LitElement {
     static properties = {