Skip to content

Commit 023d400

Browse files
ViggoZViggoZ
committed
Optimize Dark mode theme
- Optimize Dark mode theme color scheme - Modify Favicon size and color adaptation
1 parent 0240d90 commit 023d400

File tree

5 files changed

+199
-48
lines changed

5 files changed

+199
-48
lines changed

‎404.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" class="h-full dark:bg-gray-900 bg-white">
2+
<html lang="en" class="h-full dark:pintree-bg-gray-900 bg-white">
33

44
<head>
55
<meta charset="UTF-8">
@@ -44,14 +44,14 @@
4444
</script>
4545
</head>
4646

47-
<body class="h-full flex flex-col dark:bg-gray-900 bg-white">
47+
<body class="h-full flex flex-col dark:pintree-bg-gray-900 bg-white">
4848
<header class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
4949
<div class="flex items-center">
5050
<img class="h-8 w-auto pl-2" src="assets/logo.svg" alt="Pintree Logo">
5151
<a href="/" class="ml-4 font-extrabold text-2xl dark:text-white">Pintree</a>
5252
</div>
5353
<button id="themeToggleButton" type="button" aria-label="Switch theme"
54-
class="rounded-full bg-white/90 p-2 shadow-lg ring-1 ring-gray-900/5 backdrop-blur transition dark:bg-gray-900 dark:ring-white/10 dark:hover:ring-white/20">
54+
class="rounded-full bg-white/90 p-2 shadow-lg ring-1 ring-gray-900/5 backdrop-blur transition dark:pintree-bg-gray-900 dark:ring-white/10 dark:hover:ring-white/20">
5555
<svg id="sunIcon" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
5656
aria-hidden="true" class="h-6 w-6 fill-gray-100 stroke-gray-500 transition dark:hidden">
5757
<path
@@ -70,7 +70,7 @@
7070
</button>
7171
</header>
7272

73-
<main class="flex flex-col justify-center items-center flex-grow bg-primary text-white dark:bg-gray-900 p-12">
73+
<main class="flex flex-col justify-center items-center flex-grow bg-primary text-white dark:pintree-bg-gray-900 p-12">
7474
<div class="text-center text-gray-700">
7575
<h1 class="mb-2 text-6xl font-bold leading-none sm:text-7xl md:text-8xl dark:text-gray-400">
7676
404
@@ -95,7 +95,7 @@ <h2 class="mb-3 text-[22px] font-semibold leading-tight dark:text-gray-600">
9595
</div>
9696
</main>
9797

98-
<footer class="bg-white w-full dark:bg-gray-900">
98+
<footer class="bg-white w-full dark:pintree-bg-gray-900">
9999
<div class="mx-auto px-6 py-6 md:flex items-center md:justify-between lg:px-8">
100100
<div class="flex justify-center space-x-6 md:order-2">
101101
<!-- <a href="#" class="text-gray-400 hover:text-gray-500">

‎assets/default-icon.svg

+9-2
Loading

‎css/styles.css

