use selector for dark mode over browser pref
This commit is contained in:
parent
24b80fcbdc
commit
ff6f445703
@ -751,14 +751,14 @@ video {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.mt-0\.5 {
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@ -783,6 +783,10 @@ video {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.\!hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -1178,11 +1182,6 @@ video {
|
||||
padding-bottom: 0.125rem !important;
|
||||
}
|
||||
|
||||
.px-2\.5 {
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
}
|
||||
|
||||
.px-3 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
@ -1330,6 +1329,11 @@ video {
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
||||
@ -1446,23 +1450,21 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.sidebar-btn {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.sidebar-btn:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.sidebar-btn:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.sidebar-btn:hover:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.sidebar-btn:focus {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.sidebar-btn:focus:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.before\:absolute::before {
|
||||
@ -1682,6 +1684,18 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
||||
background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark .hs-dark-mode-active\:\!flex {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.dark .hs-dark-mode-active\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.dark .hs-dark-mode-active\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@ -1766,175 +1780,168 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:divide-neutral-700 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(64 64 64 / var(--tw-divide-opacity, 1));
|
||||
}
|
||||
.dark\:divide-neutral-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-divide-opacity: 1;
|
||||
border-color: rgb(64 64 64 / var(--tw-divide-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:border {
|
||||
border-width: 1px;
|
||||
}
|
||||
.dark\:border:where(.dark, .dark *) {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.dark\:\!border-neutral-700 {
|
||||
--tw-border-opacity: 1 !important;
|
||||
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)) !important;
|
||||
}
|
||||
.dark\:\!border-neutral-700:where(.dark, .dark *) {
|
||||
--tw-border-opacity: 1 !important;
|
||||
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.dark\:border-neutral-600 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(82 82 82 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.dark\:border-neutral-600:where(.dark, .dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(82 82 82 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:border-neutral-700 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
.dark\:border-neutral-700:where(.dark, .dark *) {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:\!bg-neutral-800 {
|
||||
--tw-bg-opacity: 1 !important;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)) !important;
|
||||
}
|
||||
.dark\:\!bg-neutral-800:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1 !important;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
.dark\:bg-blue-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:bg-blue-500:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-neutral-700 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:bg-neutral-700:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-neutral-800 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:bg-neutral-800:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-neutral-900 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:bg-neutral-900:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:bg-opacity-80 {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
.dark\:bg-opacity-80:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 0.8;
|
||||
}
|
||||
|
||||
.dark\:fill-neutral-200 {
|
||||
fill: #e5e5e5;
|
||||
}
|
||||
.dark\:fill-neutral-200:where(.dark, .dark *) {
|
||||
fill: #e5e5e5;
|
||||
}
|
||||
|
||||
.dark\:fill-white {
|
||||
fill: #fff;
|
||||
}
|
||||
.dark\:fill-white:where(.dark, .dark *) {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.dark\:stroke-white {
|
||||
stroke: #fff;
|
||||
}
|
||||
.dark\:stroke-white:where(.dark, .dark *) {
|
||||
stroke: #fff;
|
||||
}
|
||||
|
||||
.dark\:text-blue-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:text-blue-500:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-200 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:text-neutral-200:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:text-neutral-400:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:text-neutral-500:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-white {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:text-white:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:text-white\/60 {
|
||||
color: rgb(255 255 255 / 0.6);
|
||||
}
|
||||
.dark\:text-white\/60:where(.dark, .dark *) {
|
||||
color: rgb(255 255 255 / 0.6);
|
||||
}
|
||||
|
||||
.dark\:placeholder\:text-neutral-400::-moz-placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:placeholder\:text-neutral-400:where(.dark, .dark *)::-moz-placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:placeholder\:text-neutral-400::placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:placeholder\:text-neutral-400:where(.dark, .dark *)::placeholder {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-neutral-700:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:hover\:bg-neutral-700:hover:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-neutral-800:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:hover\:bg-neutral-800:hover:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:hover\:bg-neutral-900:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:hover\:text-blue-500:hover:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-blue-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:hover\:text-neutral-200:hover:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-neutral-200:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:hover\:text-neutral-300:hover:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(212 212 212 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-neutral-300:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(212 212 212 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:hover\:text-neutral-500:hover:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:hover\:text-neutral-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:focus\:bg-neutral-700:focus:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:focus\:bg-neutral-700:focus {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:focus\:bg-neutral-800:focus:where(.dark, .dark *) {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:focus\:bg-neutral-800:focus {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:focus\:text-blue-500:focus:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:focus\:text-blue-500:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:focus\:text-neutral-300:focus:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(212 212 212 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:focus\:text-neutral-300:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(212 212 212 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
.dark\:focus\:text-neutral-500:focus:where(.dark, .dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:focus\:text-neutral-500:focus {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(115 115 115 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.dark\:focus\:ring-neutral-600:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity, 1));
|
||||
}
|
||||
.dark\:focus\:ring-neutral-600:focus:where(.dark, .dark *) {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity, 1));
|
||||
}
|
||||
|
||||
.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb {
|
||||
@ -1946,11 +1953,9 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
||||
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-500::-webkit-scrollbar-thumb {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-500:where(.dark, .dark *)::-webkit-scrollbar-thumb {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-100::-webkit-scrollbar-track {
|
||||
@ -1958,11 +1963,9 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-700::-webkit-scrollbar-track {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
.dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-700:where(.dark, .dark *)::-webkit-scrollbar-track {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: "selector",
|
||||
content: [
|
||||
"./src/client/**/*.{html,js,ejs}",
|
||||
"./node_modules/preline/dist/*.js"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user