Traccar Dark Mode

Cristian9 months ago

I have modified the code to enable the dark mode, but I still have a detail to solve, the modifications are explained at the end of the following link:

https://github.com/traccar/traccar-web/issues/1129

nabil boumimimak8 months ago

it is really nice what you ve did, however when followed your steps it worked for me expet this little issue where in reports and other windows like the list of attributes the background stayed white
not sure how i can explain , i ll add pics for reference.

one more i wanted to ask you about if you don't mind , how did you manage to make status card as you did , i ve been trying to pull that off for the last mount and the best think i could have do is in the pics.
https://imgur.com/a/Lk0efIL

Cristian8 months ago

HI,
background stayed white -> <body class="body dark-scheme">
that part of the code modifies the background color. You must clear the browser cache. Obviously for the style to work you must add these lines to the style.css file:

@media (prefers-color-scheme: dark) {
  .body.dark-scheme {
    background: black;
    color: white;
  }
  .MuiButton-outlined {
  border-color: white;
  }
  .MuiButtonBase-root {
    color: white;
  }
}

for popup use mui tabs
https://mui.com/material-ui/react-tabs/

nabil boumimimak8 months ago

thank you for the popup.
regarding the dark theme i tried it again and made sure to clear all browsing data including the cache, i even tried it in another pc and still the same thing.
seems to the only code that is changing the code the one that is written in palette file, also if delete the codes in styles and index nothing changes.
here is a short screen capture to show you how the Ui is reacting and how i wrote the codes.
sorry if I'm being a nuisance to you and thank you again.
https://we.tl/t-rtBJDznSyG

Cristian8 months ago

in the video you can see the effect that occurs when modifying the css style code
https://www.veed.io/view/5801ad30-161c-483f-9fd1-333014cb0b56?panel=share

nabil boumimimak8 months ago

i know now where exactly my probleme is however fixing it is something else , i ll try to see so why its happening , seems to my index.html is having trouble locating src and styles.css
https://imgur.com/a/YrzYEfv