improve darkmode (Support Dark mode for Tabler) - basic darkmode already exists

[dontcrash]

Using the latest Tabler build, you can add this and the page will follow the user's device preferences for dark mode etc:

Here is an example of how it looks out of the box:

https://preview.tabler.io/?theme=dark

[Zoey2936]

I will try to implement it, but I think it will be hard since npm is based on a very very old tabler version

[dontcrash]

I will try to implement it, but I think it will be hard since npm is based on a very very old tabler version

I was planning to have a crack at it as well, everything else is dark mode :D

[Zoey2936]

My Idea would be to embed the dark reader script in combination with a button into the html code

[Zoey2936]

done, tested and pushed to latest, @dontcrash it would be nice, if you could give me feedback

[dontcrash]

Looks great!

[Zoey2936]

does the button in footer work?

[dontcrash]

Yep! Toggles it to an eye searing white 😄

[theraw]

dark mode looks broken takes too long to load dashboard fresh installation nothing changed
when i checked devtools darkreader.js was making 700+ requests to load dashboard

there also bunch of requests like this that i cannot see the image but http status was 200

[Zoey2936]

Time with darkmode: 8-10s (8,70MB) - 395 requests
Time without: 1,5-2s (4,04MB) - 20 requests
Yes, it makes more requests, they take longer to load and are bigger, but what do you mean with "broken"?
Do you know an alternative script, which adds a darkmode? Native Tabler support is not available...

[theraw]

Yes, it makes more requests, they take longer to load and are bigger, but what do you mean with "broken"?

i mean i don't think is good idea to jump to 100x more requests just for a dark mode and make unnecessary request to files like https://95.214.180.233:81/assets/tabler-ui/9f8e248d6e1a98b738dbc5de8efd3cec.svg or https://95.214.180.233:81/assets/tabler-ui/0e51972c264c2cb188c347cb5a5c1d80.svg etc

alternative would be to change some css stuff and make a dark mode without loading these svg 🤷
overall problem is with all these svg requests maybe theres some way to prevent it from loading these

[Zoey2936]

Yes, it makes more requests, they take longer to load and are bigger, but what do you mean with "broken"?

i mean i don't think is good idea to jump to 100x more requests just for a dark mode and make unnecessary request to files like https://95.214.180.233:81/assets/tabler-ui/9f8e248d6e1a98b738dbc5de8efd3cec.svg or https://95.214.180.233:81/assets/tabler-ui/0e51972c264c2cb188c347cb5a5c1d80.svg etc

that is a problem of darkreader.js, so the only thing I could do, is to use different script

alternative would be to change some css stuff and make a dark mode without loading these svg 🤷 overall problem is with all these svg requests maybe theres some way to prevent it from loading these

That is easier said than done... the NPM is built using webpack v4 and a very old tabler version, so there is no option to make simple edits to css

[theraw]

