Stylus dark theme for HŸPE dashboard

style.css

/* */

body {
    background: #0b0815;
}

header {
    background-color: #0b0815 !important;
}

div.bg-white {
    background: #0b0815;
}


nav > div > div > a.text-white {
    color: #0b0815;
}

nav > div > div > a.text-white:hover {
    color: #dc2626;
}


footer.bg-white {
    background-color: #0b0815;
}

.text-gray-400 {
    color: #98b3e1 !important;
}

.text-gray-500 {
    color: #6a7e9f !important;
}


.hover\:text-gray-700:hover {
    color: #98b3e1 !important;
}


h2.text-gray-900 {
    color: #cedbf0 !important;
}


.bg-teal-100 {
    background-color:#162f39;
    color: #75c8af;
}

.text-teal-700 {
    background-color:#162f39;
    color: #65b39b;
}

svg.text-teal-500 {
    color: #78c8b0;
}


dl.bg-white {
    background: #140f26;
}

.shadow-lg {
    box-shadow: none !important;
}

dt.text-gray-900 {
    color: #8a9bb7 !important;
}


div > h2.text-gray-600 {
    color: #cedbf0 !important;
}

.grid > div.bg-white {
    background: #140f26;
    border: none;
}


a.bg-gray-50 {
    background: #140f26;
}

a.bg-gray-50 span.text-gray-900 {
    color: #748197 !important;
}

img.bg-gray-300, img.bg-white {
    background-color: transparent !important;
}

span.bg-green-100 {
    background-color:#1d3944;
    color: #78c8b0;
    user-select: none;
}


.hover\:bg-teal-50:hover {
    background: #1c1537;
}


p.text-gray-900 {
    color: #db5353;
}


div.fixed > div.bg-white {
    z-index: 99999;
    background: #140f26;
}


div.fixed > div.bg-white p.text-gray-500 {
    color: #798cac !important;
}

button.bg-white {
    background: #140f26;
}

button.bg-white:focus {
    --tw-ring-color: 0;
    outline: none !important;
        background: #1c1537;
}

button.bg-teal-600 {
    background-color:#162f39;
    color: #78c8b0;
}

button.bg-teal-600:hover {
    background-color:#1d3944;
    color: #80eaca;
}


.focus\:ring-offset-gray-100:focus {
    --tw-ring-offset-color: #140f26;
}



canvas {
    opacity: 0.75;
    filter: invert(1) hue-rotate(180deg);
}


.bg-yellow-50 {
    background-color: #2f1726;
}

.text-yellow-800 {
    color: #d27d99;
}

svg.text-yellow-400 {
    color: #d27d99;
}

.text-yellow-700 {
    color: #a46278;
}

#pixelUrl {
    background-color: #46202d;
    color: #d27d99;
}

#copyButton {
    background-color: #732e45;
    color: #d27d99;
}


table .bg-gray-50 {
    background-color: #0a0711;
}

table .bg-white {
    background-color: #140f26;
}

table .bg-gray-50 {
    background-color: #130f22;
}

table .text-gray-900 {
    color: #98b3e1 !important;
}

table .text-red-600 {
    color: #5d82c1 !important;
}

table .text-gray-500 {
    color: #5d7091 !important;
}

.border-b, table * {
    border-color: #261d48 !important;
}

li.bg-white {
    background-color: #130f22;
}

img.mr-2 {
    opacity: 0.75;
    filter: invert(1);
}


.bg-blue-50 {
   background-color: #151c2f; 
}

.text-blue-400 {
    color: #4f67a8; 
}

.text-blue-800 {
   color: #6680c6; 
}


.origin-top-left > .bg-white {
    background-color: #130f22;
}

.origin-top-left .hover\:bg-gray-100:hover {
    background-color: #221c3c;
}

a > p {
    color: #a6b6d0;
}

a.text-gray-700 {
    color: #7c8ba4;
}


.border-gray-100 {
    border-color: #261d48 !important;
}


#chart div > div + div {
    background-color: #130f22 !important;
}


#chart div > div + div > div > svg {
    fill: #98b3e1;
}

#chart div > div + div > div > svg + div {
    color: #5d82c1;
}