corbz/pyrss-ng
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

use selector for dark mode over browser pref

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-01-23 10:56:10 +00:00
parent 24b80fcbdc
commit ff6f445703
2 changed files with 174 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

343
src/client/public/css/tailwind.css
View File

@ -751,14 +751,14 @@ video {
margin-inline-start: auto; margin-inline-start: auto;
} }
.mt-0\.5 {
margin-top: 0.125rem;
}
.mt-2 { .mt-2 {
margin-top: 0.5rem; margin-top: 0.5rem;
} }
.mt-auto {
margin-top: auto;
}
.block { .block {
display: block; display: block;
} }
@ -783,6 +783,10 @@ video {
display: table; display: table;
} }
.\!hidden {
display: none !important;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -1178,11 +1182,6 @@ video {
padding-bottom: 0.125rem !important; padding-bottom: 0.125rem !important;
} }
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 { .px-3 {
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
@ -1330,6 +1329,11 @@ video {
color: rgb(107 114 128 / var(--tw-text-opacity, 1)); 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 { .text-gray-800 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(31 41 55 / var(--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; outline-offset: 2px;
} }
@media (prefers-color-scheme: dark) { .sidebar-btn:where(.dark, .dark *) {
.sidebar-btn { --tw-bg-opacity: 1;
--tw-bg-opacity: 1; background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1;
--tw-text-opacity: 1; color: rgb(229 229 229 / var(--tw-text-opacity, 1));
color: rgb(229 229 229 / var(--tw-text-opacity, 1)); }
}
.sidebar-btn:hover { .sidebar-btn:hover:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
} }
.sidebar-btn:focus { .sidebar-btn:focus:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
} }
.before\:absolute::before { .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)); 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) { @media (min-width: 640px) {
.sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) { .sm\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0; --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:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
.dark\:divide-neutral-700 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1;
--tw-divide-opacity: 1; border-color: rgb(64 64 64 / var(--tw-divide-opacity, 1));
border-color: rgb(64 64 64 / var(--tw-divide-opacity, 1)); }
}
.dark\:border { .dark\:border:where(.dark, .dark *) {
border-width: 1px; border-width: 1px;
} }
.dark\:\!border-neutral-700 { .dark\:\!border-neutral-700:where(.dark, .dark *) {
--tw-border-opacity: 1 !important; --tw-border-opacity: 1 !important;
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)) !important; border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)) !important;
} }
.dark\:border-neutral-600 { .dark\:border-neutral-600:where(.dark, .dark *) {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(82 82 82 / var(--tw-border-opacity, 1)); border-color: rgb(82 82 82 / var(--tw-border-opacity, 1));
} }
.dark\:border-neutral-700 { .dark\:border-neutral-700:where(.dark, .dark *) {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1)); border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
} }
.dark\:\!bg-neutral-800 { .dark\:\!bg-neutral-800:where(.dark, .dark *) {
--tw-bg-opacity: 1 !important; --tw-bg-opacity: 1 !important;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)) !important; background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)) !important;
} }
.dark\:bg-blue-500 { .dark\:bg-blue-500:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
} }
.dark\:bg-neutral-700 { .dark\:bg-neutral-700:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
} }
.dark\:bg-neutral-800 { .dark\:bg-neutral-800:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
} }
.dark\:bg-neutral-900 { .dark\:bg-neutral-900:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)); background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1));
} }
.dark\:bg-opacity-80 { .dark\:bg-opacity-80:where(.dark, .dark *) {
--tw-bg-opacity: 0.8; --tw-bg-opacity: 0.8;
} }
.dark\:fill-neutral-200 { .dark\:fill-neutral-200:where(.dark, .dark *) {
fill: #e5e5e5; fill: #e5e5e5;
} }
.dark\:fill-white { .dark\:fill-white:where(.dark, .dark *) {
fill: #fff; fill: #fff;
} }
.dark\:stroke-white { .dark\:stroke-white:where(.dark, .dark *) {
stroke: #fff; stroke: #fff;
} }
.dark\:text-blue-500 { .dark\:text-blue-500:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity, 1)); color: rgb(59 130 246 / var(--tw-text-opacity, 1));
} }
.dark\:text-neutral-200 { .dark\:text-neutral-200:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity, 1)); color: rgb(229 229 229 / var(--tw-text-opacity, 1));
} }
.dark\:text-neutral-400 { .dark\:text-neutral-400:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity, 1)); color: rgb(163 163 163 / var(--tw-text-opacity, 1));
} }
.dark\:text-neutral-500 { .dark\:text-neutral-500:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(115 115 115 / var(--tw-text-opacity, 1)); color: rgb(115 115 115 / var(--tw-text-opacity, 1));
} }
.dark\:text-white { .dark\:text-white:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1)); color: rgb(255 255 255 / var(--tw-text-opacity, 1));
} }
.dark\:text-white\/60 { .dark\:text-white\/60:where(.dark, .dark *) {
color: rgb(255 255 255 / 0.6); color: rgb(255 255 255 / 0.6);
} }
.dark\:placeholder\:text-neutral-400::-moz-placeholder { .dark\:placeholder\:text-neutral-400:where(.dark, .dark *)::-moz-placeholder {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity, 1)); color: rgb(163 163 163 / var(--tw-text-opacity, 1));
} }
.dark\:placeholder\:text-neutral-400::placeholder { .dark\:placeholder\:text-neutral-400:where(.dark, .dark *)::placeholder {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity, 1)); color: rgb(163 163 163 / var(--tw-text-opacity, 1));
} }
.dark\:hover\:bg-neutral-700:hover { .dark\:hover\:bg-neutral-700:hover:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
} }
.dark\:hover\:bg-neutral-800:hover { .dark\:hover\:bg-neutral-800:hover:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
} }
.dark\:hover\:bg-neutral-900:hover { .dark\:hover\:text-blue-500:hover:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-text-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity, 1)); color: rgb(59 130 246 / var(--tw-text-opacity, 1));
} }
.dark\:hover\:text-blue-500:hover { .dark\:hover\:text-neutral-200:hover:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity, 1)); color: rgb(229 229 229 / var(--tw-text-opacity, 1));
} }
.dark\:hover\:text-neutral-200:hover { .dark\:hover\:text-neutral-300:hover:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(229 229 229 / var(--tw-text-opacity, 1)); color: rgb(212 212 212 / var(--tw-text-opacity, 1));
} }
.dark\:hover\:text-neutral-300:hover { .dark\:hover\:text-neutral-500:hover:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(212 212 212 / var(--tw-text-opacity, 1)); color: rgb(115 115 115 / var(--tw-text-opacity, 1));
} }
.dark\:hover\:text-neutral-500:hover { .dark\:focus\:bg-neutral-700:focus:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-bg-opacity: 1;
color: rgb(115 115 115 / var(--tw-text-opacity, 1)); background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
} }
.dark\:focus\:bg-neutral-700:focus { .dark\:focus\:bg-neutral-800:focus:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1)); background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
} }
.dark\:focus\:bg-neutral-800:focus { .dark\:focus\:text-blue-500:focus:where(.dark, .dark *) {
--tw-bg-opacity: 1; --tw-text-opacity: 1;
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1)); color: rgb(59 130 246 / var(--tw-text-opacity, 1));
} }
.dark\:focus\:text-blue-500:focus { .dark\:focus\:text-neutral-300:focus:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(59 130 246 / var(--tw-text-opacity, 1)); color: rgb(212 212 212 / var(--tw-text-opacity, 1));
} }
.dark\:focus\:text-neutral-300:focus { .dark\:focus\:text-neutral-500:focus:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgb(212 212 212 / var(--tw-text-opacity, 1)); color: rgb(115 115 115 / var(--tw-text-opacity, 1));
} }
.dark\:focus\:text-neutral-500:focus { .dark\:focus\:ring-neutral-600:focus:where(.dark, .dark *) {
--tw-text-opacity: 1; --tw-ring-opacity: 1;
color: rgb(115 115 115 / var(--tw-text-opacity, 1)); --tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity, 1));
}
.dark\:focus\:ring-neutral-600:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity, 1));
}
} }
.\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-full::-webkit-scrollbar-thumb { .\[\&\:\:-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)); background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
} }
@media (prefers-color-scheme: dark) { .dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-500:where(.dark, .dark *)::-webkit-scrollbar-thumb {
.dark\:\[\&\:\:-webkit-scrollbar-thumb\]\:bg-neutral-500::-webkit-scrollbar-thumb { --tw-bg-opacity: 1;
--tw-bg-opacity: 1; background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
}
} }
.\[\&\:\:-webkit-scrollbar-track\]\:bg-gray-100::-webkit-scrollbar-track { .\[\&\:\:-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)); background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
} }
@media (prefers-color-scheme: dark) { .dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-700:where(.dark, .dark *)::-webkit-scrollbar-track {
.dark\:\[\&\:\:-webkit-scrollbar-track\]\:bg-neutral-700::-webkit-scrollbar-track { --tw-bg-opacity: 1;
--tw-bg-opacity: 1; background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
}
} }
.\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar { .\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {

1
tailwind.config.js
View File

@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
darkMode: "selector",
content: [ content: [
"./src/client/**/*.{html,js,ejs}", "./src/client/**/*.{html,js,ejs}",
"./node_modules/preline/dist/*.js" "./node_modules/preline/dist/*.js"