That is easier said than done... the NPM is built using webpack v4 and a very old tabler version, so there is no option to make simple edits to css

 body {
    color: rgb(181, 175, 166) !important;
    background-color: rgb(18, 19, 20) !important;
}
::-webkit-scrollbar {
    background-color: #202324 !important;
    color: #aba499 !important;
}
::-webkit-scrollbar {
    background-color: #202324 !important;
    color: #aba499 !important;
}
::-webkit-scrollbar-thumb {
    background-color: #454a4d !important;
}
.avatar {
    background-color: rgb(48, 52, 54) !important;
    color: rgb(161, 152, 140) !important;
}
.close {
    color: rgb(232, 230, 227) !important;
    text-shadow: rgb(24, 26, 27) 0px 1px 0px !important;
}
.modal-content {
    background-color: rgb(24, 26, 27) !important;
    border-color: rgba(140, 130, 115, 0.2) !important;
}
.modal-header {
    border-bottom-color: rgb(121, 113, 100) !important;
}
.nav-tabs {
    color: rgb(175, 168, 158) !important;
}
.nav-tabs {
    border-bottom-color: rgb(56, 61, 63) !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: rgb(181, 175, 166) !important;
    background-color: rgb(28, 30, 31) !important;
    border-color: rgb(56, 61, 63) rgb(56, 61, 63) rgb(30, 46, 76) !important;
}
.nav-tabs .nav-link.active {
    border-color: rgb(35, 77, 136) !important;
    color: rgb(85, 151, 211) !important;
    background-color: transparent !important;
}
.selectize-input.focus {
    border-color: rgb(35, 77, 136) !important;
    box-shadow: rgba(39, 86, 151, 0.25) 0px 0px 0px 2px !important;
}
.selectize-input, .selectize-control.single .selectize-input.input-active {
    background-color: rgb(24, 26, 27) !important;
}
.selectize-dropdown, .selectize-input, .selectize-input input {
    color: rgb(181, 175, 166) !important;
}
.selectize-input {
    border-color: rgba(124, 115, 101, 0.12) !important;
}
.selectize-input, .selectize-control.single .selectize-input.input-active {
    background-color: rgb(24, 26, 27) !important;
}
.selectize-control.multi .selectize-input > div {
    background-color: rgb(35, 38, 39) !important;
    color: rgb(181, 175, 166) !important;
    border-color: rgba(124, 115, 101, 0.12) !important;
}
.card {
    background-color: rgb(24, 26, 27) !important;
    border-color: rgba(124, 115, 101, 0.12) !important;
}
.tag {
    color: rgb(155, 146, 133) !important;
    background-color: rgb(35, 38, 39) !important;
}
.header {
    background-color: rgb(24, 26, 27) !important;
    border-bottom-color: rgba(124, 115, 101, 0.12) !important;
}
.navbar-light .navbar-brand {
    color: rgba(232, 230, 227, 0.9) !important;
}
.nav-tabs {
    color: rgb(174, 167, 156) !important;
}
.table th, .text-wrap table th, .table td, .text-wrap table td {
    border-top-color: rgb(56, 61, 63) !important;
}
.form-control {
    color: rgb(181, 175, 166) !important;
    background-color: rgb(24, 26, 27) !important;
    border-color: rgba(124, 115, 101, 0.12) !important;
}
.footer {
    background-color: rgb(24, 26, 27) !important;
    border-top-color: rgba(124, 115, 101, 0.12) !important;
    color: rgb(174, 167, 156) !important;
}
.text-default {
    color: rgb(181, 175, 166) !important;
}
::selection {
    background-color: #004daa !important;
    color: #e8e6e3 !important;
}
.dropdown-menu {
    color: rgb(181, 174, 164) !important;
    background-color: rgb(19, 21, 22) !important;
    border-color: rgba(103, 96, 85, 0.12) !important;
}
.dropdown-menu {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px !important;
}
.dropdown-menu-arrow::before {
    border-right-color: transparent !important;
    border-left-color: transparent !important;
    border-bottom-color: rgba(84, 91, 95, 0.2) !important;
}
.dropdown-divider {
    border-top-color: rgb(53, 58, 60) !important;
}
.dropdown-menu-arrow::after {
    border-right-color: transparent !important;
    border-bottom-color: rgb(48, 52, 54) !important;
    border-left-color: transparent !important;
}

not finished yet.

i'm busy with some other works and i don't have much free time, can you make a button to switch theme dark/white and load darkmode.css ?
!important will force the color there is no needed to change anything simply loading the darkmode.css will turn theme dark

[Zoey2936]

implemented in latest comment

[Zoey2936]

It seems to load the css file, but it changes nothing...

[theraw]

It seems to load the css file, but it changes nothing...

looks fine from here i simply added your script and removed darkreader from my index.html

[Zoey2936]

For me if I press the button, it add the css file to the header part of the html, loads it (I can see it in the network tab), but the desing doesnt change, even if I using the light mode and add your css file manually...

[theraw]

well thats weird what color is the login page here? https://mini-de1.dopehosting.net/

[dontcrash]

well thats weird what color is the login page here? https://mini-de1.dopehosting.net/

I wouldn't recommend exposing this to the public.

Dark Mode works but randomy changes back to eye-searing white and the only way to fix is to go back to the home page and refresh the page and toggle it again hmm

[theraw]

I wouldn't recommend exposing this to the public.

why?

i did some tests aswell with last develop docker image and i encountered problems.
i believe i have a fix i will finish rest of css and submit a pr

[Zoey2936]

will be published when #255 is done

[Zoey2936]

I've pushed this now to latest.