dark.css 12 KB

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