Skip to content

Commit

Permalink
Optimize Dark mode theme
Browse files Browse the repository at this point in the history 
- Optimize Dark mode theme color scheme
- Modify Favicon size and color adaptation
  • Loading branch information
@ViggoZ
ViggoZ committed Jul 16, 2024
1 parent 0240d90 commit 023d400
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 48 deletions.
10 changes: 5 additions & 5 deletions 404.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="h-full dark:bg-gray-900 bg-white">
<html lang="en" class="h-full dark:pintree-bg-gray-900 bg-white">

<head>
<meta charset="UTF-8">
Expand Down Expand Up @@ -44,14 +44,14 @@
</script>
</head>

<body class="h-full flex flex-col dark:bg-gray-900 bg-white">
<body class="h-full flex flex-col dark:pintree-bg-gray-900 bg-white">
<header class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
<div class="flex items-center">
<img class="h-8 w-auto pl-2" src="assets/logo.svg" alt="Pintree Logo">
<a href="/" class="ml-4 font-extrabold text-2xl dark:text-white">Pintree</a>
</div>
<button id="themeToggleButton" type="button" aria-label="Switch theme"
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">
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">
<svg id="sunIcon" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true" class="h-6 w-6 fill-gray-100 stroke-gray-500 transition dark:hidden">
<path
Expand All @@ -70,7 +70,7 @@
</button>
</header>

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

<footer class="bg-white w-full dark:bg-gray-900">
<footer class="bg-white w-full dark:pintree-bg-gray-900">
<div class="mx-auto px-6 py-6 md:flex items-center md:justify-between lg:px-8">
<div class="flex justify-center space-x-6 md:order-2">
<!-- <a href="#" class="text-gray-400 hover:text-gray-500">
Expand Down
11 changes: 9 additions & 2 deletions assets/default-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
83 changes: 80 additions & 3 deletions css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
color: rgba(11, 166, 101, var(--tw-text-opacity))
}
.dark{
--tw-bg-opacity: 1;
background-color: rgba(17, 24, 39, var(--tw-bg-opacity))
--tw-bg-opacity: 1;
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
}
.sidebar-active {
--tw-bg-opacity: 0.2;
Expand Down Expand Up @@ -147,4 +147,81 @@
100% {
transform: rotate(360deg);
}
}
}

.card-icon-bg{
background-color: rgb(129 132 138 / 10%);
}


.dark\:pintree-bg-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
}
.dark\:pintree-bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
}
.dark\:pintree-bg-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
}
.dark\:pintree-bg-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
}


.dark\:hover\:pintree-bg-gray-900:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
}
.dark\:hover\:pintree-bg-gray-800:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
}
.dark\:hover\:pintree-bg-gray-700:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
}
.dark\:hover\:pintree-bg-gray-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
}


.dark\:pintree-border-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(17 20 24 / var(--tw-bg-opacity));
}
.dark\:pintree-border-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(34 37 42 / var(--tw-bg-opacity));
}
.dark\:pintree-border-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(39 42 48 / var(--tw-bg-opacity));
}
.dark\:pintree-border-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(45 49 57 / var(--tw-bg-opacity));
}


.dark\:pintree-ring-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(17 20 24 / var(--tw-bg-opacity));
}
.dark\:pintree-ring-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(34 37 42 / var(--tw-bg-opacity));
}
.dark\:pintree-ring-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(39 42 48 / var(--tw-bg-opacity));
}
.dark\:pintree-ring-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(45 49 57 / var(--tw-bg-opacity));
}

115 changes: 91 additions & 24 deletions css/tailwind.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1142,10 +1142,6 @@ select {
height: 1rem;
}

.h-5 {
height: 1.25rem;
}

.h-6 {
height: 1.5rem;
}
Expand Down Expand Up @@ -1182,6 +1178,10 @@ select {
width: 18rem;
}

.w-8 {
width: 2rem;
}

.w-auto {
width: auto;
}
Expand Down Expand Up @@ -1793,7 +1793,7 @@ select {

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

.sidebar-active {
Expand Down Expand Up @@ -1928,6 +1928,90 @@ select {
}
}

.card-icon-bg{
background-color: rgb(129 132 138 / 10%);
}

.dark\:pintree-bg-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
}

.dark\:pintree-bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
}

.dark\:pintree-bg-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
}

.dark\:pintree-bg-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
}

.dark\:hover\:pintree-bg-gray-900:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(17 20 24 / var(--tw-bg-opacity));
}

.dark\:hover\:pintree-bg-gray-800:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(34 37 42 / var(--tw-bg-opacity));
}

.dark\:hover\:pintree-bg-gray-700:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(39 42 48 / var(--tw-bg-opacity));
}

.dark\:hover\:pintree-bg-gray-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(45 49 57 / var(--tw-bg-opacity));
}

.dark\:pintree-border-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(17 20 24 / var(--tw-bg-opacity));
}

.dark\:pintree-border-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(34 37 42 / var(--tw-bg-opacity));
}

.dark\:pintree-border-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(39 42 48 / var(--tw-bg-opacity));
}

.dark\:pintree-border-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
border-color: rgb(45 49 57 / var(--tw-bg-opacity));
}

.dark\:pintree-ring-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(17 20 24 / var(--tw-bg-opacity));
}

.dark\:pintree-ring-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(34 37 42 / var(--tw-bg-opacity));
}

.dark\:pintree-ring-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(39 42 48 / var(--tw-bg-opacity));
}

.dark\:pintree-ring-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
--tw-ring-color: rgb(45 49 57 / var(--tw-bg-opacity));
}

.hover\:bg-gray-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -2104,15 +2188,6 @@ select {
border-color: rgb(31 41 55 / var(--tw-border-opacity));
}

.dark\:bg-gray-700\/10:is(.dark *) {
background-color: rgb(55 65 81 / 0.1);
}

.dark\:bg-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.dark\:text-gray-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
Expand All @@ -2128,19 +2203,10 @@ select {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark\:ring-gray-600\/10:is(.dark *) {
--tw-ring-color: rgb(75 85 99 / 0.1);
}

.dark\:ring-white\/10:is(.dark *) {
--tw-ring-color: rgb(255 255 255 / 0.1);
}

.dark\:hover\:bg-gray-800:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}

.dark\:hover\:ring-white\/20:hover:is(.dark *) {
--tw-ring-color: rgb(255 255 255 / 0.2);
}
Expand Down Expand Up @@ -2306,4 +2372,5 @@ select {
.\[\@media_not_\(prefers-color-scheme\:dark\)\]\:stroke-teal-500 {
stroke: #14b8a6;
}
}
}

Loading

0 comments on commit 023d400

Please sign in to comment.