Ant Design Vue Pro一直还没支持暗黑主题,主要是Ant Design Vue 1.7.x也还没支持暗黑模式。

不过我看了下2.1.2的Ant Design Vue里面是支持了暗黑主题的:

方式一:在样式文件全量引入 antd.dark.less

1
@import '~ant-design-vue/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件

方式二: 是用在 webpack.config.js 使用 less-loader 按需引入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const { getThemeVariables } = require('ant-design-vue/dist/theme');
// webpack.config.js
module.exports = {
rules: [{
test: /\.less$/,
use: [{
loader: 'style-loader',
}, {
loader: 'css-loader', // translates CSS into CommonJS
}, {
loader: 'less-loader', // compiles Less to CSS
+ options: {
+ lessOptions: { // 如果使用less-loader@5,请移除 lessOptions 这一级直接配置选项。
+ modifyVars: getThemeVariables({
+ dark: true, // 开启暗黑模式
+ }),
+ javascriptEnabled: true,
+ },
+ },
}],
}],
};

看下了最新版的Ant Design Vue Pro,用的还是1.7.x的ant design vue。

其实也可以一个个重写颜色定义,但要适配的组件还是太多了,于是在想能不能把2.1.2的dark主题定义用到1.7.x,想必是可以直接用的。

看下了源码https://cdn.jsdelivr.net/npm/ant-design-vue@2.1.2/dist/theme.js

getThemeVariables里返回了一组less变量定义。

拿出里面的darkThemeSingle和darkThemeSingle新建一个dark.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005

