index.css 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  1. /* https://gavin-yyc.github.io/colorconvert/ */
  2. :root {
  3. /* Default background color of <body />...etc */
  4. --background: 0 0 100%;
  5. --foreground: 210 6% 21%;
  6. /* Background color for <Card /> */
  7. --card: 0 0% 100%;
  8. --card-foreground: 222.2 84% 4.9%;
  9. /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
  10. --popover: 0 0% 100%;
  11. --popover-foreground: 222.2 84% 4.9%;
  12. /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
  13. --muted: 210 40% 96.1%;
  14. --muted-foreground: 215.4 16.3% 46.9%;
  15. /* 主题颜色 */
  16. --primary: 211 91% 39%;
  17. --primary-foreground: 0 0 98%;
  18. /* Used for destructive actions such as <Button variant="destructive"> */
  19. --destructive: 0 78% 68%;
  20. --destructive-foreground: 0 0 98%;
  21. /* Used for success actions such as <message> */
  22. --success: 144 57% 58%;
  23. --success-foreground: 0 0 98%;
  24. /* Used for warning actions such as <message> */
  25. --warning: 42 84% 61%;
  26. --warning-foreground: 0 0 98%;
  27. /* Secondary colors for <Button /> */
  28. --secondary: 240 5% 96%;
  29. --secondary-foreground: 240 6% 10%;
  30. /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
  31. --accent: 240 5% 96%;
  32. --accent-hover: 200deg 10% 90%;
  33. --accent-foreground: 240 6% 10%;
  34. /* Darker color */
  35. --heavy: 192deg 9.43% 89.61%;
  36. --heavy-foreground: var(--accent-foreground);
  37. /* Default border color */
  38. --border: 240 6% 90%;
  39. /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
  40. --input: 240deg 5.88% 90%;
  41. --input-placeholder: 217 10.6% 65%;
  42. --input-background: 0 0 100%;
  43. /* Used for focus ring */
  44. --ring: 222.2 84% 4.9%;
  45. /* 遮罩颜色 */
  46. --overlay: 0deg 0% 0% / 40%;
  47. /* 基本文字大小 */
  48. --font-size-base: 16px;
  49. /* Border radius for card, input and buttons */
  50. --radius: 0.5rem;
  51. /* 用于浅色主题下一些暗色主题的颜色 */
  52. --dark-foreground: 220 13% 91%;
  53. --dark-border: 0deg 0% 100% / 10%;
  54. --dark-accent: 0deg 0% 100% / 8%;
  55. --dark-accent-hover: 0deg 0% 100% / 12%;
  56. /* =============component & UI============= */
  57. /* authentication */
  58. --authentication: 231deg 61% 44%;
  59. /* menu */
  60. --menu: 0deg 0% 100%;
  61. --menu-darken: 0deg 0% 95%;
  62. /* menu-dark */
  63. --menu-dark: 225deg 12% 13%;
  64. --menu-dark-darken: 223deg 11% 10%;
  65. accent-color: var(--primary);
  66. color-scheme: light;
  67. }
  68. :root[data-theme='violet'] {
  69. --background: 0 0% 100%;
  70. --foreground: 224 71.4% 4.1%;
  71. --card: 0 0% 100%;
  72. --card-foreground: 224 71.4% 4.1%;
  73. --popover: 0 0% 100%;
  74. --popover-foreground: 224 71.4% 4.1%;
  75. --primary-foreground: 210 20% 98%;
  76. --secondary: 220 14.3% 95.9%;
  77. --secondary-foreground: 220.9 39.3% 11%;
  78. --muted: 220 14.3% 95.9%;
  79. --muted-foreground: 220 8.9% 46.1%;
  80. --accent: 220 14.3% 95.9%;
  81. --accent-foreground: 220.9 39.3% 11%;
  82. --destructive: 0 84.2% 60.2%;
  83. --destructive-foreground: 210 20% 98%;
  84. --border: 220 13% 91%;
  85. --input: 220 13% 91%;
  86. --ring: 262.1 83.3% 57.8%;
  87. }
  88. :root[data-theme='pink'] {
  89. --background: 0 0% 100%;
  90. --foreground: 240 10% 3.9%;
  91. --card: 0 0% 100%;
  92. --card-foreground: 240 10% 3.9%;
  93. --popover: 0 0% 100%;
  94. --popover-foreground: 240 10% 3.9%;
  95. --primary-foreground: 355.7 100% 97.3%;
  96. --secondary: 240 4.8% 95.9%;
  97. --secondary-foreground: 240 5.9% 10%;
  98. --muted: 240 4.8% 95.9%;
  99. --muted-foreground: 240 3.8% 46.1%;
  100. --accent: 240 4.8% 95.9%;
  101. --accent-foreground: 240 5.9% 10%;
  102. --destructive: 0 84.2% 60.2%;
  103. --destructive-foreground: 0 0% 98%;
  104. --border: 240 5.9% 90%;
  105. --input: 240 5.9% 90%;
  106. --ring: 346.8 77.2% 49.8%;
  107. }
  108. :root[data-theme='rose'] {
  109. --background: 0 0% 100%;
  110. --foreground: 240 10% 3.9%;
  111. --card: 0 0% 100%;
  112. --card-foreground: 240 10% 3.9%;
  113. --popover: 0 0% 100%;
  114. --popover-foreground: 240 10% 3.9%;
  115. --primary-foreground: 355.7 100% 97.3%;
  116. --secondary: 240 4.8% 95.9%;
  117. --secondary-foreground: 240 5.9% 10%;
  118. --muted: 240 4.8% 95.9%;
  119. --muted-foreground: 240 3.8% 46.1%;
  120. --accent: 240 4.8% 95.9%;
  121. --accent-foreground: 240 5.9% 10%;
  122. --destructive: 0 84.2% 60.2%;
  123. --destructive-foreground: 0 0% 98%;
  124. --border: 240 5.9% 90%;
  125. --input: 240 5.9% 90%;
  126. --ring: 346.8 77.2% 49.8%;
  127. }
  128. :root[data-theme='sky-blue'] {
  129. --background: 0 0% 100%;
  130. --foreground: 222.2 84% 4.9%;
  131. --card: 0 0% 100%;
  132. --card-foreground: 222.2 84% 4.9%;
  133. --popover: 0 0% 100%;
  134. --popover-foreground: 222.2 84% 4.9%;
  135. --primary-foreground: 210 40% 98%;
  136. --secondary: 210 40% 96.1%;
  137. --secondary-foreground: 222.2 47.4% 11.2%;
  138. --muted: 210 40% 96.1%;
  139. --muted-foreground: 215.4 16.3% 46.9%;
  140. --accent: 210 40% 96.1%;
  141. --accent-foreground: 222.2 47.4% 11.2%;
  142. --destructive: 0 84.2% 60.2%;
  143. --destructive-foreground: 210 40% 98%;
  144. --border: 214.3 31.8% 91.4%;
  145. --input: 214.3 31.8% 91.4%;
  146. --ring: 221.2 83.2% 53.3%;
  147. }
  148. :root[data-theme='deep-blue'] {
  149. --background: 0 0% 100%;
  150. --foreground: 222.2 84% 4.9%;
  151. --card: 0 0% 100%;
  152. --card-foreground: 222.2 84% 4.9%;
  153. --popover: 0 0% 100%;
  154. --popover-foreground: 222.2 84% 4.9%;
  155. --primary-foreground: 210 40% 98%;
  156. --secondary: 210 40% 96.1%;
  157. --secondary-foreground: 222.2 47.4% 11.2%;
  158. --muted: 210 40% 96.1%;
  159. --muted-foreground: 215.4 16.3% 46.9%;
  160. --accent: 210 40% 96.1%;
  161. --accent-foreground: 222.2 47.4% 11.2%;
  162. --destructive: 0 84.2% 60.2%;
  163. --destructive-foreground: 210 40% 98%;
  164. --border: 214.3 31.8% 91.4%;
  165. --input: 214.3 31.8% 91.4%;
  166. --ring: 221.2 83.2% 53.3%;
  167. }
  168. :root[data-theme='green'] {
  169. --background: 0 0% 100%;
  170. --foreground: 240 10% 3.9%;
  171. --card: 0 0% 100%;
  172. --card-foreground: 240 10% 3.9%;
  173. --popover: 0 0% 100%;
  174. --popover-foreground: 240 10% 3.9%;
  175. --primary-foreground: 355.7 100% 97.3%;
  176. --secondary: 240 4.8% 95.9%;
  177. --secondary-foreground: 240 5.9% 10%;
  178. --muted: 240 4.8% 95.9%;
  179. --muted-foreground: 240 3.8% 46.1%;
  180. --accent: 240 4.8% 95.9%;
  181. --accent-foreground: 240 5.9% 10%;
  182. --destructive: 0 84.2% 60.2%;
  183. --destructive-foreground: 0 0% 98%;
  184. --border: 240 5.9% 90%;
  185. --input: 240 5.9% 90%;
  186. --ring: 142.1 76.2% 36.3%;
  187. }
  188. :root[data-theme='deep-green'] {
  189. --background: 0 0% 100%;
  190. --foreground: 240 10% 3.9%;
  191. --card: 0 0% 100%;
  192. --card-foreground: 240 10% 3.9%;
  193. --popover: 0 0% 100%;
  194. --popover-foreground: 240 10% 3.9%;
  195. --primary-foreground: 355.7 100% 97.3%;
  196. --secondary: 240 4.8% 95.9%;
  197. --secondary-foreground: 240 5.9% 10%;
  198. --muted: 240 4.8% 95.9%;
  199. --muted-foreground: 240 3.8% 46.1%;
  200. --accent: 240 4.8% 95.9%;
  201. --accent-foreground: 240 5.9% 10%;
  202. --destructive: 0 84.2% 60.2%;
  203. --destructive-foreground: 0 0% 98%;
  204. --border: 240 5.9% 90%;
  205. --input: 240 5.9% 90%;
  206. --ring: 142.1 76.2% 36.3%;
  207. }
  208. :root[data-theme='orange'] {
  209. --background: 0 0% 100%;
  210. --foreground: 20 14.3% 4.1%;
  211. --card: 0 0% 100%;
  212. --card-foreground: 20 14.3% 4.1%;
  213. --popover: 0 0% 100%;
  214. --popover-foreground: 20 14.3% 4.1%;
  215. --primary-foreground: 60 9.1% 97.8%;
  216. --secondary: 60 4.8% 95.9%;
  217. --secondary-foreground: 24 9.8% 10%;
  218. --muted: 60 4.8% 95.9%;
  219. --muted-foreground: 25 5.3% 44.7%;
  220. --accent: 60 4.8% 95.9%;
  221. --accent-foreground: 24 9.8% 10%;
  222. --destructive: 0 84.2% 60.2%;
  223. --destructive-foreground: 60 9.1% 97.8%;
  224. --border: 20 5.9% 90%;
  225. --input: 20 5.9% 90%;
  226. --ring: 24.6 95% 53.1%;
  227. }
  228. :root[data-theme='yellow'] {
  229. --background: 0 0% 100%;
  230. --foreground: 20 14.3% 4.1%;
  231. --card: 0 0% 100%;
  232. --card-foreground: 20 14.3% 4.1%;
  233. --popover: 0 0% 100%;
  234. --popover-foreground: 20 14.3% 4.1%;
  235. --primary-foreground: 26 83.3% 14.1%;
  236. --secondary: 60 4.8% 95.9%;
  237. --secondary-foreground: 24 9.8% 10%;
  238. --muted: 60 4.8% 95.9%;
  239. --muted-foreground: 25 5.3% 44.7%;
  240. --accent: 60 4.8% 95.9%;
  241. --accent-foreground: 24 9.8% 10%;
  242. --destructive: 0 84.2% 60.2%;
  243. --destructive-foreground: 60 9.1% 97.8%;
  244. --border: 20 5.9% 90%;
  245. --input: 20 5.9% 90%;
  246. --ring: 20 14.3% 4.1%;
  247. }
  248. :root[data-theme='zinc'] {
  249. --background: 0 0% 100%;
  250. --foreground: 240 10% 3.9%;
  251. --card: 0 0% 100%;
  252. --card-foreground: 240 10% 3.9%;
  253. --popover: 0 0% 100%;
  254. --popover-foreground: 240 10% 3.9%;
  255. --primary-foreground: 0 0% 98%;
  256. --secondary: 240 4.8% 95.9%;
  257. --secondary-foreground: 240 5.9% 10%;
  258. --muted: 240 4.8% 95.9%;
  259. --muted-foreground: 240 3.8% 46.1%;
  260. --accent: 240 4.8% 95.9%;
  261. --accent-foreground: 240 5.9% 10%;
  262. --destructive: 0 84.2% 60.2%;
  263. --destructive-foreground: 0 0% 98%;
  264. --border: 240 5.9% 90%;
  265. --input: 240 5.9% 90%;
  266. --ring: 240 5.9% 10%;
  267. }
  268. :root[data-theme='neutral'] {
  269. --background: 0 0% 100%;
  270. --foreground: 0 0% 3.9%;
  271. --card: 0 0% 100%;
  272. --card-foreground: 0 0% 3.9%;
  273. --popover: 0 0% 100%;
  274. --popover-foreground: 0 0% 3.9%;
  275. --primary-foreground: 0 0% 98%;
  276. --secondary: 0 0% 96.1%;
  277. --secondary-foreground: 0 0% 9%;
  278. --muted: 0 0% 96.1%;
  279. --muted-foreground: 0 0% 45.1%;
  280. --accent: 0 0% 96.1%;
  281. --accent-foreground: 0 0% 9%;
  282. --destructive: 0 84.2% 60.2%;
  283. --destructive-foreground: 0 0% 98%;
  284. --border: 0 0% 89.8%;
  285. --input: 0 0% 89.8%;
  286. --ring: 0 0% 3.9%;
  287. }
  288. :root[data-theme='slate'] {
  289. --background: 0 0% 100%;
  290. --foreground: 222.2 84% 4.9%;
  291. --card: 0 0% 100%;
  292. --card-foreground: 222.2 84% 4.9%;
  293. --popover: 0 0% 100%;
  294. --popover-foreground: 222.2 84% 4.9%;
  295. --primary-foreground: 210 40% 98%;
  296. --secondary: 210 40% 96.1%;
  297. --secondary-foreground: 222.2 47.4% 11.2%;
  298. --muted: 210 40% 96.1%;
  299. --muted-foreground: 215.4 16.3% 46.9%;
  300. --accent: 210 40% 96.1%;
  301. --accent-foreground: 222.2 47.4% 11.2%;
  302. --destructive: 0 84.2% 60.2%;
  303. --destructive-foreground: 210 40% 98%;
  304. --border: 214.3 31.8% 91.4%;
  305. --input: 214.3 31.8% 91.4%;
  306. --ring: 222.2 84% 4.9%;
  307. }
  308. :root[data-theme='gray'] {
  309. --background: 0 0% 100%;
  310. --foreground: 224 71.4% 4.1%;
  311. --card: 0 0% 100%;
  312. --card-foreground: 224 71.4% 4.1%;
  313. --popover: 0 0% 100%;
  314. --popover-foreground: 224 71.4% 4.1%;
  315. --primary-foreground: 210 20% 98%;
  316. --secondary: 220 14.3% 95.9%;
  317. --secondary-foreground: 220.9 39.3% 11%;
  318. --muted: 220 14.3% 95.9%;
  319. --muted-foreground: 220 8.9% 46.1%;
  320. --accent: 220 14.3% 95.9%;
  321. --accent-foreground: 220.9 39.3% 11%;
  322. --destructive: 0 84.2% 60.2%;
  323. --destructive-foreground: 210 20% 98%;
  324. --border: 220 13% 91%;
  325. --input: 220 13% 91%;
  326. --ring: 224 71.4% 4.1%;
  327. }