iamhectorsosa/Layout.astro

## astro.config.mjs
import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind({
    applyBaseStyles: false
  }), react()]
});

## Layout.astro
---
import "@/styles/global.css";
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<script is:inline>
  const getThemePreference = () => {
    if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
      return localStorage.getItem("theme");
    }
    return window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  };
  const isDark = getThemePreference() === "dark";
  document.documentElement.classList[isDark ? "add" : "remove"]("dark");

  if (typeof localStorage !== "undefined") {
    const observer = new MutationObserver(() => {
      const isDark = document.documentElement.classList.contains("dark");
      localStorage.setItem("theme", isDark ? "dark" : "light");
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    });
  }
</script>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
    <title>{title}</title>
  </head>
  <body>
    <slot />
  </body>
</html>
<style is:global>
  :root {
    --accent: 136, 58, 234;
    --accent-light: 224, 204, 250;
    --accent-dark: 49, 10, 101;
    --accent-gradient: linear-gradient(
      45deg,
      rgb(var(--accent)),
      rgb(var(--accent-light)) 30%,
      white 60%
    );
  }
  html {
    font-family: system-ui, sans-serif;
    background: #13151a;
    background-size: 224px;
  }
  code {
    font-family:
      Menlo,
      Monaco,
      Lucida Console,
      Liberation Mono,
      DejaVu Sans Mono,
      Bitstream Vera Sans Mono,
      Courier New,
      monospace;
  }
</style>

## tsconfig.json
{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "jsx": "react-jsx"
  }
}
	import { defineConfig } from "astro/config";
	import tailwind from "@astrojs/tailwind";

	import react from "@astrojs/react";

	// https://astro.build/config
	export default defineConfig({
	integrations: [tailwind({
	applyBaseStyles: false
	}), react()]
	});
	---
	import "@/styles/global.css";
	interface Props {
	title: string;
	}

	const { title } = Astro.props;
	---

	<script is:inline>
	const getThemePreference = () => {
	if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) {
	return localStorage.getItem("theme");
	}
	return window.matchMedia("(prefers-color-scheme: dark)").matches
	? "dark"
	: "light";
	};
	const isDark = getThemePreference() === "dark";
	document.documentElement.classList[isDark ? "add" : "remove"]("dark");

	if (typeof localStorage !== "undefined") {
	const observer = new MutationObserver(() => {
	const isDark = document.documentElement.classList.contains("dark");
	localStorage.setItem("theme", isDark ? "dark" : "light");
	});
	observer.observe(document.documentElement, {
	attributes: true,
	attributeFilter: ["class"],
	});
	}
	</script>

	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="description" content="Astro description" />
	<meta name="viewport" content="width=device-width" />
	<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
	<meta name="generator" content={Astro.generator} />
	<title>{title}</title>
	</head>
	<body>
	<slot />
	</body>
	</html>
	<style is:global>
	:root {
	--accent: 136, 58, 234;
	--accent-light: 224, 204, 250;
	--accent-dark: 49, 10, 101;
	--accent-gradient: linear-gradient(
	45deg,
	rgb(var(--accent)),
	rgb(var(--accent-light)) 30%,
	white 60%
	);
	}
	html {
	font-family: system-ui, sans-serif;
	background: #13151a;
	background-size: 224px;
	}
	code {
	font-family:
	Menlo,
	Monaco,
	Lucida Console,
	Liberation Mono,
	DejaVu Sans Mono,
	Bitstream Vera Sans Mono,
	Courier New,
	monospace;
	}
	</style>
	{
	"extends": "astro/tsconfigs/strict",
	"compilerOptions": {
	"baseUrl": ".",
	"paths": {
	"@/": ["src/"]
	},
	"jsx": "react-jsx"
	}
	}