dark.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. .dark,
  2. .dark[data-theme='custom'],
  3. .dark[data-theme='default'] {
  4. /* Default background color of <body />...etc */
  5. --background: 222.34deg 10.43% 12.27%;
  6. /* 主体区域背景色 */
  7. --background-deep: 220deg 13.06% 9%;
  8. --foreground: 0 0% 95%;
  9. /* Background color for <Card /> */
  10. --card: 222.34deg 10.43% 12.27%;
  11. /* --card: 222.2 84% 4.9%; */
  12. --card-foreground: 210 40% 98%;
  13. /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
  14. /* --popover: 222.82deg 8.43% 12.27%; */
  15. /* 弹出层的背景色与主题区域背景色太过接近 */
  16. --popover: 0 0% 14.2%;
  17. --popover-foreground: 210 40% 98%;
  18. /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
  19. /* --muted: 220deg 6.82% 17.25%; */
  20. /* --muted-foreground: 215 20.2% 65.1%; */
  21. --muted: 240 3.7% 15.9%;
  22. --muted-foreground: 240 5% 64.9%;
  23. /* 主题颜色 */
  24. /* --primary: 245 82% 67%; */
  25. --primary-foreground: 0 0% 98%;
  26. /* Used for destructive actions such as <Button variant="destructive"> */
  27. --destructive: 359.21 68.47% 56.47%;
  28. --destructive-foreground: 0 0% 98%;
  29. /* Used for success actions such as <message> */
  30. --info: 180, 1.54%, 12.75%;
  31. --info-foreground: 220, 4%, 58%;
  32. /* Used for success actions such as <message> */
  33. --success: 144 57% 58%;
  34. --success-foreground: 0 0% 98%;
  35. /* Used for warning actions such as <message> */
  36. --warning: 42 84% 61%;
  37. --warning-foreground: 0 0% 98%;
  38. /* 颜色次要 */
  39. --secondary: 240 5% 17%;
  40. --secondary-foreground: 0 0% 98%;
  41. /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
  42. --accent: 216 5% 19%;
  43. --accent-dark: 240 0% 22%;
  44. --accent-darker: 240 0% 26%;
  45. --accent-lighter: 216 5% 12%;
  46. --accent-hover: 216 5% 24%;
  47. --accent-foreground: 0 0% 98%;
  48. /* Darker color */
  49. --heavy: 216 5% 24%;
  50. --heavy-foreground: var(--accent-foreground);
  51. /* Default border color */
  52. --border: 240 3.7% 22%;
  53. /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  54. --input: 0deg 0% 100% / 10%;
  55. --input-placeholder: 218deg 11% 65%;
  56. --input-background: 0deg 0% 100% / 5%;
  57. /* Used for focus ring */
  58. --ring: 222.2 84% 4.9%;
  59. /* 基本圆角大小 */
  60. --radius: 0.5rem;
  61. /* ============= Custom ============= */
  62. /* 遮罩颜色 */
  63. --overlay: 0deg 0% 0% / 40%;
  64. --overlay-content: 0deg 0% 0% / 40%;
  65. /* 基本文字大小 */
  66. --font-size-base: 16px;
  67. /* =============component & UI============= */
  68. --sidebar: 222.34deg 10.43% 12.27%;
  69. --sidebar-deep: 220deg 13.06% 9%;
  70. --menu: var(--sidebar);
  71. /* header */
  72. --header: 222.34deg 10.43% 12.27%;
  73. color-scheme: dark;
  74. }
  75. .dark[data-theme='violet'],
  76. [data-theme='violet'] .dark {
  77. --background: 224 71.4% 4.1%;
  78. --background-deep: var(--background);
  79. --foreground: 210 20% 98%;
  80. --card: 224 71.4% 4.1%;
  81. --card-foreground: 210 20% 98%;
  82. --popover: 224 71.4% 4.1%;
  83. --popover-foreground: 210 20% 98%;
  84. --primary-foreground: 210 20% 98%;
  85. --secondary: 215 27.9% 16.9%;
  86. --secondary-foreground: 210 20% 98%;
  87. --muted: 215 27.9% 16.9%;
  88. --muted-foreground: 217.9 10.6% 64.9%;
  89. --accent: 215 27.9% 16.9%;
  90. --accent-foreground: 210 20% 98%;
  91. --destructive: 359.21 68.47% 56.47%;
  92. --destructive-foreground: 210 20% 98%;
  93. --border: 215 27.9% 16.9%;
  94. --input: 215 27.9% 16.9%;
  95. --ring: 263.4 70% 50.4%;
  96. --sidebar: 224 71.4% 4.1%;
  97. --sidebar-deep: 224 71.4% 4.1%;
  98. --header: 224 71.4% 4.1%;
  99. }
  100. .dark[data-theme='pink'],
  101. [data-theme='pink'] .dark {
  102. --background: 20 14.3% 4.1%;
  103. --background-deep: var(--background);
  104. --foreground: 0 0% 95%;
  105. --card: 0 0% 9%;
  106. --card-foreground: 0 0% 95%;
  107. --popover: 0 0% 9%;
  108. --popover-foreground: 0 0% 95%;
  109. --primary-foreground: 355.7 100% 97.3%;
  110. --secondary: 240 3.7% 15.9%;
  111. --secondary-foreground: 0 0% 98%;
  112. --muted: 0 0% 15%;
  113. --muted-foreground: 240 5% 64.9%;
  114. --accent: 12 6.5% 15.1%;
  115. --accent-foreground: 0 0% 98%;
  116. --destructive: 359.21 68.47% 56.47%;
  117. --destructive-foreground: 0 85.7% 97.3%;
  118. --border: 240 3.7% 15.9%;
  119. --input: 240 3.7% 15.9%;
  120. --ring: 346.8 77.2% 49.8%;
  121. --sidebar: 20 14.3% 4.1%;
  122. --sidebar-deep: 20 14.3% 4.1%;
  123. --header: 20 14.3% 4.1%;
  124. }
  125. .dark[data-theme='rose'],
  126. [data-theme='rose'] .dark {
  127. --background: 0 0% 3.9%;
  128. --background-deep: var(--background);
  129. --foreground: 0 0% 98%;
  130. --card: 0 0% 3.9%;
  131. --card-foreground: 0 0% 98%;
  132. --popover: 0 0% 3.9%;
  133. --popover-foreground: 0 0% 98%;
  134. --primary-foreground: 0 85.7% 97.3%;
  135. --secondary: 0 0% 14.9%;
  136. --secondary-foreground: 0 0% 98%;
  137. --muted: 0 0% 14.9%;
  138. --muted-foreground: 0 0% 63.9%;
  139. --accent: 0 0% 14.9%;
  140. --accent-foreground: 0 0% 98%;
  141. --destructive: 359.21 68.47% 56.47%;
  142. --destructive-foreground: 0 0% 98%;
  143. --border: 0 0% 14.9%;
  144. --input: 0 0% 14.9%;
  145. --ring: 0 72.2% 50.6%;
  146. --sidebar: 0 0% 3.9%;
  147. --sidebar-deep: 0 0% 3.9%;
  148. --header: 0 0% 3.9%;
  149. }
  150. .dark[data-theme='sky-blue'],
  151. [data-theme='sky-blue'] .dark {
  152. --background: 222.2 84% 4.9%;
  153. --background-deep: var(--background);
  154. --foreground: 210 40% 98%;
  155. --card: 222.2 84% 4.9%;
  156. --card-foreground: 210 40% 98%;
  157. --popover: 222.2 84% 4.9%;
  158. --popover-foreground: 210 40% 98%;
  159. --primary-foreground: 210 20% 98%;
  160. --secondary: 217.2 32.6% 17.5%;
  161. --secondary-foreground: 210 40% 98%;
  162. --muted: 217.2 32.6% 17.5%;
  163. --muted-foreground: 215 20.2% 65.1%;
  164. --accent: 217.2 32.6% 17.5%;
  165. --accent-foreground: 210 40% 98%;
  166. --destructive: 359.21 68.47% 56.47%;
  167. --destructive-foreground: 210 40% 98%;
  168. --border: 217.2 32.6% 17.5%;
  169. --input: 217.2 32.6% 17.5%;
  170. --ring: 224.3 76.3% 48%;
  171. --sidebar: 222.2 84% 4.9%;
  172. --sidebar-deep: 222.2 84% 4.9%;
  173. --header: 222.2 84% 4.9%;
  174. }
  175. .dark[data-theme='deep-blue'],
  176. [data-theme='deep-blue'] .dark {
  177. --background: 222.2 84% 4.9%;
  178. --background-deep: var(--background);
  179. --foreground: 210 40% 98%;
  180. --card: 222.2 84% 4.9%;
  181. --card-foreground: 210 40% 98%;
  182. --popover: 222.2 84% 4.9%;
  183. --popover-foreground: 210 40% 98%;
  184. --primary-foreground: 210 20% 98%;
  185. --secondary: 217.2 32.6% 17.5%;
  186. --secondary-foreground: 210 40% 98%;
  187. --muted: 217.2 32.6% 17.5%;
  188. --muted-foreground: 215 20.2% 65.1%;
  189. --accent: 217.2 32.6% 17.5%;
  190. --accent-foreground: 210 40% 98%;
  191. --destructive: 359.21 68.47% 56.47%;
  192. --destructive-foreground: 210 40% 98%;
  193. --border: 217.2 32.6% 17.5%;
  194. --input: 217.2 32.6% 17.5%;
  195. --ring: 224.3 76.3% 48%;
  196. --sidebar: 222.2 84% 4.9%;
  197. --sidebar-deep: 222.2 84% 4.9%;
  198. --header: 222.2 84% 4.9%;
  199. }
  200. .dark[data-theme='green'],
  201. [data-theme='green'] .dark {
  202. --background: 20 14.3% 4.1%;
  203. --background-deep: var(--background);
  204. --foreground: 0 0% 95%;
  205. --card: 24 9.8% 6%;
  206. --card-foreground: 0 0% 95%;
  207. --popover: 0 0% 9%;
  208. --popover-foreground: 0 0% 95%;
  209. --primary-foreground: 210 20% 98%;
  210. --secondary: 240 3.7% 15.9%;
  211. --secondary-foreground: 0 0% 98%;
  212. --muted: 0 0% 15%;
  213. --muted-foreground: 240 5% 64.9%;
  214. --accent: 12 6.5% 15.1%;
  215. --accent-foreground: 0 0% 98%;
  216. --destructive: 359.21 68.47% 56.47%;
  217. --destructive-foreground: 0 85.7% 97.3%;
  218. --border: 240 3.7% 15.9%;
  219. --input: 240 3.7% 15.9%;
  220. --ring: 142.4 71.8% 29.2%;
  221. --sidebar: 20 14.3% 4.1%;
  222. --sidebar-deep: 20 14.3% 4.1%;
  223. --header: 20 14.3% 4.1%;
  224. }
  225. .dark[data-theme='deep-green'],
  226. [data-theme='deep-green'] .dark {
  227. --background: 20 14.3% 4.1%;
  228. --background-deep: var(--background);
  229. --foreground: 0 0% 95%;
  230. --card: 24 9.8% 6%;
  231. --card-foreground: 0 0% 95%;
  232. --popover: 0 0% 9%;
  233. --popover-foreground: 0 0% 95%;
  234. --primary-foreground: 210 20% 98%;
  235. --secondary: 240 3.7% 15.9%;
  236. --secondary-foreground: 0 0% 98%;
  237. --muted: 0 0% 15%;
  238. --muted-foreground: 240 5% 64.9%;
  239. --accent: 12 6.5% 15.1%;
  240. --accent-foreground: 0 0% 98%;
  241. --destructive: 359.21 68.47% 56.47%;
  242. --destructive-foreground: 0 85.7% 97.3%;
  243. --border: 240 3.7% 15.9%;
  244. --input: 240 3.7% 15.9%;
  245. --ring: 142.4 71.8% 29.2%;
  246. --sidebar: 20 14.3% 4.1%;
  247. --sidebar-deep: 20 14.3% 4.1%;
  248. --header: 20 14.3% 4.1%;
  249. }
  250. .dark[data-theme='orange'],
  251. [data-theme='orange'] .dark {
  252. --background: 20 14.3% 4.1%;
  253. --background-deep: var(--background);
  254. --foreground: 60 9.1% 97.8%;
  255. --card: 20 14.3% 4.1%;
  256. --card-foreground: 60 9.1% 97.8%;
  257. --popover: 20 14.3% 4.1%;
  258. --popover-foreground: 60 9.1% 97.8%;
  259. --primary-foreground: 60 9.1% 97.8%;
  260. --secondary: 12 6.5% 15.1%;
  261. --secondary-foreground: 60 9.1% 97.8%;
  262. --muted: 12 6.5% 15.1%;
  263. --muted-foreground: 24 5.4% 63.9%;
  264. --accent: 12 6.5% 15.1%;
  265. --accent-foreground: 60 9.1% 97.8%;
  266. --destructive: 0 72.2% 50.6%;
  267. --destructive-foreground: 60 9.1% 97.8%;
  268. --border: 12 6.5% 15.1%;
  269. --input: 12 6.5% 15.1%;
  270. --ring: 20.5 90.2% 48.2%;
  271. --sidebar: 20 14.3% 4.1%;
  272. --sidebar-deep: 20 14.3% 4.1%;
  273. --header: 20 14.3% 4.1%;
  274. }
  275. .dark[data-theme='yellow'],
  276. [data-theme='yellow'] .dark {
  277. --background: 20 14.3% 4.1%;
  278. --background-deep: var(--background);
  279. --foreground: 60 9.1% 97.8%;
  280. --card: 20 14.3% 4.1%;
  281. --card-foreground: 60 9.1% 97.8%;
  282. --popover: 20 14.3% 4.1%;
  283. --popover-foreground: 60 9.1% 97.8%;
  284. --primary-foreground: 26 83.3% 14.1%;
  285. --secondary: 12 6.5% 15.1%;
  286. --secondary-foreground: 60 9.1% 97.8%;
  287. --muted: 12 6.5% 15.1%;
  288. --muted-foreground: 24 5.4% 63.9%;
  289. --accent: 12 6.5% 15.1%;
  290. --accent-foreground: 60 9.1% 97.8%;
  291. --destructive: 359.21 68.47% 56.47%;
  292. --destructive-foreground: 60 9.1% 97.8%;
  293. --border: 12 6.5% 15.1%;
  294. --input: 12 6.5% 15.1%;
  295. --ring: 35.5 91.7% 32.9%;
  296. --sidebar: 20 14.3% 4.1%;
  297. --sidebar-deep: 20 14.3% 4.1%;
  298. --header: 20 14.3% 4.1%;
  299. }
  300. .dark[data-theme='zinc'],
  301. [data-theme='zinc'] .dark {
  302. --background: 240 10% 3.9%;
  303. --background-deep: var(--background);
  304. --foreground: 0 0% 98%;
  305. --card: 240 10% 3.9%;
  306. --card-foreground: 0 0% 98%;
  307. --popover: 240 10% 3.9%;
  308. --popover-foreground: 0 0% 98%;
  309. --primary-foreground: 240 5.9% 10%;
  310. --secondary: 240 3.7% 15.9%;
  311. --secondary-foreground: 0 0% 98%;
  312. --muted: 240 3.7% 15.9%;
  313. --muted-foreground: 240 5% 64.9%;
  314. --accent: 240 3.7% 15.9%;
  315. --accent-foreground: 0 0% 98%;
  316. --destructive: 359.21 68.47% 56.47%;
  317. --destructive-foreground: 0 0% 98%;
  318. --border: 240 3.7% 15.9%;
  319. --input: 240 3.7% 15.9%;
  320. --ring: 240 4.9% 83.9%;
  321. --sidebar: 240 10% 3.9%;
  322. --sidebar-deep: 240 10% 3.9%;
  323. --header: 240 10% 3.9%;
  324. }
  325. .dark[data-theme='neutral'],
  326. [data-theme='neutral'] .dark {
  327. --background: 0 0% 3.9%;
  328. --background-deep: var(--background);
  329. --foreground: 0 0% 98%;
  330. --card: 0 0% 3.9%;
  331. --card-foreground: 0 0% 98%;
  332. --popover: 0 0% 3.9%;
  333. --popover-foreground: 0 0% 98%;
  334. --primary-foreground: 0 0% 9%;
  335. --secondary: 0 0% 14.9%;
  336. --secondary-foreground: 0 0% 98%;
  337. --muted: 0 0% 14.9%;
  338. --muted-foreground: 0 0% 63.9%;
  339. --accent: 0 0% 14.9%;
  340. --accent-foreground: 0 0% 98%;
  341. --destructive: 359.21 68.47% 56.47%;
  342. --destructive-foreground: 0 0% 98%;
  343. --border: 0 0% 14.9%;
  344. --input: 0 0% 14.9%;
  345. --ring: 0 0% 83.1%;
  346. --sidebar: 0 0% 3.9%;
  347. --sidebar-deep: 0 0% 3.9%;
  348. --header: 0 0% 3.9%;
  349. }
  350. .dark[data-theme='slate'],
  351. [data-theme='slate'] .dark {
  352. --background: 222.2 84% 4.9%;
  353. --background-deep: var(--background);
  354. --foreground: 210 40% 98%;
  355. --card: 222.2 84% 4.9%;
  356. --card-foreground: 210 40% 98%;
  357. --popover: 222.2 84% 4.9%;
  358. --popover-foreground: 210 40% 98%;
  359. --primary-foreground: 222.2 47.4% 11.2%;
  360. --secondary: 217.2 32.6% 17.5%;
  361. --secondary-foreground: 210 40% 98%;
  362. --muted: 217.2 32.6% 17.5%;
  363. --muted-foreground: 215 20.2% 65.1%;
  364. --accent: 217.2 32.6% 17.5%;
  365. --accent-foreground: 210 40% 98%;
  366. --destructive: 359.21 68.47% 56.47%;
  367. --destructive-foreground: 210 40% 98%;
  368. --border: 217.2 32.6% 17.5%;
  369. --input: 217.2 32.6% 17.5%;
  370. --ring: 212.7 26.8% 83.9;
  371. --sidebar: 222.2 84% 4.9%;
  372. --sidebar-deep: 222.2 84% 4.9%;
  373. --header: 222.2 84% 4.9%;
  374. }
  375. .dark[data-theme='gray'],
  376. [data-theme='gray'] .dark {
  377. --background: 224 71.4% 4.1%;
  378. --background-deep: var(--background);
  379. --foreground: 210 20% 98%;
  380. --card: 224 71.4% 4.1%;
  381. --card-foreground: 210 20% 98%;
  382. --popover: 224 71.4% 4.1%;
  383. --popover-foreground: 210 20% 98%;
  384. --primary-foreground: 220.9 39.3% 11%;
  385. --secondary: 215 27.9% 16.9%;
  386. --secondary-foreground: 210 20% 98%;
  387. --muted: 215 27.9% 16.9%;
  388. --muted-foreground: 217.9 10.6% 64.9%;
  389. --accent: 215 27.9% 16.9%;
  390. --accent-foreground: 210 20% 98%;
  391. --destructive: 359.21 68.47% 56.47%;
  392. --destructive-foreground: 210 20% 98%;
  393. --border: 215 27.9% 16.9%;
  394. --input: 215 27.9% 16.9%;
  395. --ring: 216 12.2% 83.9%;
  396. --sidebar: 224 71.4% 4.1%;
  397. --sidebar-deep: 224 71.4% 4.1%;
  398. --header: 224 71.4% 4.1%;
  399. }