realdark.less 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. [snowy-theme=realdark] {
  2. .ant-btn-primary{
  3. color: #fff;
  4. &:hover, &:focus{
  5. color: #fff;
  6. }
  7. }
  8. }
  9. .fade() {
  10. @functions: ~`(function() {
  11. this.fade = function(color, amount) {
  12. if (String(color).indexOf('var(') === 0) {
  13. /*
  14. (var(--primary-color), 7) -> var(--primary-7)
  15. */
  16. if (color.indexOf('--primary-color') !== -1 ) {
  17. var m = amount > 10 ? amount/10 :amount
  18. return color.replace('-color)', '-' + m + ')')
  19. }
  20. /*
  21. (var(--error-color), 70%) ===> var(--error-color--fade-7)
  22. */
  23. return color.replace(')', '--fade--' + parseInt(amount) + ')')
  24. }
  25. return color
  26. }
  27. })()`;
  28. }
  29. .fade();
  30. @import 'ant-design-vue/es/style/themes/default.less';
  31. //@import '../themes/default.less';
  32. .snowy-theme-dark {
  33. --blue-1: #111d2c;
  34. --blue-2: #112a45;
  35. --blue-3: #15395b;
  36. --blue-4: #164c7e;
  37. --blue-5: #1765ad;
  38. --blue-6: #177ddc;
  39. --blue-7: #3c9ae8;
  40. --blue-8: #65b7f3;
  41. --blue-9: #8dcff8;
  42. --blue-10: #b7e3fa;
  43. --green-1: #162312;
  44. --green-2: #1d3712;
  45. --green-3: #274916;
  46. --green-4: #306317;
  47. --green-5: #3c8618;
  48. --green-6: #49aa19;
  49. --green-7: #6abe39;
  50. --green-8: #8fd460;
  51. --green-9: #b2e58b;
  52. --green-10: #d5f2bb;
  53. --red-1: #2a1215;
  54. --red-2: #431418;
  55. --red-3: #58181c;
  56. --red-4: #791a1f;
  57. --red-5: #a61d24;
  58. --red-6: #f5222d;
  59. --red-7: #e84749;
  60. --red-8: #f37370;
  61. --red-9: #f89f9a;
  62. --red-10: #fac8c3;
  63. --gold-1: #2b2111;
  64. --gold-2: #443111;
  65. --gold-3: #594214;
  66. --gold-4: #7c5914;
  67. --gold-5: #aa7714;
  68. --gold-6: #d89614;
  69. --gold-7: #e8b339;
  70. --gold-8: #f3cc62;
  71. --gold-9: #f8df8b;
  72. --gold-10: #faedb5;
  73. --purple-1: #1a1325;
  74. --purple-2: #24163a;
  75. --purple-3: #301c4d;
  76. --purple-4: #3e2069;
  77. --purple-5: #51258f;
  78. --purple-6: #642ab5;
  79. --purple-7: #854eca;
  80. --purple-8: #ab7ae0;
  81. --purple-9: #cda8f0;
  82. --purple-10: #ebd7fa;
  83. --cyan-1: #112123;
  84. --cyan-2: #113536;
  85. --cyan-3: #144848;
  86. --cyan-4: #146262;
  87. --cyan-5: #138585;
  88. --cyan-6: #13a8a8;
  89. --cyan-7: #33bcb7;
  90. --cyan-8: #58d1c9;
  91. --cyan-9: #84e2d8;
  92. --cyan-10: #b2f1e8;
  93. --pink-1: #291321;
  94. --pink-2: #40162f;
  95. --pink-3: #551c3b;
  96. --pink-4: #75204f;
  97. --pink-5: #a02669;
  98. --pink-6: #cb2b83;
  99. --pink-7: #e0529c;
  100. --pink-8: #f37fb7;
  101. --pink-9: #f8a8cc;
  102. --pink-10: #fad2e3;
  103. --orange-1: #2b1d11;
  104. --orange-2: #442a11;
  105. --orange-3: #593815;
  106. --orange-4: #7c4a15;
  107. --orange-5: #aa6215;
  108. --orange-6: #d87a16;
  109. --orange-7: #e89a3c;
  110. --orange-8: #f3b765;
  111. --orange-9: #f8cf8d;
  112. --orange-10: #fae3b7;
  113. --primary-1: var(--blue-1);
  114. --primary-2: var(--blue-2);
  115. --primary-3: var(--blue-3);
  116. --primary-4: var(--blue-4);
  117. --primary-5: var(--blue-5);
  118. --primary-6: var(--blue-6);
  119. --primary-7: var(--blue-7);
  120. --primary-8: var(--blue-8);
  121. --primary-9: var(--blue-9);
  122. --primary-10: var(--blue-10);
  123. --primary-color: var(--primary-6);
  124. --primary-color-hover: var(--primary-5);
  125. --primary-color-active: var(--primary-7);
  126. --primary-color-outline: var(--primary-2);
  127. --info-color: var(--primary-color);
  128. --success-color: var(--green-6);
  129. --processing-color: var(--blue-6);
  130. --highlight-color: var(--red-5);
  131. --warning-color: var(--gold-6);
  132. --warning-color-hover: var(--gold-5);
  133. --warning-color-active: var(--gold-7);
  134. --warning-color-outline: var(--gold-2);
  135. --error-color: var(--red-5);
  136. --error-color-hover: var(--red-4);
  137. --error-color-active: var(--red-7);
  138. --error-color-outline: var(--red-2);
  139. --body-background: @black;
  140. --component-background: #141414;
  141. --popover-background: #1f1f1f;
  142. --popover-customize-border-color: #3a3a3a;
  143. --text-color: fade(@white, 85%);
  144. --text-color-secondary: fade(@white, 45%);
  145. --text-color-inverse: @white;
  146. --icon-color-hover: fade(@white, 75%);
  147. --heading-color: fade(@white, 85%);
  148. --item-hover-bg: fade(@white, 8%);
  149. // Border color
  150. --border-color-base: #434343;
  151. --border-color-split: #303030;
  152. //--border-color-inverse: @black;
  153. //
  154. --background-color-light: fade(@white, 4%);
  155. --background-color-base: fade(@white, 8%);
  156. // Disabled states
  157. --disabled-color: fade(@white, 30%);
  158. --disabled-bg: @background-color-base;
  159. --disabled-color-dark: fade(@white, 30%);
  160. // Shadow
  161. --shadow-color: rgba(0, 0, 0, 0.45);
  162. --shadow-color-inverse: @component-background;
  163. --box-shadow-base: @shadow-2;
  164. --shadow-1-up: 0 -6px 16px -8px rgba(0, 0, 0, 0.32),
  165. 0 -9px 28px 0 rgba(0, 0, 0, 0.2), 0 -12px 48px 16px rgba(0, 0, 0, 0.12);
  166. --shadow-1-down: 0 6px 16px -8px rgba(0, 0, 0, 0.32),
  167. 0 9px 28px 0 rgba(0, 0, 0, 0.2), 0 12px 48px 16px rgba(0, 0, 0, 0.12);
  168. --shadow-1-right: 6px 0 16px -8px rgba(0, 0, 0, 0.32),
  169. 9px 0 28px 0 rgba(0, 0, 0, 0.2), 12px 0 48px 16px rgba(0, 0, 0, 0.12);
  170. --shadow-2: 0 3px 6px -4px rgba(0, 0, 0, 0.48),
  171. 0 6px 16px 0 rgba(0, 0, 0, 0.32), 0 9px 28px 8px rgba(0, 0, 0, 0.2);
  172. // Buttons
  173. --btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  174. --btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  175. --btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  176. --btn-default-bg: transparent;
  177. --btn-default-ghost-color: @text-color;
  178. --btn-default-ghost-border: fade(@white, 25%);
  179. --btn-text-hover-bg: rgba(255, 255, 255, 0.03);
  180. --btn-text-active-bg: rgba(255, 255, 255, 0.04);
  181. // Checkbox
  182. --checkbox-check-bg: transparent;
  183. // Descriptions
  184. --descriptions-bg: @background-color-light;
  185. // Divider
  186. --divider-color: rgba(255, 255, 255, 12%);
  187. // Dropdown 有两个
  188. --dropdown-menu-submenu-disabled-bg: transparent;
  189. // Radio
  190. --radio-dot-disabled-color: fade(@white, 20%);
  191. --radio-solid-checked-color: @white;
  192. // Radio buttons
  193. --radio-disabled-button-checked-bg: fade(@white, 20%);
  194. --radio-disabled-button-checked-color: @disabled-color;
  195. // Layout
  196. --layout-body-background: @body-background;
  197. --layout-header-background: @popover-background;
  198. --layout-trigger-background: #262626;
  199. //--layout-sider-background-1: tint(#1f1f1f, 10%);
  200. // Dropdown 有两个
  201. --dropdown-menu-bg: @popover-background;
  202. // Input
  203. --input-placeholder-color: fade(@white, 30%);
  204. --input-icon-color: fade(@white, 30%);
  205. --input-bg: transparent;
  206. --input-number-handler-active-bg: @item-hover-bg;
  207. --input-icon-hover-color: fade(@white, 85%);
  208. // Mentions
  209. --mentions-dropdown-bg: @popover-background;
  210. // Select
  211. --select-dropdown-bg: @popover-background;
  212. --select-background: transparent;
  213. --select-clear-background: @component-background;
  214. --select-selection-item-bg: fade(@white, 8);
  215. --select-selection-item-border-color: @border-color-split;
  216. --select-multiple-disabled-background: @component-background;
  217. --select-multiple-item-disabled-color: #595959;
  218. --select-multiple-item-disabled-border-color: @popover-background;
  219. // Cascader
  220. --cascader-bg: transparent;
  221. --cascader-menu-bg: @popover-background;
  222. --cascader-menu-border-color-split: @border-color-split;
  223. // Tooltip
  224. --tooltip-bg: #434343;
  225. // Popover
  226. --popover-bg: @popover-background;
  227. // Modal
  228. --modal-header-bg: @popover-background;
  229. --modal-header-border-color-split: @border-color-split;
  230. --modal-content-bg: @popover-background;
  231. --modal-footer-border-color-split: @border-color-split;
  232. // Progress
  233. --progress-steps-item-bg: fade(@white, 8%);
  234. // Menu
  235. --menu-popup-bg: @popover-background;
  236. --menu-dark-bg: @popover-background;
  237. --menu-dark-inline-submenu-bg: @component-background;
  238. // Table
  239. --table-header-bg: #1d1d1d;
  240. --table-header-sort-bg: #262626;
  241. --table-body-sort-bg: fade(@white, 1%);
  242. --table-row-hover-bg: #262626;
  243. --table-expanded-row-bg: @table-header-bg;
  244. --table-header-cell-split-color: fade(@white, 8%);
  245. --table-header-sort-active-bg: #303030;
  246. --table-header-filter-active-bg: #434343;
  247. --table-filter-btns-bg: @popover-background;
  248. --table-filter-dropdown-bg: @popover-background;
  249. --table-expand-icon-bg: transparent;
  250. // TimePicker
  251. --picker-bg: transparent;
  252. --picker-basic-cell-disabled-bg: #303030;
  253. --picker-border-color: @border-color-split;
  254. // Calendar
  255. --calendar-bg: @popover-background;
  256. --calendar-input-bg: @calendar-bg;
  257. --calendar-border-color: transparent;
  258. --calendar-full-bg: @component-background;
  259. // Badge
  260. --badge-text-color: @white;
  261. // Rate
  262. --rate-star-bg: fade(@white, 12%);
  263. // Card
  264. --card-actions-background: @component-background;
  265. --card-skeleton-bg: #303030;
  266. --card-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.64),
  267. 0 3px 6px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 4px rgba(0, 0, 0, 0.36);
  268. // Comment
  269. --comment-bg: transparent;
  270. --comment-author-time-color: fade(@white, 30%);
  271. --comment-action-hover-color: fade(@white, 65%);
  272. // BackTop
  273. --back-top-bg: var(--tooltip-bg);
  274. --back-top-hover-bg: var(--border-color-split);
  275. // Avatar
  276. --avatar-bg: fade(@white, 30%);
  277. // Switch
  278. --switch-bg: @white;
  279. // Pagination
  280. --pagination-item-bg: transparent;
  281. --pagination-item-bg-active: transparent;
  282. --pagination-item-link-bg: transparent;
  283. --pagination-item-disabled-color-active: @black;
  284. --pagination-item-disabled-bg-active: fade(@white, 25%);
  285. --pagination-item-input-bg: @pagination-item-bg;
  286. // PageHeader
  287. --page-header-back-color: @icon-color;
  288. --page-header-ghost-bg: transparent;
  289. // Slider
  290. --slider-rail-background-color: #262626;
  291. --slider-rail-background-color-hover: @border-color-base;
  292. --slider-dot-border-color: @border-color-split;
  293. --slider-dot-border-color-active: @primary-4;
  294. // Tree
  295. --tree-bg: transparent;
  296. // Skeleton
  297. --skeleton-to-color: fade(@white, 16%);
  298. // Transfer
  299. --transfer-item-hover-bg: #262626;
  300. // Message
  301. --message-notice-content-bg: @popover-background;
  302. // List
  303. --list-customize-card-bg: transparent;
  304. // Drawer
  305. --drawer-bg: @popover-background;
  306. // Timeline
  307. --timeline-color: @border-color-split;
  308. --timeline-dot-color: @primary-color;
  309. // Steps
  310. --steps-nav-arrow-color: fade(@white, 20%);
  311. --steps-background: transparent;
  312. // Notification
  313. --notification-bg: @popover-background;
  314. // 侧边栏
  315. --sidebar-light-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
  316. --sidebar-dark-shadow: 0 4px 4px rgba(0, 0, 0, 0.6);
  317. // 顶栏
  318. --header-light-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  319. --header-dark-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  320. --header-tool-hover-bg: rgba(255, 255, 255, 0.05);
  321. --header-dark-tool-hover-bg: rgba(255, 255, 255, 0.05);
  322. --header-color-split: rgba(255, 255, 255, 0.15);
  323. // logo
  324. --logo-light-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
  325. --logo-dark-shadow: 0 3px 4px rgba(0, 0, 0, 0.6);
  326. //
  327. --gradient-min: fade(#303030, 20%);
  328. --gradient-max: fade(#303030, 40%);
  329. //
  330. --primary-fade-20: var(--primary-2);
  331. --black--fade--85: rgba(255, 255, 255, 0.85);
  332. --switch-shadow-color: 0 2px 4px rgb(0 35 11 / 20%);
  333. // workfolw design
  334. --node-wrap-box-color: #303030;
  335. --node-wrap-box-before-color: rgba(255, 255, 255, 0.09); // 箭头旁边
  336. --node-wrap-box-before-borde-color: rgba(255, 255, 255, 0.09); // 箭头
  337. --auto-judge-before-color: @component-background; // 箭头背景
  338. }
  339. // 表单设计器主题覆盖
  340. .snowy-theme-dark{
  341. --hint-color: #888;
  342. .form-designer-container-9136076486841527{
  343. --form-designer-primary-color: var(--primary-6);
  344. --primary-background-color: @component-background;
  345. --layout-background-color: fade(#9867f7, 12%);
  346. --layout-hover-bg-color: fade(#9867f7, 24%);
  347. --title-text-color: fade(@black, 85%);
  348. --border-color: var(--border-color-split);
  349. --component-background: #141414;
  350. }
  351. }