feat: add theme switcher

Signed-off-by: rajput-hemant <rajput.hemant2001@gmail.com>

Author: rajput-hemant

.prettierrc.mjs

@@ -17,13 +17,15 @@ const config = {
     "<THIRD_PARTY_MODULES>",
     "",
     "^types$",
-    "^@/types/(.*)$",
-    "^@/store/?(.*)$",
-    "^@/config/(.*)$",
-    "^@/lib/(.*)$",
-    "^@/hooks/?(.*)$",
-    "^@/components/(.*)$",
-    "^@/styles/(.*)$",
+    "^~/types/(.*)$",
+    "^~/store/?(.*)$",
+    "^~/config/(.*)$",
+    "^~/lib/(.*)$",
+    "^~/hooks/?(.*)$",
+    "^~/components/(.*)$",
+    "^~/styles/(.*)$",
+    "",
+    "^~/public/(.*)$",
     "^[./]",
   ],
   importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],

README.md

@@ -55,8 +55,6 @@ git commit --no-verify -m "init"
 
 Check out the [package.json](package.json) for all available scripts.
 
-## Folder Structure
-
 ## After Installation Checklist
 
 - [ ] Update `package.json` with your project details.

src/components/theme/index.ts

@@ -0,0 +1,3 @@
+export * from "./theme-provider";
+export * from "./theme-script";
+export * from "./theme-switcher";

src/components/theme/theme-provider.tsx

@@ -0,0 +1,23 @@
+import type { Signal } from "@builder.io/qwik";
+import {
+  component$,
+  createContextId,
+  Slot,
+  useContextProvider,
+  useSignal,
+} from "@builder.io/qwik";
+
+export type Theme = "light" | "dark" | "system" | null;
+
+export const ThemeContext = createContextId<Signal<Theme>>("theme");
+
+/**
+ * @see https://github.com/BuilderIO/qwik/issues/1480
+ */
+export const ThemeProvider = component$(() => {
+  const theme = useSignal<Theme>(null);
+
+  useContextProvider(ThemeContext, theme);
+
+  return <Slot />;
+});

src/components/theme/theme-script.tsx

@@ -0,0 +1,19 @@
+/**
+ * @see https://github.com/BuilderIO/qwik/issues/1480
+ */
+export const ThemeScript = () => {
+  const script = `
+!function() {
+  try {
+    var html = document.documentElement;
+    var system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    var theme = localStorage.getItem('theme') ?? system;
+    if (theme === 'system') theme = system;
+    html.classList.add(theme);
+    html.dataset.theme = theme;
+  } catch (e) {}
+}();
+`;
+
+  return <script type="text/javascript" dangerouslySetInnerHTML={script} />;
+};

src/components/theme/theme-switcher.tsx

@@ -0,0 +1,31 @@
+import type { HtmlHTMLAttributes } from "@builder.io/qwik";
+import { $, component$ } from "@builder.io/qwik";
+import { LuMoon, LuSun } from "@qwikest/icons/lucide";
+
+import { useTheme } from "~/hooks/use-theme";
+
+type ThemeSwitcherProps = HtmlHTMLAttributes<HTMLButtonElement>;
+
+/**
+ * @see https://github.com/BuilderIO/qwik/issues/1480
+ */
+export const ThemeSwitcher = component$<ThemeSwitcherProps>((props) => {
+  const theme = useTheme();
+
+  const toggleTheme = $(() => {
+    theme.value = theme.value === "dark" ? "light" : "dark";
+  });
+
+  return (
+    <button onClick$={toggleTheme} {...props}>
+      <LuSun
+        aria-hidden="true"
+        class="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+      />
+      <LuMoon
+        aria-hidden="true"
+        class="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+      />
+    </button>
+  );
+});

src/hooks/use-theme.ts