var defaultTheme = {
// 'blue-base': '#1890ff',
'blue-base': '#5687bb',
'blue-1': "color(~`colorPalette('@{blue-6}', 1) `)",
'blue-2': "color(~`colorPalette('@{blue-6}', 2) `)",
'blue-3': "color(~`colorPalette('@{blue-6}', 3) `)",
'blue-4': "color(~`colorPalette('@{blue-6}', 4) `)",
'blue-5': "color(~`colorPalette('@{blue-6}', 5) `)",
'blue-6': '@blue-base',
'blue-7': "color(~`colorPalette('@{blue-6}', 7) `)",
'blue-8': "color(~`colorPalette('@{blue-6}', 8) `)",
'blue-9': "color(~`colorPalette('@{blue-6}', 9) `)",
'blue-10': "color(~`colorPalette('@{blue-6}', 10) `)",
'purple-base': '#722ed1',
'purple-1': "color(~`colorPalette('@{purple-6}', 1) `)",
'purple-2': "color(~`colorPalette('@{purple-6}', 2) `)",
'purple-3': "color(~`colorPalette('@{purple-6}', 3) `)",
'purple-4': "color(~`colorPalette('@{purple-6}', 4) `)",
'purple-5': "color(~`colorPalette('@{purple-6}', 5) `)",
'purple-6': '@purple-base',
'purple-7': "color(~`colorPalette('@{purple-6}', 7) `)",
'purple-8': "color(~`colorPalette('@{purple-6}', 8) `)",
'purple-9': "color(~`colorPalette('@{purple-6}', 9) `)",
'purple-10': "color(~`colorPalette('@{purple-6}', 10) `)",
'cyan-base': '#13c2c2',
'cyan-1': "color(~`colorPalette('@{cyan-6}', 1) `)",
'cyan-2': "color(~`colorPalette('@{cyan-6}', 2) `)",
'cyan-3': "color(~`colorPalette('@{cyan-6}', 3) `)",
'cyan-4': "color(~`colorPalette('@{cyan-6}', 4) `)",
'cyan-5': "color(~`colorPalette('@{cyan-6}', 5) `)",
'cyan-6': '@cyan-base',
'cyan-7': "color(~`colorPalette('@{cyan-6}', 7) `)",
'cyan-8': "color(~`colorPalette('@{cyan-6}', 8) `)",
'cyan-9': "color(~`colorPalette('@{cyan-6}', 9) `)",
'cyan-10': "color(~`colorPalette('@{cyan-6}', 10) `)",
'green-base': '#52c41a',
'green-1': "color(~`colorPalette('@{green-6}', 1) `)",
'green-2': "color(~`colorPalette('@{green-6}', 2) `)",
'green-3': "color(~`colorPalette('@{green-6}', 3) `)",
'green-4': "color(~`colorPalette('@{green-6}', 4) `)",
'green-5': "color(~`colorPalette('@{green-6}', 5) `)",
'green-6': '@green-base',
'green-7': "color(~`colorPalette('@{green-6}', 7) `)",
'green-8': "color(~`colorPalette('@{green-6}', 8) `)",
'green-9': "color(~`colorPalette('@{green-6}', 9) `)",
'green-10': "color(~`colorPalette('@{green-6}', 10) `)",
'magenta-base': '#eb2f96',
'magenta-1': "color(~`colorPalette('@{magenta-6}', 1) `)",
'magenta-2': "color(~`colorPalette('@{magenta-6}', 2) `)",
'magenta-3': "color(~`colorPalette('@{magenta-6}', 3) `)",
'magenta-4': "color(~`colorPalette('@{magenta-6}', 4) `)",
'magenta-5': "color(~`colorPalette('@{magenta-6}', 5) `)",
'magenta-6': '@magenta-base',
'magenta-7': "color(~`colorPalette('@{magenta-6}', 7) `)",
'magenta-8': "color(~`colorPalette('@{magenta-6}', 8) `)",
'magenta-9': "color(~`colorPalette('@{magenta-6}', 9) `)",
'magenta-10': "color(~`colorPalette('@{magenta-6}', 10) `)",
'pink-base': '#eb2f96',
'pink-1': "color(~`colorPalette('@{pink-6}', 1) `)",
'pink-2': "color(~`colorPalette('@{pink-6}', 2) `)",
'pink-3': "color(~`colorPalette('@{pink-6}', 3) `)",
'pink-4': "color(~`colorPalette('@{pink-6}', 4) `)",
'pink-5': "color(~`colorPalette('@{pink-6}', 5) `)",
'pink-6': '@pink-base',
'pink-7': "color(~`colorPalette('@{pink-6}', 7) `)",
'pink-8': "color(~`colorPalette('@{pink-6}', 8) `)",
'pink-9': "color(~`colorPalette('@{pink-6}', 9) `)",
'pink-10': "color(~`colorPalette('@{pink-6}', 10) `)",
'red-base': '#f5222d',
'red-1': "color(~`colorPalette('@{red-6}', 1) `)",
'red-2': "color(~`colorPalette('@{red-6}', 2) `)",
'red-3': "color(~`colorPalette('@{red-6}', 3) `)",
'red-4': "color(~`colorPalette('@{red-6}', 4) `)",
'red-5': "color(~`colorPalette('@{red-6}', 5) `)",
'red-6': '@red-base',
'red-7': "color(~`colorPalette('@{red-6}', 7) `)",
'red-8': "color(~`colorPalette('@{red-6}', 8) `)",
'red-9': "color(~`colorPalette('@{red-6}', 9) `)",
'red-10': "color(~`colorPalette('@{red-6}', 10) `)",
'orange-base': '#fa8c16',
'orange-1': "color(~`colorPalette('@{orange-6}', 1) `)",
'orange-2': "color(~`colorPalette('@{orange-6}', 2) `)",
'orange-3': "color(~`colorPalette('@{orange-6}', 3) `)",
'orange-4': "color(~`colorPalette('@{orange-6}', 4) `)",
'orange-5': "color(~`colorPalette('@{orange-6}', 5) `)",
'orange-6': '@orange-base',
'orange-7': "color(~`colorPalette('@{orange-6}', 7) `)",
'orange-8': "color(~`colorPalette('@{orange-6}', 8) `)",
'orange-9': "color(~`colorPalette('@{orange-6}', 9) `)",
'orange-10': "color(~`colorPalette('@{orange-6}', 10) `)",
'yellow-base': '#fadb14',
'yellow-1': "color(~`colorPalette('@{yellow-6}', 1) `)",
'yellow-2': "color(~`colorPalette('@{yellow-6}', 2) `)",
'yellow-3': "color(~`colorPalette('@{yellow-6}', 3) `)",
'yellow-4': "color(~`colorPalette('@{yellow-6}', 4) `)",
'yellow-5': "color(~`colorPalette('@{yellow-6}', 5) `)",
'yellow-6': '@yellow-base',
'yellow-7': "color(~`colorPalette('@{yellow-6}', 7) `)",
'yellow-8': "color(~`colorPalette('@{yellow-6}', 8) `)",
'yellow-9': "color(~`colorPalette('@{yellow-6}', 9) `)",
'yellow-10': "color(~`colorPalette('@{yellow-6}', 10) `)",
'volcano-base': '#fa541c',
'volcano-1': "color(~`colorPalette('@{volcano-6}', 1) `)",
'volcano-2': "color(~`colorPalette('@{volcano-6}', 2) `)",
'volcano-3': "color(~`colorPalette('@{volcano-6}', 3) `)",
'volcano-4': "color(~`colorPalette('@{volcano-6}', 4) `)",
'volcano-5': "color(~`colorPalette('@{volcano-6}', 5) `)",
'volcano-6': '@volcano-base',
'volcano-7': "color(~`colorPalette('@{volcano-6}', 7) `)",
'volcano-8': "color(~`colorPalette('@{volcano-6}', 8) `)",
'volcano-9': "color(~`colorPalette('@{volcano-6}', 9) `)",
'volcano-10': "color(~`colorPalette('@{volcano-6}', 10) `)",
'geekblue-base': '#2f54eb',
'geekblue-1': "color(~`colorPalette('@{geekblue-6}', 1) `)",
'geekblue-2': "color(~`colorPalette('@{geekblue-6}', 2) `)",
'geekblue-3': "color(~`colorPalette('@{geekblue-6}', 3) `)",
'geekblue-4': "color(~`colorPalette('@{geekblue-6}', 4) `)",
'geekblue-5': "color(~`colorPalette('@{geekblue-6}', 5) `)",
'geekblue-6': '@geekblue-base',
'geekblue-7': "color(~`colorPalette('@{geekblue-6}', 7) `)",
'geekblue-8': "color(~`colorPalette('@{geekblue-6}', 8) `)",
'geekblue-9': "color(~`colorPalette('@{geekblue-6}', 9) `)",
'geekblue-10': "color(~`colorPalette('@{geekblue-6}', 10) `)",
'lime-base': '#a0d911',
'lime-1': "color(~`colorPalette('@{lime-6}', 1) `)",
'lime-2': "color(~`colorPalette('@{lime-6}', 2) `)",
'lime-3': "color(~`colorPalette('@{lime-6}', 3) `)",
'lime-4': "color(~`colorPalette('@{lime-6}', 4) `)",
'lime-5': "color(~`colorPalette('@{lime-6}', 5) `)",
'lime-6': '@lime-base',
'lime-7': "color(~`colorPalette('@{lime-6}', 7) `)",
'lime-8': "color(~`colorPalette('@{lime-6}', 8) `)",
'lime-9': "color(~`colorPalette('@{lime-6}', 9) `)",
'lime-10': "color(~`colorPalette('@{lime-6}', 10) `)",
'gold-base': '#faad14',
'gold-1': "color(~`colorPalette('@{gold-6}', 1) `)",
'gold-2': "color(~`colorPalette('@{gold-6}', 2) `)",
'gold-3': "color(~`colorPalette('@{gold-6}', 3) `)",
'gold-4': "color(~`colorPalette('@{gold-6}', 4) `)",
'gold-5': "color(~`colorPalette('@{gold-6}', 5) `)",
'gold-6': '@gold-base',
'gold-7': "color(~`colorPalette('@{gold-6}', 7) `)",
'gold-8': "color(~`colorPalette('@{gold-6}', 8) `)",
'gold-9': "color(~`colorPalette('@{gold-6}', 9) `)",
'gold-10': "color(~`colorPalette('@{gold-6}', 10) `)",
'preset-colors': 'pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,\n purple',
theme: 'default',
'ant-prefix': 'ant',
'html-selector': 'html',
'primary-color': '@blue-6',
'info-color': '@primary-color',
'success-color': '@green-6',
'processing-color': '@blue-6',
'error-color': '@red-5',
'highlight-color': '@red-5',
'warning-color': '@gold-6',
'normal-color': '#d9d9d9',
white: '#fff',
black: '#000',
'primary-1': "color(~`colorPalette('@{primary-color}', 1) `)",
'primary-2': "color(~`colorPalette('@{primary-color}', 2) `)",
'primary-3': "color(~`colorPalette('@{primary-color}', 3) `)",
'primary-4': "color(~`colorPalette('@{primary-color}', 4) `)",
'primary-5': "color(\n ~`colorPalette('@{primary-color}', 5) `\n)",
'primary-6': '@primary-color',
'primary-7': "color(~`colorPalette('@{primary-color}', 7) `)",
'primary-8': "color(~`colorPalette('@{primary-color}', 8) `)",
'primary-9': "color(~`colorPalette('@{primary-color}', 9) `)",
'primary-10': "color(~`colorPalette('@{primary-color}', 10) `)",
'body-background': '#fff',
'component-background': '#fff',
'popover-background': '@component-background',
'popover-customize-border-color': '@border-color-split',
'font-family':
"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n 'Noto Color Emoji'",
'code-family': "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
'text-color': 'fade(@black, 85%)',
'text-color-secondary': 'fade(@black, 45%)',
'text-color-inverse': '@white',
'icon-color': 'inherit',
'icon-color-hover': 'fade(@black, 75%)',
'heading-color': 'fade(@black, 85%)',
'text-color-dark': 'fade(@white, 85%)',
'text-color-secondary-dark': 'fade(@white, 65%)',
'text-selection-bg': '@primary-color',
'font-variant-base': 'tabular-nums',
'font-feature-settings-base': 'tnum',
'font-size-base': '14px',
'font-size-lg': '@font-size-base + 2px',
'font-size-sm': '12px',
'heading-1-size': 'ceil(@font-size-base * 2.71)',
'heading-2-size': 'ceil(@font-size-base * 2.14)',
'heading-3-size': 'ceil(@font-size-base * 1.71)',
'heading-4-size': 'ceil(@font-size-base * 1.42)',
'heading-5-size': 'ceil(@font-size-base * 1.14)',
'line-height-base': '1.5715',
'border-radius-base': '2px',
'border-radius-sm': '@border-radius-base',
'padding-lg': '24px',
'padding-md': '16px',
'padding-sm': '12px',
'padding-xs': '8px',
'padding-xss': '4px',
'control-padding-horizontal': '@padding-sm',
'control-padding-horizontal-sm': '@padding-xs',
'margin-lg': '24px',
'margin-md': '16px',
'margin-sm': '12px',
'margin-xs': '8px',
'margin-xss': '4px',
'height-base': '32px',
'height-lg': '40px',
'height-sm': '24px',
'item-active-bg': '@primary-1',
'item-hover-bg': '#f5f5f5',
'iconfont-css-prefix': 'anticon',
'link-color': '@primary-color',
'link-hover-color': "color(~`colorPalette('@{link-color}', 5) `)",
'link-active-color': "color(~`colorPalette('@{link-color}', 7) `)",
'link-decoration': 'none',
'link-hover-decoration': 'none',
'link-focus-decoration': 'none',
'link-focus-outline': '0',
'ease-base-out': 'cubic-bezier(0.7, 0.3, 0.1, 1)',
'ease-base-in': 'cubic-bezier(0.9, 0, 0.3, 0.7)',
'ease-out': 'cubic-bezier(0.215, 0.61, 0.355, 1)',
'ease-in': 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',
'ease-in-out': 'cubic-bezier(0.645, 0.045, 0.355, 1)',
'ease-out-back': 'cubic-bezier(0.12, 0.4, 0.29, 1.46)',
'ease-in-back': 'cubic-bezier(0.71, -0.46, 0.88, 0.6)',
'ease-in-out-back': 'cubic-bezier(0.71, -0.46, 0.29, 1.46)',
'ease-out-circ': 'cubic-bezier(0.08, 0.82, 0.17, 1)',
'ease-in-circ': 'cubic-bezier(0.6, 0.04, 0.98, 0.34)',
'ease-in-out-circ': 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
'ease-out-quint': 'cubic-bezier(0.23, 1, 0.32, 1)',
'ease-in-quint': 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',
'ease-in-out-quint': 'cubic-bezier(0.86, 0, 0.07, 1)',
'border-color-base': 'hsv(0, 0, 85%)',
'border-color-split': 'hsv(0, 0, 94%)',
'border-color-inverse': '@white',
'border-width-base': '1px',
'border-style-base': 'solid',
'outline-blur-size': '0',
'outline-width': '2px',
'outline-color': '@primary-color',
'background-color-light': 'hsv(0, 0, 98%)',
'background-color-base': 'hsv(0, 0, 96%)',
'disabled-color': 'fade(#000, 25%)',
'disabled-bg': '@background-color-base',
'disabled-color-dark': 'fade(#fff, 35%)',
'shadow-color': 'rgba(0, 0, 0, 0.15)',
'shadow-color-inverse': '@component-background',
'box-shadow-base': '@shadow-1-down',
'shadow-1-up': '0 -2px 8px @shadow-color',
'shadow-1-down': '0 2px 8px @shadow-color',
'shadow-1-left': '-2px 0 8px @shadow-color',
'shadow-1-right': '2px 0 8px @shadow-color',
'shadow-2': '0 4px 12px @shadow-color',
'btn-font-weight': '400',
'btn-border-radius-base': '@border-radius-base',
'btn-border-radius-sm': '@border-radius-base',
'btn-border-width': '@border-width-base',
'btn-border-style': '@border-style-base',
'btn-shadow': '0 2px 0 rgba(0, 0, 0, 0.015)',
'btn-primary-shadow': '0 2px 0 rgba(0, 0, 0, 0.045)',
'btn-text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.12)',
'btn-primary-color': '#fff',
'btn-primary-bg': '@primary-color',
'btn-default-color': '@text-color',
'btn-default-bg': '@component-background',
'btn-default-border': '@border-color-base',
'btn-danger-color': '#fff',
'btn-danger-bg': "color(~`colorPalette('@{error-color}', 5) `)",
'btn-danger-border': "color(~`colorPalette('@{error-color}', 5) `)",
'btn-disable-color': '@disabled-color',
'btn-disable-bg': '@disabled-bg',
'btn-disable-border': '@border-color-base',
'btn-default-ghost-color': '@component-background',
'btn-default-ghost-bg': 'transparent',
'btn-default-ghost-border': '@component-background',
'btn-padding-base': '0 @padding-md - 1px',
'btn-font-size-lg': '@font-size-lg',
'btn-font-size-sm': '@font-size-base',
'btn-padding-lg': '@btn-padding-base',
'btn-padding-sm': '0 @padding-xs - 1px',
'btn-height-base': '32px',
'btn-height-lg': '40px',
'btn-height-sm': '24px',
'btn-circle-size': '@btn-height-base',
'btn-circle-size-lg': '@btn-height-lg',
'btn-circle-size-sm': '@btn-height-sm',
'btn-square-size': '@btn-height-base',
'btn-square-size-lg': '@btn-height-lg',
'btn-square-size-sm': '@btn-height-sm',
'btn-group-border': '@primary-5',
'btn-text-hover-bg': 'rgba(0, 0, 0, 0.018)',
'checkbox-size': '16px',
'checkbox-color': '@primary-color',
'checkbox-check-color': '#fff',
'checkbox-check-bg': '@checkbox-check-color',
'checkbox-border-width': '@border-width-base',
'descriptions-bg': '#fafafa',
'descriptions-title-margin-bottom': '20px',
'descriptions-default-padding': '@padding-md @padding-lg',
'descriptions-middle-padding': '@padding-sm @padding-lg',
'descriptions-small-padding': '@padding-xs @padding-md',
'descriptions-item-padding-bottom': '@padding-md',
'descriptions-item-trailing-colon': 'true',
'descriptions-item-label-colon-margin-right': '8px',
'descriptions-item-label-colon-margin-left': '2px',
'descriptions-extra-color': '@text-color',
'divider-text-padding': '1em',
'divider-orientation-margin': '5%',
'divider-color': 'rgba(0, 0, 0, 6%)',
'dropdown-selected-color': '@primary-color',
'dropdown-menu-submenu-disabled-bg': '@component-background',
'empty-font-size': '@font-size-base',
'radio-size': '16px',
'radio-top': '0px',
'radio-border-width': '1px',
'radio-dot-size': '@radio-size - 8px',
'radio-dot-color': '@primary-color',
'radio-dot-disabled-color': 'fade(@black, 20%)',
'radio-solid-checked-color': '@component-background',
'radio-button-bg': '@btn-default-bg',
'radio-button-checked-bg': '@btn-default-bg',
'radio-button-color': '@btn-default-color',
'radio-button-hover-color': '@primary-5',
'radio-button-active-color': '@primary-7',
'radio-disabled-button-checked-bg': 'tint(@black, 90%)',
'radio-disabled-button-checked-color': '@disabled-color',
'radio-wrapper-margin-right': '8px',
'screen-xs': '480px',
'screen-xs-min': '@screen-xs',
'screen-sm': '576px',
'screen-sm-min': '@screen-sm',
'screen-md': '768px',
'screen-md-min': '@screen-md',
'screen-lg': '992px',
'screen-lg-min': '@screen-lg',
'screen-xl': '1200px',
'screen-xl-min': '@screen-xl',
'screen-xxl': '1600px',
'screen-xxl-min': '@screen-xxl',
'screen-xs-max': '(@screen-sm-min - 1px)',
'screen-sm-max': '(@screen-md-min - 1px)',
'screen-md-max': '(@screen-lg-min - 1px)',
'screen-lg-max': '(@screen-xl-min - 1px)',
'screen-xl-max': '(@screen-xxl-min - 1px)',
'grid-columns': '24',
'grid-gutter-width': '0',
'layout-body-background': '#f0f2f5',
'layout-header-background': '#001529',
'layout-footer-background': '@layout-body-background',
'layout-header-height': '64px',
'layout-header-padding': '0 50px',
'layout-footer-padding': '24px 50px',
'layout-sider-background': '@layout-header-background',
'layout-trigger-height': '48px',
'layout-trigger-background': '#002140',
'layout-trigger-color': '#fff',
'layout-zero-trigger-width': '36px',
'layout-zero-trigger-height': '42px',
'layout-sider-background-light': '#fff',
'layout-trigger-background-light': '#fff',
'layout-trigger-color-light': '@text-color',
'zindex-badge': '1',
'zindex-table-fixed': '1',
'zindex-affix': '10',
'zindex-back-top': '10',
'zindex-picker-panel': '10',
'zindex-popup-close': '10',
'zindex-modal': '1000',
'zindex-modal-mask': '1000',
'zindex-message': '1010',
'zindex-notification': '1010',
'zindex-popover': '1030',
'zindex-dropdown': '1050',
'zindex-picker': '1050',
'zindex-tooltip': '1060',
'zindex-image': '1080',
'animation-duration-slow': '0.3s',
'animation-duration-base': '0.2s',
'animation-duration-fast': '0.1s',
'collapse-panel-border-radius': '@border-radius-base',
'dropdown-menu-bg': '@component-background',
'dropdown-vertical-padding': '5px',
'dropdown-edge-child-vertical-padding': '4px',
'dropdown-font-size': '@font-size-base',
'dropdown-line-height': '22px',
'label-required-color': '@highlight-color',
'label-color': '@heading-color',
'form-warning-input-bg': '@input-bg',
'form-item-margin-bottom': '24px',
'form-item-trailing-colon': 'true',
'form-vertical-label-padding': '0 0 8px',
'form-vertical-label-margin': '0',
'form-item-label-colon-margin-right': '8px',
'form-item-label-colon-margin-left': '2px',
'form-error-input-bg': '@input-bg',
'input-height-base': '32px',
'input-height-lg': '40px',
'input-height-sm': '24px',
'input-padding-horizontal': '@control-padding-horizontal - 1px',
'input-padding-horizontal-base': '@input-padding-horizontal',
'input-padding-horizontal-sm': '@control-padding-horizontal-sm - 1px',
'input-padding-horizontal-lg': '@input-padding-horizontal',
'input-padding-vertical-base': '4px',
'input-padding-vertical-sm': '0px',
'input-padding-vertical-lg': '6.5px',
'input-placeholder-color': 'hsv(0, 0, 75%)',
'input-color': '@text-color',
'input-icon-color': '@input-color',
'input-border-color': '@border-color-base',
'input-bg': '@component-background',
'input-number-hover-border-color': '@input-hover-border-color',
'input-number-handler-active-bg': '#f4f4f4',
'input-number-handler-hover-bg': '@primary-5',
'input-number-handler-bg': '@component-background',
'input-number-handler-border-color': '@border-color-base',
'input-addon-bg': '@background-color-light',
'input-hover-border-color': '@primary-5',
'input-disabled-bg': '@disabled-bg',
'input-outline-offset': '0 0',
'input-icon-hover-color': 'fade(@black, 85%)',
'mentions-dropdown-bg': '@component-background',
'mentions-dropdown-menu-item-hover-bg': '@mentions-dropdown-bg',
'select-border-color': '@border-color-base',
'select-item-selected-color': '@text-color',
'select-item-selected-font-weight': '600',
'select-dropdown-bg': '@component-background',
'select-item-selected-bg': '@primary-1',
'select-item-active-bg': '@item-hover-bg',
'select-dropdown-vertical-padding': '@dropdown-vertical-padding',
'select-dropdown-font-size': '@dropdown-font-size',
'select-dropdown-line-height': '@dropdown-line-height',
'select-dropdown-height': '32px',
'select-background': '@component-background',
'select-clear-background': '@select-background',
'select-selection-item-bg': '@background-color-base',
'select-selection-item-border-color': '@border-color-split',
'select-single-item-height-lg': '40px',
'select-multiple-item-height': '@input-height-base - @input-padding-vertical-base * 2',
'select-multiple-item-height-lg': '32px',
'select-multiple-item-spacing-half': 'ceil((@input-padding-vertical-base / 2))',
'select-multiple-disabled-background': '@input-disabled-bg',
'select-multiple-item-disabled-color': '#bfbfbf',
'select-multiple-item-disabled-border-color': '@select-border-color',
'cascader-bg': '@component-background',
'cascader-item-selected-bg': '@primary-1',
'cascader-menu-bg': '@component-background',
'cascader-menu-border-color-split': '@border-color-split',
'cascader-dropdown-vertical-padding': '@dropdown-vertical-padding',
'cascader-dropdown-edge-child-vertical-padding': '@dropdown-edge-child-vertical-padding',
'cascader-dropdown-font-size': '@dropdown-font-size',
'cascader-dropdown-line-height': '@dropdown-line-height',
'anchor-border-color': '@border-color-split',
'tooltip-max-width': '250px',
'tooltip-color': '#fff',
'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
'tooltip-arrow-width': '5px',
'tooltip-distance': '@tooltip-arrow-width - 1px + 4px',
'tooltip-arrow-color': '@tooltip-bg',
'popover-bg': '@component-background',
'popover-color': '@text-color',
'popover-min-width': '177px',
'popover-arrow-width': '6px',
'popover-arrow-color': '@popover-bg',
'popover-arrow-outer-color': '@popover-bg',
'popover-distance': '@popover-arrow-width + 4px',
'modal-body-padding': '24px',
'modal-header-bg': '@component-background',
'modal-header-border-color-split': '@border-color-split',
'modal-content-bg': '@component-background',
'modal-heading-color': '@heading-color',
'modal-footer-bg': 'transparent',
'modal-footer-border-color-split': '@border-color-split',
'modal-mask-bg': 'fade(@black, 45%)',
'progress-default-color': '@processing-color',
'progress-remaining-color': '@background-color-base',
'progress-text-color': '@text-color',
'progress-radius': '100px',
'menu-inline-toplevel-item-height': '40px',
'menu-item-height': '40px',
'menu-collapsed-width': '80px',
'menu-bg': '@component-background',
'menu-popup-bg': '@component-background',
'menu-item-color': '@text-color',
'menu-highlight-color': '@primary-color',
'menu-item-active-bg': '@item-active-bg',
'menu-item-active-border-width': '3px',
'menu-item-group-title-color': '@text-color-secondary',
'menu-icon-size': '@font-size-base',
'menu-icon-size-lg': '@font-size-lg',
'menu-item-vertical-margin': '4px',
'menu-item-font-size': '@font-size-base',
'menu-item-boundary-margin': '8px',
'menu-dark-color': '@text-color-secondary-dark',
'menu-dark-bg': '@layout-header-background',
'menu-dark-arrow-color': '#fff',
'menu-dark-submenu-bg': '#000c17',
'menu-dark-highlight-color': '#fff',
'menu-dark-item-active-bg': '@primary-color',
'menu-dark-selected-item-icon-color': '@white',
'menu-dark-selected-item-text-color': '@white',
'menu-dark-item-hover-bg': 'transparent',
'spin-dot-size-sm': '14px',
'spin-dot-size': '20px',
'spin-dot-size-lg': '32px',
'table-bg': '@component-background',
'table-header-bg': '@background-color-light',
'table-header-color': '@heading-color',
'table-header-sort-bg': '@background-color-base',
'table-body-sort-bg': 'rgba(0, 0, 0, 0.01)',
'table-row-hover-bg': '@primary-1',
'table-selected-row-color': 'inherit',
'table-selected-row-bg': '@primary-1',
'table-body-selected-sort-bg': '@table-selected-row-bg',
'table-selected-row-hover-bg': 'darken(@table-selected-row-bg, 2%)',
'table-expanded-row-bg': '#fbfbfb',
'table-padding-vertical': '16px',
'table-padding-horizontal': '16px',
'table-border-radius-base': '@border-radius-base',
'table-footer-bg': '@background-color-light',
'table-footer-color': '@heading-color',
'table-header-bg-sm': 'transparent',
'table-header-sort-active-bg': 'darken(@table-header-bg, 3%)',
'table-header-filter-active-bg': 'darken(@table-header-sort-active-bg, 5%)',
'tag-default-bg': '@background-color-light',
'tag-default-color': '@text-color',
'tag-font-size': '@font-size-sm',
'tag-line-height': '20px',
'time-picker-panel-column-width': '56px',
'time-picker-panel-width': '@time-picker-panel-column-width * 3',
'time-picker-selected-bg': '@background-color-base',
'carousel-dot-width': '16px',
'carousel-dot-height': '3px',
'carousel-dot-active-width': '24px',
'badge-height': '20px',
'badge-dot-size': '6px',
'badge-font-size': '@font-size-sm',
'badge-font-weight': 'normal',
'badge-status-size': '6px',
'badge-text-color': '@component-background',
'rate-star-color': '@yellow-6',
'rate-star-bg': '@border-color-split',
'card-head-color': '@heading-color',
'card-head-background': 'transparent',
'card-head-padding': '16px',
'card-inner-head-padding': '12px',
'card-padding-base': '24px',
'card-actions-background': '@background-color-light',
'card-skeleton-bg': '#cfd8dc',
'card-background': '@component-background',
'card-shadow': '0 2px 8px rgba(0, 0, 0, 0.09)',
'card-radius': '@border-radius-sm',
'comment-bg': 'inherit',
'comment-padding-base': '16px 0',
'comment-nest-indent': '44px',
'comment-font-size-base': '@font-size-base',
'comment-font-size-sm': '@font-size-sm',
'comment-author-name-color': '@text-color-secondary',
'comment-author-time-color': '#ccc',
'comment-action-color': '@text-color-secondary',
'comment-action-hover-color': '#595959',
'tabs-card-head-background': '@background-color-light',
'tabs-card-height': '40px',
'tabs-card-active-color': '@primary-color',
'tabs-title-font-size': '@font-size-base',
'tabs-title-font-size-lg': '@font-size-lg',
'tabs-title-font-size-sm': '@font-size-base',
'tabs-ink-bar-color': '@primary-color',
'tabs-bar-margin': '0 0 16px 0',
'tabs-horizontal-margin': '0 32px 0 0',
'tabs-horizontal-padding': '12px 16px',
'tabs-horizontal-padding-lg': '16px',
'tabs-horizontal-padding-sm': '8px 16px',
'tabs-vertical-padding': '8px 24px',
'tabs-vertical-margin': '0 0 16px 0',
'tabs-scrolling-size': '32px',
'tabs-highlight-color': '@primary-color',
'tabs-hover-color': '@primary-5',
'tabs-active-color': '@primary-7',
'tabs-card-gutter': '2px',
'tabs-card-tab-active-border-top': '2px solid transparent',
'back-top-color': '#fff',
'back-top-bg': '@text-color-secondary',
'back-top-hover-bg': '@text-color',
'avatar-size-base': '32px',
'avatar-size-lg': '40px',
'avatar-size-sm': '24px',
'avatar-font-size-base': '18px',
'avatar-font-size-lg': '24px',
'avatar-font-size-sm': '14px',
'avatar-bg': '#ccc',
'avatar-color': '#fff',
'avatar-border-radius': '@border-radius-base',
'switch-height': '22px',
'switch-sm-height': '16px',
'switch-sm-checked-margin-left': '-(@switch-sm-height - 3px)',
'switch-disabled-opacity': '0.4',
'switch-color': '@primary-color',
'switch-bg': '@component-background',
'switch-shadow-color': 'fade(#00230b, 20%)',
'pagination-item-bg': '@component-background',
'pagination-item-size': '32px',
'pagination-item-size-sm': '24px',
'pagination-font-family': 'Arial',
'pagination-font-weight-active': '500',
'pagination-item-bg-active': '@component-background',
'pagination-item-link-bg': '@component-background',
'pagination-item-disabled-color-active': '@white',
'pagination-item-disabled-bg-active': 'darken(@disabled-bg, 10%)',
'pagination-item-input-bg': '@component-background',
'page-header-padding': '24px',
'page-header-padding-vertical': '16px',
'page-header-padding-breadcrumb': '12px',
'page-header-back-color': '#000',
'breadcrumb-base-color': '@text-color-secondary',
'breadcrumb-last-item-color': '@text-color',
'breadcrumb-font-size': '@font-size-base',
'breadcrumb-icon-font-size': '@font-size-base',
'breadcrumb-link-color': '@text-color-secondary',
'breadcrumb-link-color-hover': '@primary-5',
'breadcrumb-separator-color': '@text-color-secondary',
'breadcrumb-separator-margin': '0 @padding-xs',
'slider-margin': '14px 6px 10px',
'slider-rail-background-color': '@background-color-base',
'slider-rail-background-color-hover': '#e1e1e1',
'slider-track-background-color': '@primary-3',
'slider-track-background-color-hover': '@primary-4',
'slider-handle-border-width': '2px',
'slider-handle-background-color': '@component-background',
'slider-handle-color': '@primary-3',
'slider-handle-color-hover': '@primary-4',
'slider-handle-color-focus': 'tint(@primary-color, 20%)',
'slider-handle-color-focus-shadow': 'fade(@primary-color, 20%)',
'slider-handle-color-tooltip-open': '@primary-color',
'slider-handle-shadow': '0',
'slider-dot-border-color': '@border-color-split',
'slider-dot-border-color-active': 'tint(@primary-color, 50%)',
'slider-disabled-color': '@disabled-color',
'slider-disabled-background-color': '@component-background',
'tree-title-height': '24px',
'tree-child-padding': '18px',
'tree-directory-selected-color': '#fff',
'tree-directory-selected-bg': '@primary-color',
'tree-node-hover-bg': '@item-hover-bg',
'tree-node-selected-bg': '@primary-2',
'collapse-header-padding': '12px 16px',
'collapse-header-padding-extra': '40px',
'collapse-header-bg': '@background-color-light',
'collapse-content-padding': '@padding-md',
'collapse-content-bg': '@component-background',
'skeleton-color': '#f2f2f2',
'skeleton-to-color': 'shade(@skeleton-color, 5%)',
'transfer-header-height': '40px',
'transfer-disabled-bg': '@disabled-bg',
'transfer-list-height': '200px',
'transfer-item-hover-bg': '@item-hover-bg',
'message-notice-content-padding': '10px 16px',
'message-notice-content-bg': '@component-background',
'wave-animation-width': '6px',
'alert-success-border-color': "~`colorPalette('@{success-color}', 3) `",
'alert-success-bg-color': "~`colorPalette('@{success-color}', 1) `",
'alert-success-icon-color': '@success-color',
'alert-info-border-color': "~`colorPalette('@{info-color}', 3) `",
'alert-info-bg-color': "~`colorPalette('@{info-color}', 1) `",
'alert-info-icon-color': '@info-color',
'alert-warning-border-color': "~`colorPalette('@{warning-color}', 3) `",
'alert-warning-bg-color': "~`colorPalette('@{warning-color}', 1) `",
'alert-warning-icon-color': '@warning-color',
'alert-error-border-color': "~`colorPalette('@{error-color}', 3) `",
'alert-error-bg-color': "~`colorPalette('@{error-color}', 1) `",
'alert-error-icon-color': '@error-color',
'list-header-background': 'transparent',
'list-footer-background': 'transparent',
'list-empty-text-padding': '@padding-md',
'list-item-padding': '@padding-sm 0',
'list-item-meta-margin-bottom': '@padding-md',
'list-item-meta-avatar-margin-right': '@padding-md',
'list-item-meta-title-margin-bottom': '@padding-sm',
'statistic-title-font-size': '@font-size-base',
'statistic-content-font-size': '24px',
'statistic-unit-font-size': '16px',
'statistic-font-family': '@font-family',
'drawer-header-padding': '16px 24px',
'drawer-body-padding': '24px',
'drawer-bg': '@component-background',
'timeline-width': '2px',
'timeline-color': '@border-color-split',
'timeline-dot-border-width': '2px',
'timeline-dot-color': '@primary-color',
'timeline-dot-bg': '@component-background',
'typography-title-font-weight': '600',
'typography-title-margin-top': '1.2em',
'typography-title-margin-bottom': '0.5em',
'image-size-base': '48px',
'image-font-size-base': '24px',
'image-bg': '#f5f5f5',
'image-color': '#fff',
'image-preview-operation-size': '18px',
'image-preview-operation-color': '@text-color-dark',
'image-preview-operation-disabled-color': 'fade(@image-preview-operation-color, 45%)',
'steps-nav-arrow-color': 'fade(@black, 25%)',
'steps-background': '@component-background',
'notification-bg': '@component-background',
'notification-padding-vertical': '16px',
'notification-padding-horizontal': '24px'
}

