ut-code · aster-void · Jul 15, 2025 · Jul 15, 2025
diff --git a/biome.jsonc b/biome.jsonc
@@ -10,8 +10,7 @@
     "includes": [
       "**/*",
       "!packages/class_data/data/**",
-      "!packages/web/src/app/globals.css",
-      "!packages/web/src/styles/globals.css"
+      "!packages/web/src/app.css"
     ]
   },
   "formatter": {

diff --git a/bun.lock b/bun.lock
@@ -37,6 +37,7 @@
         "@types/react": "^19.0.5",
         "@types/react-dom": "^19.0.5",
         "@vitejs/plugin-react": "^4.3.4",
+        "daisyui": "^5.0.46",
         "postcss": "^8.5.6",
         "tailwindcss": "^4.1.11",
         "typescript": "^5.8.3",
@@ -315,6 +316,8 @@
 
     "csstype": ["[email protected]", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
+    "daisyui": ["[email protected]", "", {}, "sha512-vMDZK1tI/bOb2Mc3Mk5WpquBG3ZqBz1YKZ0xDlvpOvey60dOS4/5Qhdowq1HndbQl7PgDLDYysxAjjUjwR7/eQ=="],
+
     "debug": ["[email protected]", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ=="],
 
     "detect-libc": ["[email protected]", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],

diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
     "packages/*"
   ],
   "scripts": {
-    "dev": "bun --filter=@packages/web dev",
-    "dev:mock": "bun --filter=@packages/web dev:mock",
+    "dev": "cd packages/web && bun dev",
+    "dev:mock": "cd packages/web && bun dev:mock",
     "build": "cd packages/web && bun run build",
     "check": "bunx biome check .",
     "fix": "bunx biome check . --fix"

diff --git a/packages/web/index.html b/packages/web/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>シ楽バス</title>
   </head>
-  <body>
+  <body data-theme="light">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -24,6 +24,7 @@
     "@types/react": "^19.0.5",
     "@types/react-dom": "^19.0.5",
     "@vitejs/plugin-react": "^4.3.4",
+    "daisyui": "^5.0.46",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 
 import { ThemeContext } from "@/app/context";
@@ -26,6 +26,10 @@ export default function App() {
    * テーマ管理
    */
   const [theme, setTheme] = useState<ThemeType>("light");
+  // the only proper use of useEffect
+  useEffect(() => {
+    document.body.setAttribute("data-theme", theme);
+  }, [theme]);
 
   const userInstance = new User();
   const [user, setUserState] = useState<RegisterType | undefined>(
@@ -45,9 +49,7 @@ export default function App() {
   return (
     <ThemeContext.Provider value={{ theme, setTheme }}>
       <UserContext.Provider value={userContextValue}>
-        <div
-          className={`bg-surface-container text-text-default ${theme} min-h-screen`}
-        >
+        <div className={`bg-surface-container text-text-default min-h-screen`}>
           <BrowserRouter>
             <div className="overscroll-none min-width-[300px] pt-12 pb-12">
               <Header />

diff --git a/packages/web/src/app.css b/packages/web/src/app.css
@@ -0,0 +1,178 @@
+/*
+# メモ
+
+## 過去の色の定義
+
+色の定義はけっこう消えてるので、必要であれば git の履歴から復元すること。
+
+## `--color-primary`, `--color-primary-content` の違い
+
+`--color-primary` は背景色、`--color-primary-content` は文字色に使われる。
+
+例:
+<button class="btn btn-primary">Primary</button>
+<button style="background-color: var(--color-primary); color: var(--color-primary-content);">Primary</button>
+*/
+
+@import "tailwindcss";
+
+@source "../";
+
+@plugin "daisyui" {
+  themes: "light" --default, "dark" --prefersdark;
+}
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true; /* set as default */
+  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
+  color-scheme: light; /* color of browser-provided UI */
+
+  --color-base-100: #f6fbf3; /* ほとんどの背景色 */
+  --color-base-200: #96d5a6; /* ヘッダーなど */
+  --color-base-300: #96d5a6; /* フッターなど */
+  --color-base-content: #181d18;
+
+  --color-primary: #2e6a44;
+  --color-primary-content: #ffffff;
+  --color-primary-container: #b1f1c1;
+
+  --color-secondary: #4f6353;
+  --color-secondary-content: #ffffff;
+  --color-secondary-container: #d2e8d4;
+
+  --color-tertiary: #3a646f;
+  --color-tertiary-content: #ffffff;
+  --color-tertiary-container: #beeaf6;
+
+  --color-error: #ba1a1a;
+  --color-error-content: #ffffff;
+  --color-error-container: #ffdad6;
+
+  --color-background: #f6fbf3;
+  --color-on-background: #181d18;
+  --color-surface: #f6fbf3;
+  --color-on-surface: #181d18;
+  --color-surface-variant: #dde5db;
+  --color-on-surface-variant: #414942;
+  --color-outline: #717971;
+  --color-outline-variant: #c1c9bf;
+  --color-shadow: #000000;
+  --color-scrim: #000000;
+  --color-inverse-surface: #2c322d;
+  --color-inverse-on-surface: #edf2eb;
+  --color-primary-fixed: #b1f1c1;
+  --color-on-primary-fixed: #00210e;
+  --color-primary-fixed-dim: #96d5a6;
+  --color-on-primary-fixed-variant: #12512e;
+  --color-secondary-fixed: #d2e8d4;
+  --color-on-secondary-fixed: #0d1f13;
+  --color-secondary-fixed-dim: #b6ccb8;
+  --color-on-secondary-fixed-variant: #384b3c;
+  --color-tertiary-fixed: #beeaf6;
+  --color-on-tertiary-fixed: #001f26;
+  --color-tertiary-fixed-dim: #a2ceda;
+  --color-on-tertiary-fixed-variant: #214c57;
+  --color-surface-dim: #d7dbd4;
+  --color-surface-bright: #f6fbf3;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f0f5ed;
+  --color-surface-container: #eaefe8;
+  --color-surface-container-high: #e5eae2;
+  --color-surface-container-highest: #dfe4dc;
+  --color-text-default: #000000;
+}
+
+/* 色の定義(ダークモード) */
+@plugin "daisyui/theme" {
+  name: "dark";
+  default: false; /* set as default */
+  prefersdark: true; /* set as default dark mode (prefers-color-scheme:dark) */
+  color-scheme: dark; /* color of browser-provided UI */
+
+  --color-base-100: #181d18; /* ほとんどの背景色 */
+  --color-base-200: #052920; /* ヘッダーなど */
+  --color-base-300: #275A3F; /* フッターなど */
+  --color-base-content: #ffffff;
+
+  --color-primary: #96d5a6;
+  --color-primary-content: #000000;
+  --color-primary-container: #12512e; /* color-primary との使い分け何？不明だったら消す */
+
+  --color-secondary: #b6ccb8;
+  --color-secondary-content: #223527;
+  --color-secondary-container: #384b3c; /* 同上 */
+
+  --color-tertiary: #a2ceda;
+  --color-tertiary-content: #023640;
+  --color-tertiary-container: #214c57; /* 同上 */
+
+  --color-error: #ffb4ab;
+  --color-error-content: #690005;
+  --color-error-container: #93000a; /* 同上 */
+
+  /* ユースケース別の色をテーマで決めるのはアンチパターンなので、そのうち整理する (決して面倒で放置しているわけではない) */
+  --color-background: #101510;
+  --color-on-background: #dfe4dc;
+  --color-surface: #101510;
+  --color-on-surface: #dfe4dc;
+  --color-surface-variant: #414942;
+  --color-on-surface-variant: #c1c9bf;
+  --color-outline: #8b938a;
+  --color-outline-variant: #414942;
+  --color-shadow: 0 0 0;
+  --color-scrim: 0 0 0;
+  --color-inverse-surface: #dfe4dc;
+  --color-inverse-on-surface: #2c322d;
+  --color-primary-fixed: #b1f1c1;
+  --color-on-primary-fixed: #00210e;
+  --color-primary-fixed-dim: #96d5a6;
+  --color-on-primary-fixed-variant: #12512e;
+  --color-secondary-fixed: #d2e8d4;
+  --color-on-secondary-fixed: #0d1f13;
+  --color-secondary-fixed-dim: #b6ccb8;
+  --color-on-secondary-fixed-variant: #384b3c;
+  --color-tertiary-fixed: #beeaf6;
+  --color-on-tertiary-fixed: #001f26;
+  --color-tertiary-fixed-dim: #a2ceda;
+  --color-on-tertiary-fixed-variant: #214c57;
+  --color-surface-dim: #101510;
+  --color-surface-bright: #353a35;
+  --color-surface-container-lowest: #0a0f0b;
+  --color-surface-container-low: #181d18;
+  --color-surface-container: #1c211c;
+  --color-surface-container-high: #262b26;
+  --color-surface-container-highest: #313631;
+  --color-text-default: #ffffff;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+.btn {
+  @apply rounded-full p-5;
+}
+.btn-lg {
+  @apply h-12 font-bold;
+}
+
+/* Example Use Case: フッターのボタン */
+.link-btn {
+  /* ダークモードのときでも bg-white, text-black で問題ない */
+  @apply hover:bg-white/70 hover:text-black px-2 py-1 rounded-sm transition duration-200;
+}
diff --git a/packages/web/src/app/components/FilterUI/UI/FlagButton.tsx b/packages/web/src/app/components/FilterUI/UI/FlagButton.tsx
@@ -42,7 +42,7 @@ export const FlagButton: React.FC<FlagButtonProp> = (prop: FlagButtonProp) => {
       className={
         `${
           prop.isSelected ? "bg-primary/30" : "bg-surface"
-        } text-text-default px-4 py-2 rounded-full outline-2 outline-primary/30 outline` +
+        } text-text-default px-4 py-2 rounded-full outline-primary/30 outline` +
         " " +
         className
       }

diff --git a/packages/web/src/app/components/Footer/index.tsx b/packages/web/src/app/components/Footer/index.tsx
@@ -6,46 +6,31 @@ import { Link } from "react-router-dom";
  */
 export default function Footer() {
   return (
-    <footer
-      id="global-footer"
-      className="flex items-center justify-end px-4 py-2 text-white bg-inverse-primary fixed bottom-0 w-full"
-    >
-      <div className="flex flex-wrap justify-end space-x-4 bg-gray-800">
+    <footer className="flex items-center justify-end px-4 py-2 text-base-content bg-base-300 fixed bottom-0 w-full">
+      <div className="flex flex-wrap justify-end space-x-4">
         <a
           href="https://forms.gle/stBdKuCsXm8LUdBm8"
-          className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200 "
+          className="link link-btn"
           target="_blank"
           rel="noopener noreferrer"
         >
           ご意見
         </a>
-        <Link
-          to="/how-to-use"
-          className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
-        >
+        <Link to="/how-to-use" className="link link-btn">
           使い方
         </Link>
-        <Link
-          to="/notion"
-          className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
-        >
+        <Link to="/notion" className="link link-btn">
           履修上の注意
         </Link>
-        <Link
-          to="/disclaimer"
-          className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
-        >
+        <Link to="/disclaimer" className="link link-btn">
           免責事項
         </Link>
-        <Link
-          to="/aboutus"
-          className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
-        >
+        <Link to="/aboutus" className="link link-btn">
           About us
         </Link>
         <a
           href="https://utcode.net/"
-          className="hover:bg-surface-variant hover:text-white px-2 py-1 rounded-sm transition duration-200"
+          className="link link-btn"
           target="_blank"
           rel="noopener noreferrer"
         >

diff --git a/packages/web/src/app/components/Header/index.tsx b/packages/web/src/app/components/Header/index.tsx
@@ -14,7 +14,7 @@ export default function Header() {
   return (
     <header
       id="global-header"
-      className="flex items-center justify-between px-4 py-2 bg-on-primary shadow-md fixed top-0 w-full z-10"
+      className="flex items-center justify-between px-4 py-2 bg-base-200 shadow-md fixed top-0 w-full z-10"
     >
       <div className="flex items-center space-x-2">
         <a href="/" id="syllabus-link" className="text-lg">
@@ -26,7 +26,7 @@ export default function Header() {
           href="https://utcode.net/"
           target="_blank"
           id="logo-link"
-          className="flex items-center space-x-1 text-green-600"
+          className="flex items-center space-x-1"
           rel="noopener"
         >
           <span>by</span>
@@ -44,17 +44,17 @@ export default function Header() {
             <MdOutlineWbSunny
               size={24}
               onClick={() => setTheme("dark")}
-              className="text-green-600"
+              className="text-base-content"
             />
           ) : (
             <MdDarkMode
               size={24}
               onClick={() => setTheme("light")}
-              className="text-green-600"
+              className="text-base-content"
             />
           )}
         </button>
-        <button type="button" id="settings" className="text-green-600">
+        <button type="button" id="settings" className="text-base-content">
           <FaCog size={24} />
         </button>
       </div>

diff --git a/packages/web/src/app/components/Sample/ColorTheme/page.tsx b/packages/web/src/app/components/Sample/ColorTheme/page.tsx
@@ -15,7 +15,7 @@ const ThemeSampleComponent: React.FC = () => {
         <div className="mt-4">
           <div className="grid grid-cols-2 justify-center items-center gap-2">
             {/* primary背景に、on-primary色のテキストを使用 */}
-            <div className="col-start-1 col-span-1 row-start-1 p-4 bg-primary text-on-primary">
+            <div className="col-start-1 col-span-1 row-start-1 p-4 bg-primary text-primary-content">
               Primary
             </div>
 

diff --git a/packages/web/src/assets/syllabus_icon.svg b/packages/web/src/assets/syllabus_icon.svg
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import "./styles/globals.css";
+import "./app.css";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) {