feat: Configure Tailwind CSS for class-based dark mode

This commit is contained in:
courtmanr@gmail.com
2025-04-24 09:35:00 +01:00
parent bf1ebe0a24
commit 233f8e5bb5
2 changed files with 287 additions and 288 deletions
+286 -288
View File
@@ -1503,6 +1503,292 @@ video {
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.dark\:block:is(.dark *) {
display: block;
}
.dark\:hidden:is(.dark *) {
display: none;
}
.dark\:divide-gray-600:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-divide-opacity));
}
.dark\:divide-gray-700:is(.dark *) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-divide-opacity));
}
.dark\:border-gray-600:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.dark\:border-gray-700:is(.dark *) {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.dark\:bg-blue-900\/20:is(.dark *) {
background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/50:is(.dark *) {
background-color: rgb(30 58 138 / 0.5);
}
.dark\:bg-gray-600:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:bg-gray-700:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark\:bg-gray-700\/50:is(.dark *) {
background-color: rgb(55 65 81 / 0.5);
}
.dark\:bg-gray-700\/80:is(.dark *) {
background-color: rgb(55 65 81 / 0.8);
}
.dark\:bg-gray-800:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark\:bg-gray-900:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark\:bg-green-400:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.dark\:bg-green-800\/30:is(.dark *) {
background-color: rgb(22 101 52 / 0.3);
}
.dark\:bg-green-900\/50:is(.dark *) {
background-color: rgb(20 83 45 / 0.5);
}
.dark\:bg-orange-900\/50:is(.dark *) {
background-color: rgb(124 45 18 / 0.5);
}
.dark\:bg-pink-900\/50:is(.dark *) {
background-color: rgb(131 24 67 / 0.5);
}
.dark\:bg-purple-900\/50:is(.dark *) {
background-color: rgb(88 28 135 / 0.5);
}
.dark\:bg-red-400:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.dark\:bg-red-800\/30:is(.dark *) {
background-color: rgb(153 27 27 / 0.3);
}
.dark\:bg-red-900\/50:is(.dark *) {
background-color: rgb(127 29 29 / 0.5);
}
.dark\:bg-teal-900\/50:is(.dark *) {
background-color: rgb(19 78 74 / 0.5);
}
.dark\:text-blue-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.dark\:text-blue-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
}
.dark\:text-gray-100:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark\:text-gray-200:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.dark\:text-gray-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark\:text-gray-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark\:text-gray-500:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark\:text-green-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
.dark\:text-green-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.dark\:text-indigo-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity));
}
.dark\:text-orange-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity));
}
.dark\:text-pink-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(249 168 212 / var(--tw-text-opacity));
}
.dark\:text-purple-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(216 180 254 / var(--tw-text-opacity));
}
.dark\:text-purple-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity));
}
.dark\:text-red-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity));
}
.dark\:text-red-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.dark\:text-teal-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(94 234 212 / var(--tw-text-opacity));
}
.dark\:text-yellow-400:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.dark\:hover\:bg-gray-600:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-gray-700:hover:is(.dark *) {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-gray-700\/50:hover:is(.dark *) {
background-color: rgb(55 65 81 / 0.5);
}
.dark\:hover\:bg-gray-700\/60:hover:is(.dark *) {
background-color: rgb(55 65 81 / 0.6);
}
.peer\/all:checked ~ .dark\:peer-checked\/all\:bg-green-800\/50:is(.dark *) {
background-color: rgb(22 101 52 / 0.5);
}
.peer\/grouped:checked ~ .dark\:peer-checked\/grouped\:bg-blue-800\/50:is(.dark *) {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/list:checked ~ .dark\:peer-checked\/list\:bg-blue-800\/50:is(.dark *) {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/lxc:checked ~ .dark\:peer-checked\/lxc\:bg-green-800\/50:is(.dark *) {
background-color: rgb(22 101 52 / 0.5);
}
.peer\/status-all:checked ~ .dark\:peer-checked\/status-all\:bg-blue-800\/50:is(.dark *) {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/status-running:checked ~ .dark\:peer-checked\/status-running\:bg-blue-800\/50:is(.dark *) {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/status-stopped:checked ~ .dark\:peer-checked\/status-stopped\:bg-blue-800\/50:is(.dark *) {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/vm:checked ~ .dark\:peer-checked\/vm\:bg-green-800\/50:is(.dark *) {
background-color: rgb(22 101 52 / 0.5);
}
.peer\/all:checked ~ .dark\:peer-checked\/all\:text-green-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
.peer\/grouped:checked ~ .dark\:peer-checked\/grouped\:text-blue-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/list:checked ~ .dark\:peer-checked\/list\:text-blue-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/lxc:checked ~ .dark\:peer-checked\/lxc\:text-green-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
.peer\/status-all:checked ~ .dark\:peer-checked\/status-all\:text-blue-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/status-running:checked ~ .dark\:peer-checked\/status-running\:text-blue-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/status-stopped:checked ~ .dark\:peer-checked\/status-stopped\:text-blue-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/vm:checked ~ .dark\:peer-checked\/vm\:text-green-300:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
.md\:flex-row {
flex-direction: row;
@@ -1511,292 +1797,4 @@ video {
.md\:items-center {
align-items: center;
}
}
@media (prefers-color-scheme: dark) {
.dark\:block {
display: block;
}
.dark\:hidden {
display: none;
}
.dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-divide-opacity));
}
.dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-divide-opacity));
}
.dark\:border-gray-600 {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.dark\:border-gray-700 {
--tw-border-opacity: 1;
border-color: rgb(55 65 81 / var(--tw-border-opacity));
}
.dark\:bg-blue-900\/20 {
background-color: rgb(30 58 138 / 0.2);
}
.dark\:bg-blue-900\/50 {
background-color: rgb(30 58 138 / 0.5);
}
.dark\:bg-gray-600 {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:bg-gray-700 {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark\:bg-gray-700\/50 {
background-color: rgb(55 65 81 / 0.5);
}
.dark\:bg-gray-700\/80 {
background-color: rgb(55 65 81 / 0.8);
}
.dark\:bg-gray-800 {
--tw-bg-opacity: 1;
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.dark\:bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.dark\:bg-green-400 {
--tw-bg-opacity: 1;
background-color: rgb(74 222 128 / var(--tw-bg-opacity));
}
.dark\:bg-green-800\/30 {
background-color: rgb(22 101 52 / 0.3);
}
.dark\:bg-green-900\/50 {
background-color: rgb(20 83 45 / 0.5);
}
.dark\:bg-orange-900\/50 {
background-color: rgb(124 45 18 / 0.5);
}
.dark\:bg-pink-900\/50 {
background-color: rgb(131 24 67 / 0.5);
}
.dark\:bg-purple-900\/50 {
background-color: rgb(88 28 135 / 0.5);
}
.dark\:bg-red-400 {
--tw-bg-opacity: 1;
background-color: rgb(248 113 113 / var(--tw-bg-opacity));
}
.dark\:bg-red-800\/30 {
background-color: rgb(153 27 27 / 0.3);
}
.dark\:bg-red-900\/50 {
background-color: rgb(127 29 29 / 0.5);
}
.dark\:bg-teal-900\/50 {
background-color: rgb(19 78 74 / 0.5);
}
.dark\:text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.dark\:text-blue-400 {
--tw-text-opacity: 1;
color: rgb(96 165 250 / var(--tw-text-opacity));
}
.dark\:text-gray-100 {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark\:text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.dark\:text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.dark\:text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.dark\:text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.dark\:text-green-300 {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
.dark\:text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.dark\:text-indigo-400 {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity));
}
.dark\:text-orange-300 {
--tw-text-opacity: 1;
color: rgb(253 186 116 / var(--tw-text-opacity));
}
.dark\:text-pink-300 {
--tw-text-opacity: 1;
color: rgb(249 168 212 / var(--tw-text-opacity));
}
.dark\:text-purple-300 {
--tw-text-opacity: 1;
color: rgb(216 180 254 / var(--tw-text-opacity));
}
.dark\:text-purple-400 {
--tw-text-opacity: 1;
color: rgb(192 132 252 / var(--tw-text-opacity));
}
.dark\:text-red-300 {
--tw-text-opacity: 1;
color: rgb(252 165 165 / var(--tw-text-opacity));
}
.dark\:text-red-400 {
--tw-text-opacity: 1;
color: rgb(248 113 113 / var(--tw-text-opacity));
}
.dark\:text-teal-300 {
--tw-text-opacity: 1;
color: rgb(94 234 212 / var(--tw-text-opacity));
}
.dark\:text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.dark\:hover\:bg-gray-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-gray-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}
.dark\:hover\:bg-gray-700\/50:hover {
background-color: rgb(55 65 81 / 0.5);
}
.dark\:hover\:bg-gray-700\/60:hover {
background-color: rgb(55 65 81 / 0.6);
}
.peer\/all:checked ~ .dark\:peer-checked\/all\:bg-green-800\/50 {
background-color: rgb(22 101 52 / 0.5);
}
.peer\/grouped:checked ~ .dark\:peer-checked\/grouped\:bg-blue-800\/50 {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/list:checked ~ .dark\:peer-checked\/list\:bg-blue-800\/50 {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/lxc:checked ~ .dark\:peer-checked\/lxc\:bg-green-800\/50 {
background-color: rgb(22 101 52 / 0.5);
}
.peer\/status-all:checked ~ .dark\:peer-checked\/status-all\:bg-blue-800\/50 {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/status-running:checked ~ .dark\:peer-checked\/status-running\:bg-blue-800\/50 {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/status-stopped:checked ~ .dark\:peer-checked\/status-stopped\:bg-blue-800\/50 {
background-color: rgb(30 64 175 / 0.5);
}
.peer\/vm:checked ~ .dark\:peer-checked\/vm\:bg-green-800\/50 {
background-color: rgb(22 101 52 / 0.5);
}
.peer\/all:checked ~ .dark\:peer-checked\/all\:text-green-300 {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
.peer\/grouped:checked ~ .dark\:peer-checked\/grouped\:text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/list:checked ~ .dark\:peer-checked\/list\:text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/lxc:checked ~ .dark\:peer-checked\/lxc\:text-green-300 {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
.peer\/status-all:checked ~ .dark\:peer-checked\/status-all\:text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/status-running:checked ~ .dark\:peer-checked\/status-running\:text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/status-stopped:checked ~ .dark\:peer-checked\/status-stopped\:text-blue-300 {
--tw-text-opacity: 1;
color: rgb(147 197 253 / var(--tw-text-opacity));
}
.peer\/vm:checked ~ .dark\:peer-checked\/vm\:text-green-300 {
--tw-text-opacity: 1;
color: rgb(134 239 172 / var(--tw-text-opacity));
}
}
+1
View File
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
'./public/**/*.html',
'./public/**/*.js',