var darkThemeSingle = {
theme: 'dark',
'blue-1': "mix(color(~`colorPalette('@{blue-base}', 8) `), @component-background, 15%)",
'blue-2': "mix(color(~`colorPalette('@{blue-base}', 7) `), @component-background, 25%)",
'blue-3': 'mix(@blue-base, @component-background, 30%)',
'blue-4': 'mix(@blue-base, @component-background, 45%)',
'blue-5': 'mix(@blue-base, @component-background, 65%)',
'blue-6': 'mix(@blue-base, @component-background, 85%)',
'blue-7': "mix(color(~`colorPalette('@{blue-base}', 5) `), @component-background, 90%)",
'blue-8': "mix(color(~`colorPalette('@{blue-base}', 4) `), @component-background, 95%)",
'blue-9': "mix(color(~`colorPalette('@{blue-base}', 3) `), @component-background, 97%)",
'blue-10': "mix(color(~`colorPalette('@{blue-base}', 2) `), @component-background, 98%)",
'purple-1': "mix(color(~`colorPalette('@{purple-base}', 8) `), @component-background, 15%)",
'purple-2': "mix(color(~`colorPalette('@{purple-base}', 7) `), @component-background, 25%)",
'purple-3': 'mix(@purple-base, @component-background, 30%)',
'purple-4': 'mix(@purple-base, @component-background, 45%)',
'purple-5': 'mix(@purple-base, @component-background, 65%)',
'purple-6': 'mix(@purple-base, @component-background, 85%)',
'purple-7': "mix(color(~`colorPalette('@{purple-base}', 5) `), @component-background, 90%)",
'purple-8': "mix(color(~`colorPalette('@{purple-base}', 4) `), @component-background, 95%)",
'purple-9': "mix(color(~`colorPalette('@{purple-base}', 3) `), @component-background, 97%)",
'purple-10': "mix(color(~`colorPalette('@{purple-base}', 2) `), @component-background, 98%)",
'cyan-1': "mix(color(~`colorPalette('@{cyan-base}', 8) `), @component-background, 15%)",
'cyan-2': "mix(color(~`colorPalette('@{cyan-base}', 7) `), @component-background, 25%)",
'cyan-3': 'mix(@cyan-base, @component-background, 30%)',
'cyan-4': 'mix(@cyan-base, @component-background, 45%)',
'cyan-5': 'mix(@cyan-base, @component-background, 65%)',
'cyan-6': 'mix(@cyan-base, @component-background, 85%)',
'cyan-7': "mix(color(~`colorPalette('@{cyan-base}', 5) `), @component-background, 90%)",
'cyan-8': "mix(color(~`colorPalette('@{cyan-base}', 4) `), @component-background, 95%)",
'cyan-9': "mix(color(~`colorPalette('@{cyan-base}', 3) `), @component-background, 97%)",
'cyan-10': "mix(color(~`colorPalette('@{cyan-base}', 2) `), @component-background, 98%)",
'green-1': "mix(color(~`colorPalette('@{green-base}', 8) `), @component-background, 15%)",
'green-2': "mix(color(~`colorPalette('@{green-base}', 7) `), @component-background, 25%)",
'green-3': 'mix(@green-base, @component-background, 30%)',
'green-4': 'mix(@green-base, @component-background, 45%)',
'green-5': 'mix(@green-base, @component-background, 65%)',
'green-6': 'mix(@green-base, @component-background, 85%)',
'green-7': "mix(color(~`colorPalette('@{green-base}', 5) `), @component-background, 90%)",
'green-8': "mix(color(~`colorPalette('@{green-base}', 4) `), @component-background, 95%)",
'green-9': "mix(color(~`colorPalette('@{green-base}', 3) `), @component-background, 97%)",
'green-10': "mix(color(~`colorPalette('@{green-base}', 2) `), @component-background, 98%)",
'magenta-1': "mix(color(~`colorPalette('@{magenta-base}', 8) `), @component-background, 15%)",
'magenta-2': "mix(color(~`colorPalette('@{magenta-base}', 7) `), @component-background, 25%)",
'magenta-3': 'mix(@magenta-base, @component-background, 30%)',
'magenta-4': 'mix(@magenta-base, @component-background, 45%)',
'magenta-5': 'mix(@magenta-base, @component-background, 65%)',
'magenta-6': 'mix(@magenta-base, @component-background, 85%)',
'magenta-7': "mix(color(~`colorPalette('@{magenta-base}', 5) `), @component-background, 90%)",
'magenta-8': "mix(color(~`colorPalette('@{magenta-base}', 4) `), @component-background, 95%)",
'magenta-9': "mix(color(~`colorPalette('@{magenta-base}', 3) `), @component-background, 97%)",
'magenta-10': "mix(color(~`colorPalette('@{magenta-base}', 2) `), @component-background, 98%)",
'pink-1': "mix(color(~`colorPalette('@{pink-base}', 8) `), @component-background, 15%)",
'pink-2': "mix(color(~`colorPalette('@{pink-base}', 7) `), @component-background, 25%)",
'pink-3': 'mix(@pink-base, @component-background, 30%)',
'pink-4': 'mix(@pink-base, @component-background, 45%)',
'pink-5': 'mix(@pink-base, @component-background, 65%)',
'pink-6': 'mix(@pink-base, @component-background, 85%)',
'pink-7': "mix(color(~`colorPalette('@{pink-base}', 5) `), @component-background, 90%)",
'pink-8': "mix(color(~`colorPalette('@{pink-base}', 4) `), @component-background, 95%)",
'pink-9': "mix(color(~`colorPalette('@{pink-base}', 3) `), @component-background, 97%)",
'pink-10': "mix(color(~`colorPalette('@{pink-base}', 2) `), @component-background, 98%)",
'red-1': "mix(color(~`colorPalette('@{red-base}', 8) `), @component-background, 15%)",
'red-2': "mix(color(~`colorPalette('@{red-base}', 7) `), @component-background, 25%)",
'red-3': 'mix(@red-base, @component-background, 30%)',
'red-4': 'mix(@red-base, @component-background, 45%)',
'red-5': 'mix(@red-base, @component-background, 65%)',
'red-6': 'mix(@red-base, @component-background, 85%)',
'red-7': "mix(color(~`colorPalette('@{red-base}', 5) `), @component-background, 90%)",
'red-8': "mix(color(~`colorPalette('@{red-base}', 4) `), @component-background, 95%)",
'red-9': "mix(color(~`colorPalette('@{red-base}', 3) `), @component-background, 97%)",
'red-10': "mix(color(~`colorPalette('@{red-base}', 2) `), @component-background, 98%)",
'orange-1': "mix(color(~`colorPalette('@{orange-base}', 8) `), @component-background, 15%)",
'orange-2': "mix(color(~`colorPalette('@{orange-base}', 7) `), @component-background, 25%)",
'orange-3': 'mix(@orange-base, @component-background, 30%)',
'orange-4': 'mix(@orange-base, @component-background, 45%)',
'orange-5': 'mix(@orange-base, @component-background, 65%)',
'orange-6': 'mix(@orange-base, @component-background, 85%)',
'orange-7': "mix(color(~`colorPalette('@{orange-base}', 5) `), @component-background, 90%)",
'orange-8': "mix(color(~`colorPalette('@{orange-base}', 4) `), @component-background, 95%)",
'orange-9': "mix(color(~`colorPalette('@{orange-base}', 3) `), @component-background, 97%)",
'orange-10': "mix(color(~`colorPalette('@{orange-base}', 2) `), @component-background, 98%)",
'yellow-1': "mix(color(~`colorPalette('@{yellow-base}', 8) `), @component-background, 15%)",
'yellow-2': "mix(color(~`colorPalette('@{yellow-base}', 7) `), @component-background, 25%)",
'yellow-3': 'mix(@yellow-base, @component-background, 30%)',
'yellow-4': 'mix(@yellow-base, @component-background, 45%)',
'yellow-5': 'mix(@yellow-base, @component-background, 65%)',
'yellow-6': 'mix(@yellow-base, @component-background, 85%)',
'yellow-7': "mix(color(~`colorPalette('@{yellow-base}', 5) `), @component-background, 90%)",
'yellow-8': "mix(color(~`colorPalette('@{yellow-base}', 4) `), @component-background, 95%)",
'yellow-9': "mix(color(~`colorPalette('@{yellow-base}', 3) `), @component-background, 97%)",
'yellow-10': "mix(color(~`colorPalette('@{yellow-base}', 2) `), @component-background, 98%)",
'volcano-1': "mix(color(~`colorPalette('@{volcano-base}', 8) `), @component-background, 15%)",
'volcano-2': "mix(color(~`colorPalette('@{volcano-base}', 7) `), @component-background, 25%)",
'volcano-3': 'mix(@volcano-base, @component-background, 30%)',
'volcano-4': 'mix(@volcano-base, @component-background, 45%)',
'volcano-5': 'mix(@volcano-base, @component-background, 65%)',
'volcano-6': 'mix(@volcano-base, @component-background, 85%)',
'volcano-7': "mix(color(~`colorPalette('@{volcano-base}', 5) `), @component-background, 90%)",
'volcano-8': "mix(color(~`colorPalette('@{volcano-base}', 4) `), @component-background, 95%)",
'volcano-9': "mix(color(~`colorPalette('@{volcano-base}', 3) `), @component-background, 97%)",
'volcano-10': "mix(color(~`colorPalette('@{volcano-base}', 2) `), @component-background, 98%)",
'geekblue-1': "mix(color(~`colorPalette('@{geekblue-base}', 8) `), @component-background, 15%)",
'geekblue-2': "mix(color(~`colorPalette('@{geekblue-base}', 7) `), @component-background, 25%)",
'geekblue-3': 'mix(@geekblue-base, @component-background, 30%)',
'geekblue-4': 'mix(@geekblue-base, @component-background, 45%)',
'geekblue-5': 'mix(@geekblue-base, @component-background, 65%)',
'geekblue-6': 'mix(@geekblue-base, @component-background, 85%)',
'geekblue-7': "mix(color(~`colorPalette('@{geekblue-base}', 5) `), @component-background, 90%)",
'geekblue-8': "mix(color(~`colorPalette('@{geekblue-base}', 4) `), @component-background, 95%)",
'geekblue-9': "mix(color(~`colorPalette('@{geekblue-base}', 3) `), @component-background, 97%)",
'geekblue-10': "mix(color(~`colorPalette('@{geekblue-base}', 2) `), @component-background, 98%)",
'lime-1': "mix(color(~`colorPalette('@{lime-base}', 8) `), @component-background, 15%)",
'lime-2': "mix(color(~`colorPalette('@{lime-base}', 7) `), @component-background, 25%)",
'lime-3': 'mix(@lime-base, @component-background, 30%)',
'lime-4': 'mix(@lime-base, @component-background, 45%)',
'lime-5': 'mix(@lime-base, @component-background, 65%)',
'lime-6': 'mix(@lime-base, @component-background, 85%)',
'lime-7': "mix(color(~`colorPalette('@{lime-base}', 5) `), @component-background, 90%)",
'lime-8': "mix(color(~`colorPalette('@{lime-base}', 4) `), @component-background, 95%)",
'lime-9': "mix(color(~`colorPalette('@{lime-base}', 3) `), @component-background, 97%)",
'lime-10': "mix(color(~`colorPalette('@{lime-base}', 2) `), @component-background, 98%)",
'gold-1': "mix(color(~`colorPalette('@{gold-base}', 8) `), @component-background, 15%)",
'gold-2': "mix(color(~`colorPalette('@{gold-base}', 7) `), @component-background, 25%)",
'gold-3': 'mix(@gold-base, @component-background, 30%)',
'gold-4': 'mix(@gold-base, @component-background, 45%)',
'gold-5': 'mix(@gold-base, @component-background, 65%)',
'gold-6': 'mix(@gold-base, @component-background, 85%)',
'gold-7': "mix(color(~`colorPalette('@{gold-base}', 5) `), @component-background, 90%)",
'gold-8': "mix(color(~`colorPalette('@{gold-base}', 4) `), @component-background, 95%)",
'gold-9': "mix(color(~`colorPalette('@{gold-base}', 3) `), @component-background, 97%)",
'gold-10': "mix(color(~`colorPalette('@{gold-base}', 2) `), @component-background, 98%)",
'primary-1': "mix(color(~`colorPalette('@{primary-color}', 8) `), @component-background, 15%)",
'primary-2': "mix(color(~`colorPalette('@{primary-color}', 7) `), @component-background, 25%)",
'primary-3': 'mix(@primary-color, @component-background, 30%)',
'primary-4': 'mix(@primary-color, @component-background, 45%)',
'primary-5': 'mix(@primary-color, @component-background, 65%)',
'primary-6': '@primary-color',
'primary-7': "mix(color(~`colorPalette('@{primary-color}', 5) `), @component-background, 90%)",
'primary-8': "mix(color(~`colorPalette('@{primary-color}', 4) `), @component-background, 95%)",
'primary-9': "mix(color(~`colorPalette('@{primary-color}', 3) `), @component-background, 97%)",
'primary-10': "mix(color(~`colorPalette('@{primary-color}', 2) `), @component-background, 98%)",
'popover-background': '#1f1f1f',
'popover-customize-border-color': '#3a3a3a',
'body-background': '#121924',
'component-background': '#1c2533',
'text-color': 'fade(@white, 85%)',
'text-color-secondary': 'fade(@white, 45%)',
'text-color-inverse': '@white',
'icon-color-hover': 'fade(@white, 75%)',
'heading-color': 'fade(@white, 85%)',
'item-active-bg': '@primary-1',
'item-hover-bg': 'fade(@white, 8%)',
'border-color-base': '#2e3846',
'border-color-split': '#2e3846',
'background-color-light': 'fade(@white, 4%)',
'background-color-base': 'fade(@white, 8%)',
'disabled-color': 'fade(@white, 30%)',
'disabled-bg': '@background-color-base',
'disabled-color-dark': 'fade(@white, 30%)',
'tree-bg': 'transparent',
'list-customize-card-bg': 'transparent',
'shadow-color': 'rgba(0, 0, 0, 0.45)',
'shadow-color-inverse': '@component-background',
'box-shadow-base': '@shadow-2',
'shadow-1-up':
'0 -6px 16px -8px rgba(0, 0, 0, 0.32), 0 -9px 28px 0 rgba(0, 0, 0, 0.2),\n 0 -12px 48px 16px rgba(0, 0, 0, 0.12)',
'shadow-1-down':
'0 6px 16px -8px rgba(0, 0, 0, 0.32), 0 9px 28px 0 rgba(0, 0, 0, 0.2),\n 0 12px 48px 16px rgba(0, 0, 0, 0.12)',
'shadow-1-right':
'6px 0 16px -8px rgba(0, 0, 0, 0.32), 9px 0 28px 0 rgba(0, 0, 0, 0.2),\n 12px 0 48px 16px rgba(0, 0, 0, 0.12)',
'shadow-2':
'0 3px 6px -4px rgba(0, 0, 0, 0.48), 0 6px 16px 0 rgba(0, 0, 0, 0.32),\n 0 9px 28px 8px rgba(0, 0, 0, 0.2)',
'btn-shadow': '0 2px 0 rgba(0, 0, 0, 0.015)',
'btn-primary-shadow': '0 2px 0 rgba(0, 0, 0, 0.045)',
'btn-text-shadow': '0 -1px 0 rgba(0, 0, 0, 0.12)',
'btn-default-bg': 'transparent',
'btn-default-ghost-color': '@text-color',
'btn-default-ghost-border': 'fade(@white, 25%)',
'btn-text-hover-bg': 'rgba(255, 255, 255, 0.03)',
'checkbox-check-bg': 'transparent',
'descriptions-bg': '@background-color-light',
'divider-color': 'rgba(255, 255, 255, 12%)',
'modal-header-bg': '@popover-background',
'modal-header-border-color-split': '@border-color-split',
'modal-content-bg': '@popover-background',
'modal-footer-border-color-split': '@border-color-split',
'radio-solid-checked-color': '@white',
'radio-dot-disabled-color': 'fade(@white, 20%)',
'radio-disabled-button-checked-bg': 'fade(@white, 20%)',
'radio-disabled-button-checked-color': '@disabled-color',
'layout-body-background': '@body-background',
'layout-header-background': '@popover-background',
'layout-trigger-background': '#262626',
'input-bg': 'transparent',
'input-placeholder-color': 'fade(@white, 30%)',
'input-icon-color': 'fade(@white, 30%)',
'input-number-handler-active-bg': '@item-hover-bg',
'input-icon-hover-color': 'fade(@white, 85%)',
'select-background': 'transparent',
'select-dropdown-bg': '@popover-background',
'select-clear-background': '@component-background',
'select-selection-item-bg': 'fade(@white, 8)',
'select-selection-item-border-color': '@border-color-split',
'select-multiple-disabled-background': '@component-background',
'select-multiple-item-disabled-color': '#595959',
'select-multiple-item-disabled-border-color': '@popover-background',
'cascader-bg': 'transparent',
'cascader-menu-bg': '@popover-background',
'cascader-menu-border-color-split': '@border-color-split',
'tooltip-bg': '#434343',
'menu-dark-submenu-bg': '@component-background',
'menu-dark-bg': '@popover-background',
'menu-popup-bg': '@popover-background',
'message-notice-content-bg': '@popover-background',
'notification-bg': '@popover-background',
'link-hover-color': '@primary-5',
'link-active-color': '@primary-7',
'table-header-bg': '#1d1d1d',
'table-body-sort-bg': 'fade(@white, 1%)',
'table-row-hover-bg': '#262626',
'table-header-sort-bg': '#262626',
'table-header-filter-active-bg': '#434343',
'table-header-sort-active-bg': '#303030',
'table-filter-btns-bg': '@popover-background',
'table-expanded-row-bg': '@table-header-bg',
'table-filter-dropdown-bg': '@popover-background',
'table-expand-icon-bg': 'transparent',
'picker-basic-cell-hover-with-range-color': 'darken(@primary-color, 35%)',
'picker-basic-cell-disabled-bg': '#303030',
'picker-border-color': '@border-color-split',
'picker-bg': 'transparent',
'picker-date-hover-range-border-color': 'darken(@primary-color, 20%)',
'dropdown-menu-bg': '@popover-background',
'dropdown-menu-submenu-disabled-bg': 'transparent',
'steps-nav-arrow-color': 'fade(@white, 20%)',
'steps-background': 'transparent',
'avatar-bg': 'fade(@white, 30%)',
'progress-steps-item-bg': 'fade(@white, 8%)',
'calendar-bg': '@popover-background',
'calendar-input-bg': '@calendar-bg',
'calendar-border-color': 'transparent',
'calendar-full-bg': '@component-background',
'badge-text-color': '@white',
'popover-bg': '@popover-background',
'drawer-bg': '@popover-background',
'card-actions-background': '@component-background',
'card-skeleton-bg': '#303030',
'card-shadow':
'0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48),\n 0 5px 12px 4px rgba(0, 0, 0, 0.36)',
'transfer-item-hover-bg': '#262626',
'comment-bg': 'transparent',
'comment-author-time-color': 'fade(@white, 30%)',
'comment-action-hover-color': 'fade(@white, 65%)',
'rate-star-bg': 'fade(@white, 12%)',
'switch-bg': '@white',
'pagination-item-bg': 'transparent',
'pagination-item-bg-active': 'transparent',
'pagination-item-link-bg': 'transparent',
'pagination-item-disabled-bg-active': 'fade(@white, 25%)',
'pagination-item-disabled-color-active': '@black',
'pagination-item-input-bg': '@pagination-item-bg',
'page-header-back-color': '@icon-color',
'page-header-ghost-bg': 'transparent',
'slider-rail-background-color': '#262626',
'slider-rail-background-color-hover': '@border-color-base',
'slider-dot-border-color': '@border-color-split',
'slider-dot-border-color-active': '@primary-4',
'skeleton-to-color': 'fade(@white, 16%)',
'alert-success-border-color': '@green-3',
'alert-success-bg-color': '@green-1',
'alert-success-icon-color': '@success-color',
'alert-info-border-color': '@primary-3',
'alert-info-bg-color': '@primary-1',
'alert-info-icon-color': '@info-color',
'alert-warning-border-color': '@gold-3',
'alert-warning-bg-color': '@gold-1',
'alert-warning-icon-color': '@warning-color',
'alert-error-border-color': '@red-3',
'alert-error-bg-color': '@red-1',
'alert-error-icon-color': '@error-color',
'timeline-color': '@border-color-split',
'timeline-dot-color': '@primary-color',
'mentions-dropdown-bg': '@popover-background'
}

module.exports = {
darkTheme: {
hack: `true;@import "${require.resolve('ant-design-vue/lib/style/color/colorPalette.less')}";`,
...defaultTheme,
...darkThemeSingle
}
}

ant design vue pro用的是vue cli 3,打开根目录的vue.config.js

找到modifyVars引入即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const {
darkTheme
} = require('./dark.js')
loaderOptions: {
less: {
modifyVars: Object.assign(
{
// less vars,customize ant design theme
// 'primary-color': '#F5222D',
},
darkTheme
),
// DO NOT REMOVE THIS LINE
javascriptEnabled: true
}
}

大致效果:

image-20210523144037213