1+ /*
2+ # メモ
3+
4+ ## 過去の色の定義
5+
6+ 色の定義はけっこう消えてるので、必要であれば git の履歴から復元すること。
7+
8+ ## `--color-primary`, `--color-primary-content` の違い
9+
10+ `--color-primary` は背景色、`--color-primary-content` は文字色に使われる。
11+
12+ 例:
13+ <button class="btn btn-primary">Primary</button>
14+ <button style="background-color: var(--color-primary); color: var(--color-primary-content);">Primary</button>
15+ */
16+
17+ @import "tailwindcss" ;
18+
19+ @source "../" ;
20+
21+ @plugin "daisyui" {
22+ themes : "light" --default , "dark" --prefersdark ;
23+ }
24+
25+ @plugin "daisyui/theme" {
26+ name : "light" ;
27+ default : true; /* set as default */
28+ prefersdark : false; /* set as default dark mode (prefers-color-scheme:dark) */
29+ color-scheme : light; /* color of browser-provided UI */
30+
31+ --color-base-100 : # f6fbf3/* ほとんどの背景色 */
32+ --color-base-200 : # 96d5a6/* ヘッダーなど */
33+ --color-base-300 : # 96d5a6/* フッターなど */
34+ --color-base-content : # 181d18
35+
36+ --color-primary : # 2e6a44
37+ --color-primary-content : # ffffff
38+ --color-primary-container : # b1f1c1
39+
40+ --color-secondary : # 4f6353
41+ --color-secondary-content : # ffffff
42+ --color-secondary-container : # d2e8d4
43+
44+ --color-tertiary : # 3a646f
45+ --color-tertiary-content : # ffffff
46+ --color-tertiary-container : # beeaf6
47+
48+ --color-error : # ba1a1a
49+ --color-error-content : # ffffff
50+ --color-error-container : # ffdad6
51+
52+ --color-background : # f6fbf3
53+ --color-on-background : # 181d18
54+ --color-surface : # f6fbf3
55+ --color-on-surface : # 181d18
56+ --color-surface-variant : # dde5db
57+ --color-on-surface-variant : # 414942
58+ --color-outline : # 717971
59+ --color-outline-variant : # c1c9bf
60+ --color-shadow : # 000000
61+ --color-scrim : # 000000
62+ --color-inverse-surface : # 2c322d
63+ --color-inverse-on-surface : # edf2eb
64+ --color-primary-fixed : # b1f1c1
65+ --color-on-primary-fixed : # 00210e
66+ --color-primary-fixed-dim : # 96d5a6
67+ --color-on-primary-fixed-variant : # 12512e
68+ --color-secondary-fixed : # d2e8d4
69+ --color-on-secondary-fixed : # 0d1f13
70+ --color-secondary-fixed-dim : # b6ccb8
71+ --color-on-secondary-fixed-variant : # 384b3c
72+ --color-tertiary-fixed : # beeaf6
73+ --color-on-tertiary-fixed : # 001f26
74+ --color-tertiary-fixed-dim : # a2ceda
75+ --color-on-tertiary-fixed-variant : # 214c57
76+ --color-surface-dim : # d7dbd4
77+ --color-surface-bright : # f6fbf3
78+ --color-surface-container-lowest : # ffffff
79+ --color-surface-container-low : # f0f5ed
80+ --color-surface-container : # eaefe8
81+ --color-surface-container-high : # e5eae2
82+ --color-surface-container-highest : # dfe4dc
83+ --color-text-default : # 000000
84+ }
85+
86+ /* 色の定義(ダークモード) */
87+ @plugin "daisyui/theme" {
88+ name : "dark" ;
89+ default : false; /* set as default */
90+ prefersdark : true; /* set as default dark mode (prefers-color-scheme:dark) */
91+ color-scheme : dark; /* color of browser-provided UI */
92+
93+ --color-base-100 : # 181d18/* ほとんどの背景色 */
94+ --color-base-200 : # 052920/* ヘッダーなど */
95+ --color-base-300 : # 275A3F/* フッターなど */
96+ --color-base-content : # ffffff
97+
98+ --color-primary : # 96d5a6
99+ --color-primary-content : # 000000
100+ --color-primary-container : # 12512e/* color-primary との使い分け何？不明だったら消す */
101+
102+ --color-secondary : # b6ccb8
103+ --color-secondary-content : # 223527
104+ --color-secondary-container : # 384b3c/* 同上 */
105+
106+ --color-tertiary : # a2ceda
107+ --color-tertiary-content : # 023640
108+ --color-tertiary-container : # 214c57/* 同上 */
109+
110+ --color-error : # ffb4ab
111+ --color-error-content : # 690005
112+ --color-error-container : # 93000a/* 同上 */
113+
114+ /* ユースケース別の色をテーマで決めるのはアンチパターンなので、そのうち整理する (決して面倒で放置しているわけではない) */
115+ --color-background : # 101510
116+ --color-on-background : # dfe4dc
117+ --color-surface : # 101510
118+ --color-on-surface : # dfe4dc
119+ --color-surface-variant : # 414942
120+ --color-on-surface-variant : # c1c9bf
121+ --color-outline : # 8b938a
122+ --color-outline-variant : # 414942
123+ --color-shadow : 0 0 0 ;
124+ --color-scrim : 0 0 0 ;
125+ --color-inverse-surface : # dfe4dc
126+ --color-inverse-on-surface : # 2c322d
127+ --color-primary-fixed : # b1f1c1
128+ --color-on-primary-fixed : # 00210e
129+ --color-primary-fixed-dim : # 96d5a6
130+ --color-on-primary-fixed-variant : # 12512e
131+ --color-secondary-fixed : # d2e8d4
132+ --color-on-secondary-fixed : # 0d1f13
133+ --color-secondary-fixed-dim : # b6ccb8
134+ --color-on-secondary-fixed-variant : # 384b3c
135+ --color-tertiary-fixed : # beeaf6
136+ --color-on-tertiary-fixed : # 001f26
137+ --color-tertiary-fixed-dim : # a2ceda
138+ --color-on-tertiary-fixed-variant : # 214c57
139+ --color-surface-dim : # 101510
140+ --color-surface-bright : # 353a35
141+ --color-surface-container-lowest : # 0a0f0b
142+ --color-surface-container-low : # 181d18
143+ --color-surface-container : # 1c211c
144+ --color-surface-container-high : # 262b26
145+ --color-surface-container-highest : # 313631
146+ --color-text-default : # ffffff
147+ }
148+
149+ /*
150+ The default border color has changed to `currentcolor` in Tailwind CSS v4,
151+ so we've added these compatibility styles to make sure everything still
152+ looks the same as it did with Tailwind CSS v3.
153+
154+ If we ever want to remove these styles, we need to add an explicit border
155+ color utility to any element that depends on these defaults.
156+ */
157+ @layer base {
158+ * ,
159+ ::after ,
160+ ::before ,
161+ ::backdrop ,
162+ ::file-selector-button {
163+ border-color : var (--color-gray-200 , currentcolor);
164+ }
165+ }
166+
167+ .btn {
168+ @apply rounded-full p-5;
169+ }
170+ .btn-lg {
171+ @apply h-12 font-bold;
172+ }
173+
174+ /* Example Use Case: フッターのボタン */
175+ .link-btn {
176+ /* ダークモードのときでも bg-white, text-black で問題ない */
177+ @apply hover:bg-white/70 hover:text-black px-2 py-1 rounded-sm transition duration-200;
178+ }
0 commit comments