Change the Login side color of the modern login page

zvizdo3 years ago

Hello,

I am trying to change the left side color of the traccar moder login page, here is the image :
https://ibb.co/smXh60k

Now, I fin that this is the css rule with the backgroud color : #1a237e which I want to change and here is the css rule:

.jss7 {
    color: #ffffff;
    width: 28%;
    display: flex;
    background: #1a237e;
    align-items: center;
    padding-bottom: 40px;
    justify-content: center;
}

but I can not find this css color or the rule in the traccar modern in the git hub:
https://github.com/traccar/traccar-web/tree/master/modern

Where can I find this css color to change it ?

thank you

Anton Tananaev3 years ago
DonNoe72 years ago

como ejecutaste el código fuente del sistema traccar y que cosas se necesita o que programas para hacer que funcione

Kevin Medow2 years ago

Hi,

I'm not a expert with React/MUI but I think you can change the color of the Sidebar in:
https://github.com/traccar/traccar-web/blob/master/modern/src/login/LoginLayout.js

The easy way is, to choose one of the Mui default colors -> https://mui.com/material-ui/customization/palette/

as an example:

  sidebar: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    ->  background: theme.palette.primary.main <- change the color to theme.palette.primary.dark (change to the darker color)
    paddingBottom: theme.spacing(5),
    width: theme.dimensions.sidebarWidth,
    [theme.breakpoints.down('lg')]: {
      width: theme.dimensions.sidebarWidthTablet,
    },
    [theme.breakpoints.down('sm')]: {
      width: '0px',
    },
  },

Change that and compile the source code again, delete the cache and then it should work :)

To make a own palette or just learn more about Mui templates you have to check the link that Anton Tananaev posted (https://mui.com/material-ui/customization/theming/)

I'll deal with it more now, looks like fun! :p

Have a nice day!

zvizdo2 years ago

Hello Kevin,

nice presentation.

Is it how its possible to change complete theme to dark theme ?