@@ -0,0 +1,58 @@
+import { useContext, useSignal, useVisibleTask$ } from "@builder.io/qwik";
+
+import type { Theme } from "~/components/theme";
+import { ThemeContext } from "~/components/theme";
+
+export function useTheme() {
+  const theme = useContext(ThemeContext);
+  const prev = useSignal<Theme>(null);
+
+  useVisibleTask$(
+    ({ track }) => {
+      track(theme);
+      const html = document.documentElement;
+
+      if (!theme.value) return;
+
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+      if (prev.value) html.classList.remove(prev.value);
+      if (prev.value === "system" && media.matches)
+        html.classList.remove("dark");
+
+      html.classList.add(theme.value);
+      html.dataset.theme = theme.value;
+
+      if (theme.value === "system") {
+        media.matches
+          ? html.classList.add("dark")
+          : html.classList.remove("dark");
+      }
+
+      const colorSchemeListener = () => {
+        if (theme.value !== "system") return;
+        media.matches
+          ? html.classList.add("dark")
+          : html.classList.remove("dark");
+      };
+      media.addEventListener("change", colorSchemeListener);
+
+      prev.value = theme.value;
+
+      return () => media.removeEventListener("change", colorSchemeListener);
+    },
+    { strategy: "document-ready" }
+  );
+
+  useVisibleTask$(({ track }) => {
+    track(theme);
+    if (theme.value) localStorage.setItem("theme", theme.value);
+  });
+
+  useVisibleTask$(() => {
+    const storedTheme = localStorage.getItem("theme") as Theme;
+    theme.value = storedTheme ?? "system";
+  });
+
+  return theme;
+}

src/root.tsx

@@ -7,6 +7,7 @@ import {
 
 import { RouterHead } from "./components/router-head/router-head";
 import { TailwindIndicator } from "./components/tailwind-indicator";
+import { ThemeScript } from "./components/theme";
 
 import "./global.css";
 
@@ -24,6 +25,7 @@ export default component$(() => {
         <meta charSet="utf-8" />
         <link rel="manifest" href="/manifest.json" />
         <RouterHead />
+        <ThemeScript />
       </head>
       <body lang="en">
         <RouterOutlet />

src/routes/index.tsx

@@ -12,7 +12,8 @@ import {
   LuFlameKindling,
   LuGithub,
 } from "@qwikest/icons/lucide";
-import QwikLogo from "~public/favicon.svg?jsx";
+
+import QwikLogo from "~/public/favicon.svg?jsx";
 
 const packageManagers = {
   bun: "bunx",
@@ -86,8 +87,8 @@ export default component$(() => {
   });
 
   return (
-    <main class="layout min-h-screen w-full bg-[#141414] bg-fixed text-white selection:bg-zinc-300 selection:text-black">
-      <section class="container px-4 py-12 md:px-6 md:pt-24 lg:pt-32 xl:pt-48">
+    <main class="layout grid min-h-screen w-full place-items-center bg-[#141414] bg-fixed text-white selection:bg-zinc-300 selection:text-black">
+      <section class="px-4">
         <QwikLogo
           alt="Next.js logo"
           class="w-2h-28 mx-auto mb-6 h-28 md:max-w-full"
@@ -175,12 +176,13 @@ export default component$(() => {
       </section>
 
       <footer class="absolute inset-x-0 bottom-4 flex justify-center">
-        <em class="bg-gradient-to-r from-sky-500 to-purple-400 bg-clip-text text-transparent">
+        <em class="text-zinc-500">
           &copy;{new Date().getFullYear()}{" "}
           <a
             href="https://github.com/rajput-hemant"
             target="_blank"
             rel="noopener noreferrer"
+            class="underline-offset-4 duration-150 hover:text-zinc-400 hover:underline"
           >
             rajput-hemant@github
           </a>

src/routes/layout.tsx

@@ -1,6 +1,8 @@
 import { component$, Slot } from "@builder.io/qwik";
 import type { RequestHandler } from "@builder.io/qwik-city";
 
+import { ThemeProvider } from "~/components/theme";
+
 export const onGet: RequestHandler = async ({ cacheControl }) => {
   // Control caching for this request for best performance and to reduce hosting costs:
   // https://qwik.builder.io/docs/caching/
@@ -13,5 +15,9 @@ export const onGet: RequestHandler = async ({ cacheControl }) => {
 };
 
 export default component$(() => {
-  return <Slot />;
+  return (
+    <ThemeProvider>
+      <Slot />
+    </ThemeProvider>
+  );
 });

tailwind.config.ts

@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config = {
+  darkMode: ["class"],
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     container: {

tsconfig.json

@@ -19,7 +19,7 @@
     "types": ["node", "vite/client"],
     "paths": {
       "~/*": ["./src/*"],
-      "~public/*": ["./public/*"]
+      "~/public/*": ["./public/*"]
     }
   },
   "files": [".eslintrc.cjs", "postcss.config.cjs"],