|
11 | 11 | .label-green { background-color: #059669 !important; } |
12 | 12 | .label-yellow { background-color: #d97706 !important; } |
13 | 13 | .label-purple { background-color: #7c3aed !important; } |
14 | | - |
15 | | -// ── Auto dark mode (follows OS preference) ── |
16 | | -@media (prefers-color-scheme: dark) { |
17 | | - // Base |
18 | | - body { |
19 | | - background-color: #0f172a !important; |
20 | | - color: #e2e8f0 !important; |
21 | | - } |
22 | | - |
23 | | - // Sidebar |
24 | | - .side-bar { |
25 | | - background-color: #1e293b !important; |
26 | | - } |
27 | | - |
28 | | - .site-title { color: #f1f5f9 !important; } |
29 | | - |
30 | | - .site-nav, |
31 | | - .nav-list .nav-list-item a { |
32 | | - color: #cbd5e1 !important; |
33 | | - } |
34 | | - |
35 | | - .nav-list .nav-list-item a:hover, |
36 | | - .nav-list .nav-list-item a.active { |
37 | | - color: #f1f5f9 !important; |
38 | | - background-color: #334155 !important; |
39 | | - } |
40 | | - |
41 | | - .site-nav .nav-list-expander { color: #94a3b8 !important; } |
42 | | - |
43 | | - // Main content |
44 | | - .main-content { |
45 | | - h1, h2, h3, h4, h5, h6 { color: #f1f5f9 !important; } |
46 | | - hr { border-color: #334155 !important; } |
47 | | - } |
48 | | - |
49 | | - // Links |
50 | | - a:not(.btn):not(.site-title):not(.search-result) { |
51 | | - color: #818cf8 !important; |
52 | | - &:hover { color: #a5b4fc !important; } |
53 | | - } |
54 | | - |
55 | | - // Code |
56 | | - code { |
57 | | - background-color: #1e293b !important; |
58 | | - color: #e2e8f0 !important; |
59 | | - border-color: #334155 !important; |
60 | | - } |
61 | | - |
62 | | - pre { |
63 | | - background-color: #1e293b !important; |
64 | | - > code { background-color: transparent !important; } |
65 | | - } |
66 | | - |
67 | | - // Tables |
68 | | - table { |
69 | | - th { |
70 | | - background-color: #1e293b !important; |
71 | | - color: #f1f5f9 !important; |
72 | | - border-color: #334155 !important; |
73 | | - } |
74 | | - td { |
75 | | - border-color: #334155 !important; |
76 | | - color: #e2e8f0 !important; |
77 | | - } |
78 | | - tr:nth-child(even) td { |
79 | | - background-color: rgba(30, 41, 59, 0.5) !important; |
80 | | - } |
81 | | - } |
82 | | - |
83 | | - // Search |
84 | | - .search-input { |
85 | | - background-color: #1e293b !important; |
86 | | - color: #e2e8f0 !important; |
87 | | - border-color: #334155 !important; |
88 | | - &:focus { border-color: #818cf8 !important; } |
89 | | - } |
90 | | - |
91 | | - .search-results { |
92 | | - background-color: #1e293b !important; |
93 | | - border-color: #334155 !important; |
94 | | - } |
95 | | - |
96 | | - .search-result-title { color: #f1f5f9 !important; } |
97 | | - .search-result-previews { color: #94a3b8 !important; } |
98 | | - .search-result:hover { background-color: #334155 !important; } |
99 | | - |
100 | | - // Footer |
101 | | - .site-footer { |
102 | | - border-top-color: #334155 !important; |
103 | | - color: #94a3b8 !important; |
104 | | - a { color: #818cf8 !important; } |
105 | | - } |
106 | | - |
107 | | - // Blockquotes |
108 | | - blockquote { |
109 | | - border-left-color: #818cf8 !important; |
110 | | - color: #cbd5e1 !important; |
111 | | - } |
112 | | - |
113 | | - // Buttons |
114 | | - .btn:not(.btn-primary) { |
115 | | - color: #e2e8f0 !important; |
116 | | - border-color: #475569 !important; |
117 | | - background-color: #1e293b !important; |
118 | | - &:hover { background-color: #334155 !important; } |
119 | | - } |
120 | | - |
121 | | - // Main header & breadcrumbs |
122 | | - .main-header { |
123 | | - background-color: #0f172a !important; |
124 | | - border-bottom-color: #334155 !important; |
125 | | - } |
126 | | - |
127 | | - .breadcrumb-nav { |
128 | | - color: #94a3b8 !important; |
129 | | - a { color: #818cf8 !important; } |
130 | | - } |
131 | | - |
132 | | - .back-to-top { |
133 | | - color: #94a3b8 !important; |
134 | | - &:hover { color: #818cf8 !important; } |
135 | | - } |
136 | | - |
137 | | - // Callouts |
138 | | - .callout { |
139 | | - background-color: #1e293b !important; |
140 | | - border-color: #334155 !important; |
141 | | - } |
142 | | - |
143 | | - // Aux links (npm, GitHub) |
144 | | - .aux-nav .aux-nav-list-item a { |
145 | | - color: #94a3b8 !important; |
146 | | - &:hover { color: #f1f5f9 !important; } |
147 | | - } |
148 | | -} |
0 commit comments