+80-3
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
color: rgba(11, 166, 101, var(--tw-text-opacity))
88
}
99
.dark{
10-
--tw-bg-opacity: 1;
11-
background-color: rgba(17, 24, 39, var(--tw-bg-opacity))
10+
--tw-bg-opacity: 1;
11+
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
1212
}
1313
.sidebar-active {
1414
--tw-bg-opacity: 0.2;
@@ -147,4 +147,81 @@
147147
100% {
148148
transform: rotate(360deg);
149149
}
150-
}
150+
}
151+
152+
.card-icon-bg{
153+
background-color: rgb(129 132 138 / 10%);
154+
}
155+
156+
157+
.dark\:pintree-bg-gray-900:is(.dark *) {
158+
--tw-bg-opacity: 1;
159+
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
160+
}
161+
.dark\:pintree-bg-gray-800:is(.dark *) {
162+
--tw-bg-opacity: 1;
163+
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
164+
}
165+
.dark\:pintree-bg-gray-700:is(.dark *) {
166+
--tw-bg-opacity: 1;
167+
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
168+
}
169+
.dark\:pintree-bg-gray-600:is(.dark *) {
170+
--tw-bg-opacity: 1;
171+
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
172+
}
173+
174+
175+
.dark\:hover\:pintree-bg-gray-900:hover:is(.dark *) {
176+
--tw-bg-opacity: 1;
177+
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
178+
}
179+
.dark\:hover\:pintree-bg-gray-800:hover:is(.dark *) {
180+
--tw-bg-opacity: 1;
181+
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
182+
}
183+
.dark\:hover\:pintree-bg-gray-700:hover:is(.dark *) {
184+
--tw-bg-opacity: 1;
185+
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
186+
}
187+
.dark\:hover\:pintree-bg-gray-600:hover:is(.dark *) {
188+
--tw-bg-opacity: 1;
189+
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
190+
}
191+
192+
193+
.dark\:pintree-border-gray-900:is(.dark *) {
194+
--tw-bg-opacity: 1;
195+
border-color: rgb(17 20 24 / var(--tw-bg-opacity));
196+
}
197+
.dark\:pintree-border-gray-800:is(.dark *) {
198+
--tw-bg-opacity: 1;
199+
border-color: rgb(34 37 42 / var(--tw-bg-opacity));
200+
}
201+
.dark\:pintree-border-gray-700:is(.dark *) {
202+
--tw-bg-opacity: 1;
203+
border-color: rgb(39 42 48 / var(--tw-bg-opacity));
204+
}
205+
.dark\:pintree-border-gray-600:is(.dark *) {
206+
--tw-bg-opacity: 1;
207+
border-color: rgb(45 49 57 / var(--tw-bg-opacity));
208+
}
209+
210+
211+
.dark\:pintree-ring-gray-900:is(.dark *) {
212+
--tw-bg-opacity: 1;
213+
--tw-ring-color: rgb(17 20 24 / var(--tw-bg-opacity));
214+
}
215+
.dark\:pintree-ring-gray-800:is(.dark *) {
216+
--tw-bg-opacity: 1;
217+
--tw-ring-color: rgb(34 37 42 / var(--tw-bg-opacity));
218+
}
219+
.dark\:pintree-ring-gray-700:is(.dark *) {
220+
--tw-bg-opacity: 1;
221+
--tw-ring-color: rgb(39 42 48 / var(--tw-bg-opacity));
222+
}
223+
.dark\:pintree-ring-gray-600:is(.dark *) {
224+
--tw-bg-opacity: 1;
225+
--tw-ring-color: rgb(45 49 57 / var(--tw-bg-opacity));
226+
}
227+

‎css/tailwind.css

+91-24
Original file line numberDiff line numberDiff line change
@@ -1142,10 +1142,6 @@ select {
11421142
height: 1rem;
11431143
}
11441144

1145-
.h-5 {
1146-
height: 1.25rem;
1147-
}
1148-
11491145
.h-6 {
11501146
height: 1.5rem;
11511147
}
@@ -1182,6 +1178,10 @@ select {
11821178
width: 18rem;
11831179
}
11841180

