Skip to content

Commit 1fb1482

Browse files
atomjoyatomjoy
authored
Light dark theme app.css
1 parent 6c725fc commit 1fb1482

File tree

1 file changed

+218
-0
lines changed

1 file changed

+218
-0
lines changed

‎vue/resources/css/app.css

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
3+
4+
:root {
5+
--font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
6+
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
7+
--font-serif: Georgia, 'Times New Roman', serif;
8+
--font-family: 'Poppins', Arial, Helvetica, sans-serif;
9+
--font-family-text: 'Open Sans', Arial, Helvetica, sans-serif;
10+
--font-family-mono: 'VT323', 'JetBrains Mono', 'Fira Code', monospace;
11+
--font-family-jet: 'JetBrains Mono', 'Fira Code', monospace;
12+
--font-family-fira: 'Fira Code', monospace;
13+
--font-family-terminal: 'VT323', monospace;
14+
--font-size: 16px;
15+
--border-radius: 10px;
16+
--btn-border-radius: 50px;
17+
--z-index-menu: 9000;
18+
--scrollbar-width: 10px;
19+
--scrollbar-thumb-page: #999;
20+
--scrollbar-bg-page: #e6e6e6;
21+
--scrollbar-thumb-panel: #ff9557; /* Green #BBFD38; Orange #ff9557; #fa8618 */
22+
--scrollbar-bg-panel: #e6e6e6;
23+
}
24+
25+
:root {
26+
color-scheme: light;
27+
--bg-primary: #fff;
28+
--bg-secondary: #f5f6fa;
29+
--bg-third: #fafafb; /* #fafafb; #f6f9fc; */
30+
--text-primary: #0d0d0d;
31+
--text-secondary: #454850;
32+
--text-third: #b3b3b3; /* #b3b3b3; */
33+
--accent-primary: #ff9557; /* #0249fe; */
34+
--accent-secondary: #fd6e41; /* #fd6e41; #ff3000; #FC4409; #f6782f; */
35+
--placeholder: #ddd;
36+
--logo: url('@/assets/images/logo-light.png');
37+
--divider-primary: #e7e7e9;
38+
--text-disabled: #999;
39+
--btn-gray: #f9f9f9;
40+
}
41+
42+
/* color mode from browser setting */
43+
@media (prefers-color-scheme: dark) {
44+
:root {
45+
color-scheme: dark;
46+
--bg-primary: #2f282b; /* #212529; #1E1E1E; #212529; */
47+
--bg-secondary: #342c30;
48+
--bg-third: #3b3538;
49+
--text-primary: #fff;
50+
--text-secondary: #949392;
51+
--text-third: #a4a4a4;
52+
--accent-primary: #ff9557; /* #0249FE; */
53+
--placeholder: #717171;
54+
--code-border: #717171;
55+
--logo: url('@/assets/images/logo-dark.png');
56+
--divider-primary: #3b3538;
57+
--text-disabled: #999;
58+
--btn-gray: #717171;
59+
}
60+
}
61+
62+
/* color mode from html tag attribute */
63+
[color-scheme='light'] {
64+
color-scheme: light;
65+
--bg-primary: #fff;
66+
--bg-secondary: #f5f6fa;
67+
--bg-third: #fafafb; /* #fafafb; #f6f9fc; */
68+
--text-primary: #0d0d0d;
69+
--text-secondary: #454850;
70+
--text-third: #b3b3b3;
71+
--accent-primary: #ff9557; /* #0249fe; */
72+
--placeholder: #ddd;
73+
--logo: url('@/assets/images/logo-light.png');
74+
--divider-primary: #e7e7e9;
75+
--text-disabled: #999;
76+
}
77+
78+
[color-scheme='dark'] {
79+
color-scheme: dark;
80+
--bg-primary: #2f282b; /* #212529; #1E1E1E; #212529; */
81+
--bg-secondary: #342c30;
82+
--bg-third: #3b3538;
83+
--text-primary: #fff;
84+
--text-secondary: #949392;
85+
--text-third: #a4a4a4;
86+
--accent-primary: #ff9557; /* #0249FE; */
87+
--placeholder: #717171;
88+
--code-border: #717171;
89+
--logo: url('@/assets/images/logo-dark.png');
90+
--divider-primary: #3b3538;
91+
--text-disabled: #999;
92+
--btn-gray: #717171;
93+
}
94+
95+
html {
96+
display: block;
97+
font-size: var(--font-size);
98+
font-family: var(--font-family);
99+
background: var(--bg-primary);
100+
margin: 0;
101+
padding: 0px;
102+
height: 100vh;
103+
overflow-y: scroll;
104+
overflow: hidden;
105+
}
106+
107+
body {
108+
display: block;
109+
overflow: hidden;
110+
margin: 0;
111+
padding: 0px;
112+
color: var(--text-primary);
113+
background: var(--bg-primary);
114+
transition: color 0.5s, background-color 0.5s;
115+
position: relative;
116+
overflow: hidden;
117+
}
118+
119+
p {
120+
font-family: var(--font-family-text);
121+
}
122+
123+
img,
124+
svg {
125+
display: inline-block;
126+
max-width: 100%;
127+
}
128+
129+
iframe {
130+
color-scheme: light !important;
131+
}
132+
133+
* {
134+
box-sizing: border-box;
135+
outline: 0px none transparent;
136+
text-decoration: none;
137+
}
138+
139+
::before,
140+
::after {
141+
box-sizing: border-box;
142+
content: none;
143+
}
144+
145+
::placeholder {
146+
color: var(--placeholder);
147+
opacity: 1;
148+
}
149+
150+
::selection {
151+
background: #0e7aff;
152+
color: #fff;
153+
}
154+
155+
#app {
156+
position: relative;
157+
float: left;
158+
width: 100%;
159+
height: 100vh;
160+
padding: 0px;
161+
margin: 0px;
162+
overflow: hidden;
163+
}
164+
165+
#app__scrollbar {
166+
position: relative;
167+
float: left;
168+
width: 100vw;
169+
padding: 0px;
170+
margin: 0px;
171+
height: 100vh;
172+
overflow: hidden;
173+
overflow-y: scroll !important;
174+
}
175+
176+
/* Panel scrollbar */
177+
.scrollbar-thin {
178+
scrollbar-width: thin;
179+
scrollbar-color: var(--scrollbar-thumb-panel) var(--scrollbar-bg-panel);
180+
}
181+
182+
.scrollbar-thin::-webkit-scrollbar {
183+
width: var(--scrollbar-width);
184+
background: var(--scrollbar-thumb-panel);
185+
}
186+
187+
.scrollbar-thin::-webkit-scrollbar-thumb {
188+
background: var(--scrollbar-bg-panel);
189+
}
190+
191+
/* Page scrollbar */
192+
.scrollbar-page {
193+
scrollbar-width: thin;
194+
scrollbar-color: var(--scrollbar-thumb-page) var(--scrollbar-bg-page);
195+
}
196+
197+
.scrollbar-page::-webkit-scrollbar {
198+
width: 8px;
199+
background: var(--scrollbar-thumb-page);
200+
}
201+
202+
.scrollbar-page::-webkit-scrollbar-thumb {
203+
background: var(--scrollbar-bg-page);
204+
}
205+
206+
.section {
207+
float: left;
208+
width: 100%;
209+
min-height: 100vh;
210+
position: relative;
211+
}
212+
213+
.section__wrapper {
214+
margin: 0px auto;
215+
height: auto;
216+
width: 90%;
217+
max-width: 1120px;
218+
}

0 commit comments

Comments
 (0)