keith/BillTrak
1
0
Fork 0
mirror of https://github.com/Solo-Web-Works/BillTrak.git synced 2026-01-29 09:50:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨feature: Dark mode switch

Browse Source
This commit is contained in:
Keith Solomon
2025-02-09 16:24:31 -06:00
parent 3220a88fb3
commit bc2d0d8f97
4 changed files with 246 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
css/style.css
View File

@@ -521,6 +521,9 @@
}
}
@layer utilities {
.collapse {
visibility: collapse;
}
.absolute {
position: absolute;
}
@@ -539,9 +542,15 @@
.top-2 {
top: calc(var(--spacing) * 2);
}
.top-\[2px\] {
top: 2px;
}
.right-2 {
right: calc(var(--spacing) * 2);
}
.left-1 {
left: calc(var(--spacing) * 1);
}
.container {
width: 100%;
@media (width >= 40rem) {
@@ -566,6 +575,9 @@
.mt-4 {
margin-top: calc(var(--spacing) * 4);
}
.mr-2 {
margin-right: calc(var(--spacing) * 2);
}
.mb-0 {
margin-bottom: calc(var(--spacing) * 0);
}
@@ -596,9 +608,39 @@
.inline-block {
display: inline-block;
}
.inline-flex {
display: inline-flex;
}
.list-item {
display: list-item;
}
.table {
display: table;
}
.h-4 {
height: calc(var(--spacing) * 4);
}
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-6 {
height: calc(var(--spacing) * 6);
}
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-5\/6 {
width: calc(5/6 * 100%);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
.w-10 {
width: calc(var(--spacing) * 10);
}
.w-96 {
width: calc(var(--spacing) * 96);
}
@@ -608,6 +650,18 @@
.w-full {
width: 100%;
}
.border-collapse {
border-collapse: collapse;
}
.transform {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
.cursor-pointer {
cursor: pointer;
}
.resize {
resize: both;
}
.list-none {
list-style-type: none;
}
@@ -646,6 +700,9 @@
.rounded {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: calc(infinity * 1px);
}
.rounded-lg {
border-radius: var(--radius-lg);
}
@@ -665,6 +722,9 @@
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
.bg-green-500 {
background-color: var(--color-green-500);
}
@@ -742,10 +802,20 @@
.text-white {
color: var(--color-white);
}
.text-yellow-500 {
color: var(--color-yellow-500);
}
.underline {
text-decoration-line: underline;
}
.shadow {
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-inner {
--tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -754,6 +824,15 @@
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.transition-transform {
transition-property: transform, translate, scale, rotate;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.hover\:bg-blue-600 {
&:hover {
@media (hover: hover) {
@@ -761,6 +840,13 @@
}
}
}
.hover\:bg-gray-200 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-200);
}
}
}
.hover\:bg-green-600 {
&:hover {
@media (hover: hover) {
@@ -775,6 +861,12 @@
}
}
}
.focus\:outline-none {
&:focus {
--tw-outline-style: none;
outline-style: none;
}
}
.md\:grid-cols-2 {
@media (width >= 48rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -795,6 +887,37 @@
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.dark\:bg-gray-600 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-600);
}
}
.dark\:bg-gray-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
}
}
.dark\:hover\:bg-gray-700 {
@media (prefers-color-scheme: dark) {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-700);
}
}
}
}
}
.dark body {
background-color: var(--color-gray-900);
color: var(--color-gray-100);
[class*="bg-white"] {
background-color: var(--color-gray-800);
color: var(--color-gray-100);
}
[class*="bg-gray-100"], [class*="bg-gray-50"] {
background-color: var(--color-gray-700);
color: var(--color-gray-100);
}
}
@keyframes spin {
to {
@@ -822,6 +945,31 @@
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
initial-value: rotateX(0);
}
@property --tw-rotate-y {
syntax: "*";
inherits: false;
initial-value: rotateY(0);
}
@property --tw-rotate-z {
syntax: "*";
inherits: false;
initial-value: rotateZ(0);
}
@property --tw-skew-x {
syntax: "*";
inherits: false;
initial-value: skewX(0);
}
@property --tw-skew-y {
syntax: "*";
inherits: false;
initial-value: skewY(0);
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
@@ -896,3 +1044,8 @@
inherits: false;
initial-value: 0 0 #0000;
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
initial-value: solid;
}