1181+
.w-8 {
1182+
width: 2rem;
1183+
}
1184+
11851185
.w-auto {
11861186
width: auto;
11871187
}
@@ -1793,7 +1793,7 @@ select {
17931793

17941794
.dark{
17951795
--tw-bg-opacity: 1;
1796-
background-color: rgba(17, 24, 39, var(--tw-bg-opacity))
1796+
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
17971797
}
17981798

17991799
.sidebar-active {
@@ -1928,6 +1928,90 @@ select {
19281928
}
19291929
}
19301930

1931+
.card-icon-bg{
1932+
background-color: rgb(129 132 138 / 10%);
1933+
}
1934+
1935+
.dark\:pintree-bg-gray-900:is(.dark *) {
1936+
--tw-bg-opacity: 1;
1937+
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
1938+
}
1939+
1940+
.dark\:pintree-bg-gray-800:is(.dark *) {
1941+
--tw-bg-opacity: 1;
1942+
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
1943+
}
1944+
1945+
.dark\:pintree-bg-gray-700:is(.dark *) {
1946+
--tw-bg-opacity: 1;
1947+
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
1948+
}
1949+
1950+
.dark\:pintree-bg-gray-600:is(.dark *) {
1951+
--tw-bg-opacity: 1;
1952+
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
1953+
}
1954+
1955+
.dark\:hover\:pintree-bg-gray-900:hover:is(.dark *) {
1956+
--tw-bg-opacity: 1;
1957+
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
1958+
}
1959+
1960+
.dark\:hover\:pintree-bg-gray-800:hover:is(.dark *) {
1961+
--tw-bg-opacity: 1;
1962+
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
1963+
}
1964+
1965+
.dark\:hover\:pintree-bg-gray-700:hover:is(.dark *) {
1966+
--tw-bg-opacity: 1;
1967+
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
1968+
}
1969+
1970+
.dark\:hover\:pintree-bg-gray-600:hover:is(.dark *) {
1971+
--tw-bg-opacity: 1;
1972+
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
1973+
}
1974+
1975+
.dark\:pintree-border-gray-900:is(.dark *) {
1976+
--tw-bg-opacity: 1;
1977+
border-color: rgb(17 20 24 / var(--tw-bg-opacity));
1978+
}
1979+
1980+
.dark\:pintree-border-gray-800:is(.dark *) {
1981+
--tw-bg-opacity: 1;
1982+
border-color: rgb(34 37 42 / var(--tw-bg-opacity));
1983+
}
1984+
1985+
.dark\:pintree-border-gray-700:is(.dark *) {
1986+
--tw-bg-opacity: 1;
1987+
border-color: rgb(39 42 48 / var(--tw-bg-opacity));
1988+
}
1989+
1990+
.dark\:pintree-border-gray-600:is(.dark *) {
1991+
--tw-bg-opacity: 1;
1992+
border-color: rgb(45 49 57 / var(--tw-bg-opacity));
1993+
}
1994+
1995+
.dark\:pintree-ring-gray-900:is(.dark *) {
1996+
--tw-bg-opacity: 1;
1997+
--tw-ring-color: rgb(17 20 24 / var(--tw-bg-opacity));
1998+
}
1999+
2000+
.dark\:pintree-ring-gray-800:is(.dark *) {
2001+
--tw-bg-opacity: 1;
2002+
--tw-ring-color: rgb(34 37 42 / var(--tw-bg-opacity));
2003+
}
2004+
2005+
.dark\:pintree-ring-gray-700:is(.dark *) {
2006+
--tw-bg-opacity: 1;
2007+
--tw-ring-color: rgb(39 42 48 / var(--tw-bg-opacity));
2008+
}
2009+
2010+
.dark\:pintree-ring-gray-600:is(.dark *) {
2011+
--tw-bg-opacity: 1;
2012+
--tw-ring-color: rgb(45 49 57 / var(--tw-bg-opacity));
2013+
}
2014+
19312015
.hover\:bg-gray-100:hover {
19322016
--tw-bg-opacity: 1;
19332017
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2104,15 +2188,6 @@ select {
21042188
border-color: rgb(31 41 55 / var(--tw-border-opacity));
21052189
}
21062190

2107-
.dark\:bg-gray-700\/10:is(.dark *) {
2108-
background-color: rgb(55 65 81 / 0.1);
2109-
}
2110-
2111-
.dark\:bg-gray-900:is(.dark *) {
2112-
--tw-bg-opacity: 1;
2113-
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
2114-
}
2115-
21162191
.dark\:text-gray-400:is(.dark *) {
21172192
--tw-text-opacity: 1;
21182193
color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2128,19 +2203,10 @@ select {
21282203
color: rgb(255 255 255 / var(--tw-text-opacity));
21292204
}
21302205

2131-
.dark\:ring-gray-600\/10:is(.dark *) {
2132-
--tw-ring-color: rgb(75 85 99 / 0.1);
2133-
}
2134-
21352206
.dark\:ring-white\/10:is(.dark *) {
21362207
--tw-ring-color: rgb(255 255 255 / 0.1);
21372208
}
21382209

2139-
.dark\:hover\:bg-gray-800:hover:is(.dark *) {
2140-
--tw-bg-opacity: 1;
2141-
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
2142-
}
2143-
21442210
.dark\:hover\:ring-white\/20:hover:is(.dark *) {
21452211
--tw-ring-color: rgb(255 255 255 / 0.2);
21462212
}
@@ -2306,4 +2372,5 @@ select {
23062372
.\[\@media_not_\(prefers-color-scheme\:dark\)\]\:stroke-teal-500 {
23072373
stroke: #14b8a6;
23082374
}
2309-
}
2375+
}
2376+

0 commit comments

Comments
 (0)