move ThemeScript inside head and solve white flash in Firefox

Author: nemanjam

.github/workflows/bash__deploy-docker.yml

@@ -5,7 +5,7 @@ on:
     workflows:
       - 'Build and push Docker'
     types:
-      - success
+      - completed
 
   workflow_dispatch:
 

docs/working-notes/todo3.md

@@ -503,5 +503,7 @@ https://github.com/sindresorhus/github-markdown-css
 table of contents id links
 a href open in new tab
 fix links page links color for history back view transition
+
+refactor theme script, osDefaultMode, appDefaultMode, storedMode
 ------------
 ```

src/components/BaseHead.astro

@@ -4,6 +4,7 @@ import '@/styles/main.css';
 
 import { ViewTransitions } from 'astro:transitions';
 
+import ThemeScript from '@/components/ThemeScript.astro';
 import { DEFAULT_METADATA } from '@/constants/metadata';
 import { ROUTES } from '@/constants/routes';
 import { CONFIG } from '@/config';
@@ -41,6 +42,7 @@ const ogImageUrl = new URL(image, url);
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
 
+  {/* wrong, set from theme toggle */}
   <meta name="theme-color" content="#c1ddf9" media="(prefers-color-scheme: light)" />
   <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)" />
 
@@ -108,6 +110,8 @@ const ogImageUrl = new URL(image, url);
   <script src="set-url-here" crossorigin="anonymous"></script>
  -->
 
+  <ThemeScript />
+
   <ViewTransitions fallback="none" />
 
   <!-- 

src/layouts/Base.astro

@@ -5,7 +5,6 @@ import BaseHead from '@/components/BaseHead.astro';
 import Footer from '@/components/Footer.astro';
 import Header from '@/components/Header.astro';
 import ScrollToTop from '@/components/react/ScrollToTop';
-import ThemeScript from '@/components/ThemeScript.astro';
 
 import type { BaseHeadProps } from '@/components/BaseHead.astro';
 
@@ -24,7 +23,5 @@ const { metadata } = Astro.props as BaseProps;
     <ScrollToTop client:only="react">
       <Icon name="mdi:arrow-up-thin" class="h-10 w-10 text-content hover:text-links-hover" />
     </ScrollToTop>
-
-    <ThemeScript />
   </body>
 </html>