Skip to content

Commit 4fed994

Browse files
author
LinuxJava7
committed
move colours to colours.css
1 parent 5f7338c commit 4fed994

File tree

2 files changed

+191
-37
lines changed

2 files changed

+191
-37
lines changed

‎colours.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
2+
3+
4+
/* Root Variables - Light Mode (Default) */
5+
:root {
6+
--ctp-text: var(--ctp-latte-text);
7+
--ctp-base: var(--ctp-latte-base-rgb);
8+
--ctp-blue: var(--ctp-latte-blue-rgb);
9+
--ctp-lavender: var(--ctp-latte-lavender);
10+
--ctp-antitext: var(--ctp-frappe-text);
11+
--ctp-antibase: var(--ctp-frappe-base-rgb);
12+
--ctp-antiblue: var(--ctp-frappe-blue-rgb);
13+
--ctp-antilavender: var(--ctp-frappe-lavender);
14+
15+
/* Accent colours */
16+
--accent-colour: var(--ctp-lavender);
17+
--accent-colour: Accentcolour;
18+
--accent-bg-colour: #3584e4;
19+
--accent-fg-colour: #ffffff;
20+
21+
/* Destructive colours */
22+
--destructive-colour: #c01c28;
23+
--destructive-bg-colour: #e01b24;
24+
--destructive-fg-colour: #ffffff;
25+
26+
/* Success colours */
27+
--success-colour: #1b8553;
28+
--success-bg-colour: #2ec27e;
29+
--success-fg-colour: #ffffff;
30+
31+
/* Warning colours */
32+
--warning-colour: #9c6e03;
33+
--warning-bg-colour: #e5a50a;
34+
--warning-fg-colour: rgba(0, 0, 0, 0.8);
35+
36+
/* Error colours */
37+
--error-colour: #c01c28;
38+
--error-bg-colour: #e01b24;
39+
--error-fg-colour: #ffffff;
40+
41+
/* Window colours */
42+
--window-bg-colour: #fafafa;
43+
--window-fg-colour: rgba(0, 0, 0, 0.8);
44+
45+
/* View colours */
46+
--view-bg-colour: #ffffff;
47+
--view-fg-colour: rgba(0, 0, 0, 0.8);
48+
49+
/* Header Bar colours */
50+
--headerbar-bg-colour: #ffffff;
51+
--headerbar-fg-colour: rgba(0, 0, 0, 0.8);
52+
--headerbar-border-colour: rgba(0, 0, 0, 0.8);
53+
--headerbar-backdrop-colour: #fafafa;
54+
--headerbar-shade-colour: rgba(0, 0, 0, 0.12);
55+
--headerbar-darker-shade-colour: rgba(0, 0, 0, 0.12);
56+
57+
/* Sidebar colours */
58+
--sidebar-bg-colour: #ebebeb;
59+
--sidebar-fg-colour: rgba(0, 0, 0, 0.8);
60+
--sidebar-backdrop-colour: #f2f2f2;
61+
--sidebar-border-colour: rgba(0, 0, 0, 0.07);
62+
--sidebar-shade-colour: rgba(0, 0, 0, 0.07);
63+
64+
/* Secondary Sidebar colours */
65+
--secondary-sidebar-bg-colour: #f3f3f3;
66+
--secondary-sidebar-fg-colour: rgba(0, 0, 0, 0.8);
67+
--secondary-sidebar-backdrop-colour: #f6f6f6;
68+
--secondary-sidebar-border-colour: rgba(0, 0, 0, 0.07);
69+
--secondary-sidebar-shade-colour: rgba(0, 0, 0, 0.07);
70+
71+
/* Card colours */
72+
--card-bg-colour: #ffffff;
73+
--card-fg-colour: rgba(0, 0, 0, 0.8);
74+
--card-shade-colour: rgba(0, 0, 0, 0.07);
75+
76+
/* Thumbnail colours */
77+
--thumbnail-bg-colour: #ffffff;
78+
--thumbnail-fg-colour: rgba(0, 0, 0, 0.8);
79+
80+
/* Dialog colours */
81+
--dialog-bg-colour: #fafafa;
82+
--dialog-fg-colour: rgba(0, 0, 0, 0.8);
83+
84+
/* Popover colours */
85+
--popover-bg-colour: #ffffff;
86+
--popover-fg-colour: rgba(0, 0, 0, 0.8);
87+
--popover-shade-colour: rgba(0, 0, 0, 0.07);
88+
89+
/* Miscellaneous */
90+
--shade-colour: rgba(0, 0, 0, 0.07);
91+
--scrollbar-outline-colour: #ffffff;
92+
93+
/* Helper colours */
94+
--borders: rgba(0, 0, 0, 0.15);
95+
}
96+
97+
@media (prefers-colour-scheme: dark) {
98+
:root {
99+
--accent-colour: #78aeed;
100+
--accent-bg-colour: #3584e4;
101+
--accent-fg-colour: #ffffff;
102+
103+
--destructive-colour: #ff7b63;
104+
--destructive-bg-colour: #c01c28;
105+
--destructive-fg-colour: #ffffff;
106+
107+
--success-colour: #8ff0a4;
108+
--success-bg-colour: #26a269;
109+
--success-fg-colour: #ffffff;
110+
111+
--warning-colour: #f8e45c;
112+
--warning-bg-colour: #cd9309;
113+
--warning-fg-colour: rgba(0, 0, 0, 0.8);
114+
115+
--error-colour: #ff7b63;
116+
--error-bg-colour: #c01c28;
117+
--error-fg-colour: #ffffff;
118+
119+
--window-bg-colour: #242424;
120+
--window-fg-colour: #ffffff;
121+
122+
--view-bg-colour: #1e1e1e;
123+
--view-fg-colour: #ffffff;
124+
125+
--headerbar-bg-colour: #303030;
126+
--headerbar-fg-colour: #ffffff;
127+
--headerbar-border-colour: #ffffff;
128+
--headerbar-backdrop-colour: #242424;
129+
--headerbar-shade-colour: rgba(0, 0, 0, 0.36);
130+
--headerbar-darker-shade-colour: rgba(0, 0, 0, 0.9);
131+
132+
--sidebar-bg-colour: #303030;
133+
--sidebar-fg-colour: #ffffff;
134+
--sidebar-backdrop-colour: #2a2a2a;
135+
--sidebar-border-colour: rgba(0, 0, 0, 0.36);
136+
--sidebar-shade-colour: rgba(0, 0, 0, 0.25);
137+
138+
--secondary-sidebar-bg-colour: #2a2a2a;
139+
--secondary-sidebar-fg-colour: #ffffff;
140+
--secondary-sidebar-backdrop-colour: #272727;
141+
--secondary-sidebar-border-colour: rgba(0, 0, 0, 0.36);
142+
--secondary-sidebar-shade-colour: rgba(0, 0, 0, 0.25);
143+
144+
--card-bg-colour: rgba(255, 255, 255, 0.08);
145+
--card-fg-colour: #ffffff;
146+
--card-shade-colour: rgba(0, 0, 0, 0.36);
147+
148+
--thumbnail-bg-colour: #383838;
149+
--thumbnail-fg-colour: #ffffff;
150+
151+
--dialog-bg-colour: #383838;
152+
--dialog-fg-colour: #ffffff;
153+
154+
--popover-bg-colour: #383838;
155+
--popover-fg-colour: #ffffff;
156+
--popover-shade-colour: rgba(0, 0, 0, 0.25);
157+
158+
--shade-colour: rgba(0, 0, 0, 0.25);
159+
--scrollbar-outline-colour: rgba(0, 0, 0, 0.5);
160+
161+
--borders: rgba(255, 255, 255, 0.5);
162+
}
163+
}
164+
165+
/* Dark Mode */
166+
@media (prefers-color-scheme: dark) {
167+
:root {
168+
--ctp-text: var(--ctp-frappe-text);
169+
--ctp-base: var(--ctp-frappe-base-rgb);
170+
--ctp-blue: var(--ctp-frappe-blue-rgb);
171+
--accent-colour: var(--ctp-frappe-lavender);
172+
--ctp-antitext: var(--ctp-latte-text);
173+
--ctp-antibase: var(--ctp-latte-base-rgb);
174+
--ctp-antiblue: var(--ctp-latte-blue-rgb);
175+
--ctp-antilavender: var(--ctp-latte-lavender);
176+
}
177+
178+
.view-switcher a:hover,
179+
.view-switcher a:focus,
180+
.view-switcher-narrow a:hover,
181+
.view-switcher-narrow a:focus {
182+
background-color: rgb(255 255 255 / 2.5%);
183+
}
184+
185+
.view-switcher .current .view-switcher-narrow .current {
186+
background-color: rgb(255 255 255 / 5%);
187+
}
188+
}

