1:root[data-theme="theme-light"] {
2    --mikiop-background-color: #00000007;
3    --mikiop-border-color: #00000020;
4    --mikiop-header-background-color: #00000007;
5    --mikiop-footer-background-color: #00000007;
6
7    --mikiop-primary-text-color: #ffffff;
8    --mikiop-primary-text-hover-color: #ffffff;
9    --mikiop-primary-background-color: #007bff;
10    --mikiop-primary-background-hover-color: #0069d9;
11    --mikiop-primary-border-color: #007bff;
12    --mikiop-primary-border-hover-color: #0062cc;
13    --mikiop-primary-light-text-color: #004085;
14    --mikiop-primary-light-background-color: #cce5ff;
15    --mikiop-primary-light-border-color: #b8daff;
16
17    --mikiop-secondary-text-color: #fff;
18    --mikiop-secondary-text-hover-color: #fff;
19    --mikiop-secondary-background-color: #6c757d;
20    --mikiop-secondary-background-hover-color: #5a6268;
21    --mikiop-secondary-border-color: #6c757d;
22    --mikiop-secondary-border-hover-color: #545b62;
23    --mikiop-secondary-light-text-color: #383d41;
24    --mikiop-secondary-light-background-color: #e2e3e5;
25    --mikiop-secondary-light-border-color: #d6d8db;
26
27    --mikiop-success-text-color: #fff;
28    --mikiop-success-text-hover-color: #fff;
29    --mikiop-success-background-color: #28a745;
30    --mikiop-success-background-hover-color: #218838;
31    --mikiop-success-border-color: #28a745;
32    --mikiop-success-border-hover-color: #1e7e34;
33    --mikiop-success-light-text-color: #155724;
34    --mikiop-success-light-background-color: #d4edda;
35    --mikiop-success-light-border-color: #c3e6cb;
36
37    --mikiop-danger-text-color: #fff;
38    --mikiop-danger-background-color: #dc3545;
39    --mikiop-danger-border-color: #dc3545;
40    --mikiop-danger-text-hover-color: #fff;
41    --mikiop-danger-background-hover-color: #c82333;
42    --mikiop-danger-border-hover-color: #bd2130;
43    --mikiop-danger-light-text-color: #721c24;
44    --mikiop-danger-light-background-color: #f8d7da;
45    --mikiop-danger-light-border-color: #f5c6cb;
46
47    --mikiop-warning-text-color: #fff;
48    --mikiop-warning-background-color: #ffc107;
49    --mikiop-warning-border-color: #ffc107;
50    --mikiop-warning-text-hover-color: #fff;
51    --mikiop-warning-background-hover-color: #e0a800;
52    --mikiop-warning-border-hover-color: #d39e00;
53    --mikiop-warning-light-text-color: #856404;
54    --mikiop-warning-light-background-color: #fff3cd;
55    --mikiop-warning-light-border-color: #ffeeba;
56
57    --mikiop-info-text-color: #fff;
58    --mikiop-info-background-color: #17a2b8;
59    --mikiop-info-border-color: #17a2b8;
60    --mikiop-info-text-hover-color: #fff;
61    --mikiop-info-background-hover-color: #138496;
62    --mikiop-info-border-hover-color: #117a8b;
63    --mikiop-info-light-text-color: #0c5460;
64    --mikiop-info-light-background-color: #d1ecf1;
65    --mikiop-info-light-border-color: #bee5eb;
66
67    --mikiop-light-text-color: #212529;
68    --mikiop-light-background-color: #f8f9fa;
69    --mikiop-light-border-color: #f8f9fa;
70    --mikiop-light-text-hover-color: #212529;
71    --mikiop-light-background-hover-color: #e2e6ea;
72    --mikiop-light-border-hover-color: #dae0e5;
73    --mikiop-light-light-text-color: #818182;
74    --mikiop-light-light-background-color: #fefefe;
75    --mikiop-light-light-border-color: #fdfdfe;
76
77    --mikiop-dark-text-color: #fff;
78    --mikiop-dark-background-color: #343a40;
79    --mikiop-dark-border-color: #343a40;
80    --mikiop-dark-text-hover-color: #fff;
81    --mikiop-dark-background-hover-color: #23272b;
82    --mikiop-dark-border-hover-color: #1d2124;
83    --mikiop-dark-light-text-color: #1b1e21;
84    --mikiop-dark-light-background-color: #d6d8d9;
85    --mikiop-dark-light-border-color: #c6c8ca;
86
87    --mikiop-link-text-color: #007bff;
88    --mikiop-link-background-color: transparent;
89    --mikiop-link-border-color: transparent;
90    --mikiop-link-text-hover-color: #0056b3;
91    --mikiop-link-background-hover-color: transparent;
92    --mikiop-link-border-hover-color: transparent;
93
94    /* Carousel */
95    --mikiop-carousel-title-text-color: #fff;
96    --mikiop-carousel-caption-text-color: #fff;
97    --mikiop-carousel-caption-background-color: #00000080;
98    --mikiop-carousel-control-fill-color: #fff;
99    --mikiop-carousel-control-stroke-color: #000;
100    --mikiop-carousel-indicator-color: #fff;
101
102    /* Steps */
103    --mikiop-steps-step-text-color: inherit;
104    --mikiop-steps-border-color: #00000040;
105    --mikiop-steps-step-background-color: #fff;
106    --mikiop-steps-step-background-complete-color: #f8f8f8;
107
108    /* Tabgroup */
109    --mikiop-tabgroup-tab-text-active-color: #000000d0;
110    --mikiop-tabgroup-tab-background-active-color: #ffffff20;
111    --mikiop-tabgroup-tab-border-hover-color: #00000020;
112
113    /* Tooltip */
114    --mikiop-tooltip-text-color: #333;
115    --mikiop-tooltip-background-color: #fcf3cf;
116    --mikiop-tooltip-border-color: #9a7d0a;
117}
118
119:root[data-theme="theme-dark"] {
120    --mikiop-background-color: #ffffff20;
121    --mikiop-border-color: #ffffff20;
122    --mikiop-header-background-color: #ffffff07;
123    --mikiop-footer-background-color: #ffffff07;
124
125    /* Steps */
126    --mikiop-steps-step-text-color: #fff;
127    --mikiop-steps-border-color: #ffffff40;
128    --mikiop-steps-step-background-color: #222;
129    --mikiop-steps-step-background-complete-color: #000;
130
131    /* Tabgroup */
132    --mikiop-tabgroup-tab-text-active-color: #ffffffd0;
133    --mikiop-tabgroup-tab-background-active-color: #00000020;
134    --mikiop-tabgroup-tab-border-hover-color: #ffffff20;
135}