ダーク／ライトテーマを設定する

.
├── client.ts
├── components
│   ├── Header.tsx
│   ├── Layout.tsx
│   ├── mdxComponents
│   │   ├── AdjustedImg.tsx
│   │   ├── index.ts
│   │   ├── LinkedHeadings.tsx
│   │   └── StyledUl.tsx
│   ├── mdxStyles
│   │   └── codeSyntax.ts
│   ├── Menu.tsx
│   ├── Post.tsx
│   ├── ThemeSwitch.tsx  　　　// ③ テーマ切替リンクの実装
│   └── Toc.tsx
├── global.d.ts
├── middleware
│   └── themeController.ts　  // ① htmlヘッダへのscriptタグ埋め込み
├── routes
│   ├── _404.tsx
│   ├── _error.tsx
│   ├── index.tsx
│   ├── posts
│   │   ├── 20240923_darktheme.mdx
│   │   └── _renderer.tsx
│   ├── _renderer.tsx
│   └── theme.ts              // ② cookie設定エンドポイント
├── server.ts
├── theme
│   └── theme.ts              // ④ テーマデザインのCSS定義
└── types.ts

import { getCookie } from "hono/cookie";
import { createMiddleware } from "hono/factory";
 
export const themeController = createMiddleware(async (c, next) => {
  await next();
 
  // レスポンスがHTMLでない場合は何もしない
  if (!c.res.headers.get("content-type")?.includes("text/html")) {
    return;
  }
 
  // レスポンスボディを取得
  let html = await c.res.text();
 
  // 追加するスクリプト
  const theme = getCookie(c, "theme") ?? "";
  const specified = getCookie(c, "specified") === "true";
  const url = c.req.url;
 
  const script = `
    <script>
      const theme = '${theme}';
      // クライアントのテーマを判定
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;  
      const clientTheme = isDarkMode ? 'dark' : 'light';
      // 明示的な指定が無い かつ テーマが異なる場合 … テーマを指定し、cookie設定エンドポイントへアクセス
      // また from として現在のurlを渡す
      if (${!specified} && theme !== clientTheme ) {   
        window.location.href = '/theme?theme=' + clientTheme + '&specified=${specified}&from=' + encodeURIComponent('${url}');
      }
    </script>
  `;
 
  // </head>タグの直前にスクリプトを挿入
  html = html.replace("</head>", `${script}</head>`);
 
  c.res = c.html(html);
});

import { Hono } from "hono";
import { setCookie } from "hono/cookie";
 
export const themeRoute = new Hono().get("/", async (c) => {
  const theme = c.req.query("theme");
  const specified = c.req.query("specified");
  const from = c.req.query("from");
 
  setCookie(c, "specified", specified ?? "false");
 
  if (theme) {
    setCookie(c, "theme", theme);
  }
 
  return c.redirect(from ?? "/");
});

import { css } from "hono/css";
import { FC } from "hono/jsx";
import { Theme, getCssTheme } from "../../styles/theme";
import { useRequestContext } from "hono/jsx-renderer";
import { getCookie } from "hono/cookie";
 
type ThemeSwitchProps = {};
 
const ICON = { LIGHT: "LIGHT", DARK: "DARK", ENV: "ENV" } as const;
type ThemeSet = {
  icon: string;
  theme: Theme | undefined;
  specified: boolean;
};
const themeSets: { LIGHT: ThemeSet; DARK: ThemeSet; ENV: ThemeSet } = {
  LIGHT: { icon: ICON.LIGHT, theme: "light", specified: true },
  DARK: { icon: ICON.DARK, theme: "dark", specified: true },
  ENV: { icon: ICON.ENV, theme: undefined, specified: false },
} as const;
 
const ThemeSwitch: FC<ThemeSwitchProps> = () => {
  const cssTheme = getCssTheme();
  const c = useRequestContext();
  const theme = (getCookie(c, "theme") ?? "") === "dark" ? "dark" : "light";
  const specified = getCookie(c, "specified") === "true";
  const url = c.req.url;
 
  const getThemeState = (
    theme: Theme | undefined,
    specified: boolean
  ): { current: ThemeSet; next: ThemeSet } => {
    if (specified) {
      if (theme === "light") {
        return {
          current: themeSets.LIGHT,
          next: themeSets.DARK,
        };
      } else {
        return {
          current: themeSets.DARK,
          next: themeSets.ENV,
        };
      }
    } else {
      return {
        current: themeSets.ENV,
        next: themeSets.LIGHT,
      };
    }
  };
 
  const themeState = getThemeState(theme, specified);
 
  const cssThemeChangeLink = css`
    width: 30px;
    height: 30px;
    background-color: transparent;
    border-color: transparent;
    padding-block: 0px;
    padding-inline: 0px;
    font-size: 1em;
    color: ${cssTheme.fontPrimaryColor};
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
  `;
 
  return (
    <div>
      <a
        href={
          "/theme?theme=" +
          themeState.next.theme +
          "&specified=" +
          themeState.next.specified +
          "&from=" +
          encodeURIComponent(url)
        }
        class={cssThemeChangeLink}
      >
        {themeState.current.icon}
      </a>
    </div>
  );
};
 
export default ThemeSwitch;

import { getCookie } from "hono/cookie";
import { useRequestContext } from "hono/jsx-renderer";
 
export type CssTheme = {
  borderColor: string;
  bodyBgColor: string;
  contentBgColor: string;
  primaryBgColor: string;
  secondaryBgColor: string;
  subBgColor: string;
  fontColor: string;
  fontPrimaryColor: string;
};
 
const cssThemeLight: CssTheme = {
  borderColor: "whitesmoke",
  bodyBgColor: "ghostwhite",
  contentBgColor: "white",
  primaryBgColor: "#4fc2f7f8",
  secondaryBgColor: "#b4ebfc",
  subBgColor: "lightgray",
  fontColor: "black",
  fontPrimaryColor: "white",
};
 
const cssThemeDark: CssTheme = {
  borderColor: "gray",
  bodyBgColor: "black",
  contentBgColor: "#2e2e2e",
  primaryBgColor: "darkorange",
  secondaryBgColor: "maroon",
  subBgColor: "lightgray",
  fontColor: "lightgray",
  fontPrimaryColor: "white",
};
 
export type Theme = "light" | "dark" | undefined;
 
export const getCssTheme = (): CssTheme => {
  const c = useRequestContext();
  const theme = (getCookie(c, "theme") as Theme) ?? "light";
 
  if (theme === "dark") {
    return cssThemeDark;
  } else {
    return cssThemeLight;
  }
};

・・・
const cssTheme = getCssTheme();
 
const cssBody = css`
  ${cssCodeSyntax()}
  margin: 0px;
  width: 100%;
  background-color: ${cssTheme.bodyBgColor};
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: ${cssTheme.fontColor};
  a {
    color: inherit;
  }
`;
・・・