moved theme-detector to public folder

README.md

@@ -9,9 +9,9 @@ Personal website created with Astro.
 
 - [x] HTML layout
 - [x] Adaptive & Responsive layout
-- [ ] Dark/Light Theme
+- [x] Search articles by title or description
+- [x] Dark/Light Theme
 - [ ] Multilang web-site
-- [ ] Search articles by title or description
 - [ ] Form handling via Netlify Forms
 - [ ] SEO optimized
 

package.json

@@ -12,7 +12,7 @@
 	"scripts": {
 		"dev": "astro dev --host",
 		"start": "astro dev",
-		"build": "astro check && tsc --noEmit && astro build",
+		"build": "astro build",
 		"preview": "astro preview --host",
 		"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
 		"lint": "eslint '**/*.{js,mjs,ts,tsx}'"

public/assets/js/detect-theme.js

@@ -0,0 +1,23 @@
+/**
+ * This script is used to determine the theme of the site.
+ * The theme value is taken from localstorage, otherwise from the operating system.
+ * It is very important to include this script before loading the CSS
+ * and body markup to prevent FOUC (Flash of unstyled content).
+ */
+
+const getTheme = () => {
+	const local = localStorage.getItem('theme');
+	if (local && (local === 'dark' || local === 'light')) return local;
+	const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+	return isDark ? 'dark' : 'light';
+};
+
+window.theme = getTheme();
+document.documentElement.setAttribute('data-theme', window.theme);
+
+/* Sync with OS theme */
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
+	window.theme = isDark ? 'dark' : 'light';
+	localStorage.setItem('theme', window.theme);
+	document.documentElement.setAttribute('data-theme', window.theme);
+});

src/components/BaseHead.astro

@@ -1,6 +1,5 @@
 ---
 import { SITE_METADATA } from '@root/config';
-import { DetectThemeScript } from '@root/scripts';
 
 export interface Props {
 	title?: string | undefined;
@@ -13,8 +12,6 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
 <link rel='preconnect' href='https://fonts.googleapis.com' />
 <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
 <link href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap' rel='stylesheet' />
-<!-- <link rel='stylesheet' href='assets/dark.css' media='(prefers-color-scheme: dark)' /> -->
-<!-- <link rel='stylesheet' href='assets/light.css' media='(prefers-color-scheme: light)' /> -->
 
 <meta charset='utf-8' />
 <meta name='viewport' content='width=device-width, initial-scale=1' />
@@ -23,7 +20,7 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
 </title>
 <meta name='title' content={title} />
 <meta name='description' content={description || SITE_METADATA.description} />
+<script is:inline src='assets/js/detect-theme.js'>
 
-<!-- This script will prevent FOUC -->
-<DetectThemeScript />
+</script>
 <slot></slot>

src/components/Header/Header.astro

@@ -38,7 +38,7 @@ const { pathname } = Astro.canonicalURL;
 					<Icon name='telegram' width='18' height='18' />
 				</a>
 			</div>
-			<ThemeSwitcher client:load />
+			<ThemeSwitcher client:visible />
 		</nav>
 		<NavToggle client:visible />
 	</div>

src/components/ThemeSwticher/ThemeSwitcher.tsx

@@ -26,7 +26,9 @@ const ThemeSwitcher: Component = () => {
 	const [theme, setTheme] = createSignal<ThemeModeType>(SITE_SETTINGS.defaultTheme);
 	const [isReady, setIsReady] = createSignal<boolean>(false);
 
-	const toggleTheme: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (e) => {
+	const toggleTheme: JSX.EventHandler<HTMLButtonElement, MouseEvent> = () => {
+		if (!window.theme) return;
+
 		const newTheme = theme() === 'light' ? 'dark' : 'light';
 		setTheme(newTheme);
 		localStorage.setItem('theme', newTheme);
@@ -46,7 +48,7 @@ const ThemeSwitcher: Component = () => {
 	});
 
 	return (
-		<button onClick={toggleTheme} class={isReady() ? 'theme-switcher ready' : 'theme-switcher'}>
+		<button onClick={toggleTheme} class={isReady() ? 'theme-switcher ready' : 'theme-switcher'} aria-label={theme()}>
 			<Switch
 				children={
 					<>

src/layouts/article.astro

@@ -18,8 +18,8 @@ const { lang = 'ru', content } = Astro.props as Props;
 <html lang={lang}>
 	<head>
 		<BaseHead title={content.title}>
-			<link rel='stylesheet' href='assets/prism-one-dark.min.css' media='(prefers-color-scheme: dark)' />
-			<link rel='stylesheet' href='assets/prism-one-light.min.css' media='(prefers-color-scheme: light)' />
+			<link rel='stylesheet' href='assets/css/prism-one-dark.min.css' media='(prefers-color-scheme: dark)' />
+			<link rel='stylesheet' href='assets/css/prism-one-light.min.css' media='(prefers-color-scheme: light)' />
 		</BaseHead>
 	</head>
 

src/scripts/detect-theme.astro

@@ -1,20 +0,0 @@
-<script is:inline>
-	const THEME_STORAGE_KEY = 'theme';
-
-	const getTheme = () => {
-		const local = localStorage.getItem(THEME_STORAGE_KEY);
-		if (local && (local === 'dark' || local === 'light')) return local;
-		const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		return isDark ? 'dark' : 'light';
-	};
-
-	window.theme = getTheme();
-	document.documentElement.setAttribute('data-theme', theme);
-
-	/* Sync with OS theme */
-	window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({ matches: isDark }) => {
-		window.theme = isDark ? 'dark' : 'light';
-		localStorage.setItem(THEME_STORAGE_KEY, theme);
-		document.documentElement.setAttribute('data-theme', theme);
-	});
-</script>

src/scripts/index.ts

@@ -1 +0,0 @@
-export { default as DetectThemeScript } from './detect-theme.astro';

src/types/main.d.ts

@@ -32,8 +32,4 @@ declare global {
 	};
 
 	type ThemeModeType = 'light' | 'dark';
-
-	type SiteConfigType = {
-		defaultTheme: ThemeModeType;
-	};
 }