‎style.css‎

Lines changed: 3 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,7 @@
1-
@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
1+
@import 'colours.css';
22

33
/* Root Variables - Light Mode (Default) */
44
:root {
5-
--ctp-text: var(--ctp-latte-text);
6-
--ctp-base: var(--ctp-latte-base-rgb);
7-
--ctp-blue: var(--ctp-latte-blue-rgb);
8-
--ctp-lavender: var(--ctp-latte-lavender);
9-
--ctp-antitext: var(--ctp-frappe-text);
10-
--ctp-antibase: var(--ctp-frappe-base-rgb);
11-
--ctp-antiblue: var(--ctp-frappe-blue-rgb);
12-
--ctp-antilavender: var(--ctp-frappe-lavender);
13-
145
/* Layout Variables */
156
--pagewidth: 50rem;
167
--grid-gap: 3rem;
@@ -82,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
8273
}
8374

8475
h1 {
85-
color: var(--ctp-lavender);
76+
color: var(--accent-colour);
8677
font-size: 4rem;
8778
font-weight: 900;
8879
letter-spacing: -0.04em;
@@ -111,7 +102,7 @@ h4 {
111102
padding: 1rem 1.5rem;
112103
background-color: rgb(var(--ctp-antibase));
113104
border-radius: var(--rounded-corner);
114-
border-left: 3px solid var(--ctp-lavender);
105+
border-left: 3px solid var(--accent-colour);
115106
}
116107

117108
.note p {
@@ -483,31 +474,6 @@ footer {
483474
text-decoration: none;
484475
}
485476

486-
/* Dark Mode */
487-
@media (prefers-color-scheme: dark) {
488-
:root {
489-
--ctp-text: var(--ctp-frappe-text);
490-
--ctp-base: var(--ctp-frappe-base-rgb);
491-
--ctp-blue: var(--ctp-frappe-blue-rgb);
492-
--ctp-lavender: var(--ctp-frappe-lavender);
493-
--ctp-antitext: var(--ctp-latte-text);
494-
--ctp-antibase: var(--ctp-latte-base-rgb);
495-
--ctp-antiblue: var(--ctp-latte-blue-rgb);
496-
--ctp-antilavender: var(--ctp-latte-lavender);
497-
}
498-
499-
.view-switcher a:hover,
500-
.view-switcher a:focus,
501-
.view-switcher-narrow a:hover,
502-
.view-switcher-narrow a:focus {
503-
background-color: rgb(255 255 255 / 2.5%);
504-
}
505-
506-
.view-switcher .current .view-switcher-narrow .current {
507-
background-color: rgb(255 255 255 / 5%);
508-
}
509-
}
510-
511477
/* Responsive Design */
512478

513479
@media only screen and (max-width: 720px) {

0 commit comments

Comments
 (0)