client/themes/material/css/color.css

/* Color */

body {
    --movim-main: 255, 87, 34;
    --movim-accent: #3F51B5;
    --movim-background-main: 255, 255, 255;
    --movim-background: #EEE;
    --movim-font: 0, 0, 0;
}

body.nightmode {
    --movim-accent: #222;
    --movim-background-main: 41, 41, 41;
    --movim-background: #393939;
    --movim-font: 255, 255, 255;
}

body > *,
.context_menu,
input, textarea, select {
    color: rgba(var(--movim-font), 0.87);
}

ul.list li.divided,
hr:not(.clear),
.card > .block:not(.subheader):not(.simple),
*.divided > *:not(:last-child),
*.divided.spaced > *:not(:last-child):after {
    border-color: rgba(var(--movim-font), 0.12);
}

label, span.info,
.tabs a,
table tr th {
    color: rgba(var(--movim-font), 0.54);
}

main > section > div > header.scroll {
    background-color: var(--movim-background);
}

.color {
    background-color: #607D8B;
    color: white;
}

.color.dark {
    background-color: #212121;
}

.color.dark *.divided > *:not(:last-child) {
    border-color: rgba(255, 255, 255, 0.05);
}

ul li.date > p.normal,
.dialog, .drawer, ul.context_menu,
ul li div.bubble:not(.sticker):not(.file),
.card > .block:not(.subheader):not(.simple),
main {
    background-color: rgb(var(--movim-background-main));
}

main > header a,
.icon:not(.placeholder):not(.active) a,
.color input {
    color: white;
}

.button.color,
.color,
ul li span.counter,
form > div .radio > input[type="radio"]:checked + label {
    border-color: rgb(var(--movim-main));
    background-color: rgb(var(--movim-main));
    color: white;
}

/* Elements */

.button.red,    .icon.red   , p.user.red      { color: #F44336; }
.button.purple, .icon.purple, p.user.purple   { color: #9C27B0; }
.button.indigo, .icon.indigo, p.user.indigo   { color: #3F51B5; }
.button.blue,   .icon.blue  , p.user.blue     { color: #2196F3; }
.button.green,  .icon.green , p.user.green    { color: #689F38; }
.button.orange, .icon.orange, p.user.orange   { color: #FF9800; }
.button.yellow, .icon.yellow, p.user.yellow   { color: #FBC02D; }
.button.brown,  .icon.brown , p.user.brown    { color: #795548; }
ul li.action > div.action,
ul li.action > form > div.action,
.button.gray,   .icon.gray  , p.user.gray     { color: #9E9E9E; }
.button.black,  .icon.black , p.user.black    { color: #000; }

.color          { color: white; background-color: #607D8B; border-color: #607D8B }
span.icon.status.dnd:after,
.color.red      { color: white; background-color: #F44336; border-color: #F44336 }
span.icon.status.xa:after,
.color.purple   { color: white; background-color: #9C27B0; border-color: #9C27B0 }
.color.indigo   { color: white; background-color: #3F51B5; border-color: #3F51B5 }
.color.blue     { color: white; background-color: #2196F3; border-color: #2196F3 }
span.icon.status.chat:after,
span.icon.status.online:after,
.color.green    { color: white; background-color: #689F38; border-color: #689F38 }
.color.orange   { color: white; background-color: #FF9800; border-color: #FF9800 }
span.icon.status.away:after,
.color.yellow   { color: white; background-color: #FDD835; border-color: #FDD835 }
span.icon.status.server_error:after,
.color.brown    { color: white; background-color: #795548; border-color: #795548 }
.color.gray     { color: white; background-color: #9E9E9E; border-color: #9E9E9E }
.color.black    { color: white; background-color: #000;    border-color: #000 }
.color.lime     { color: white; background-color: #CDDC39; border-color: #CDDC39 }
.color.cyan     { color: white; background-color: #00bcd4; border-color: #00bcd4 }
.color.teal     { color: white; background-color: #009688; border-color: #009688 }
.color.pink     { color: white; background-color: #e91e63; border-color: #e91e63 }
.color.dorange  { color: white; background-color: #ff5722; border-color: #ff5722 }
.color.lblue    { color: white; background-color: #03a9f4; border-color: #03a9f4 }
.color.amber    { color: white; background-color: #ffc107; border-color: #ffc107 }
.color.bgray    { color: white; background-color: #607d8b; border-color: #607d8b }

.color.transparent { color: white; background-color: rgba(0, 0, 0, 0); }

form > div > input:focus:invalid,
form > div > input:focus:required {
    box-shadow: 0px 2px 0px #F44336;
}

form > div > input:invalid,
form input:focus:invalid + label,
form textarea:focus:invalid + label {
    color: #F44336;
}

ul.list li > p:nth-last-of-type(3) + p:not(.normal),
ul.list li > p:nth-last-of-type(2) + p:not(.normal) {
    color: rgba(var(--movim-font), 0.60);
}

/* Default color : indigo */

input[type=button].color,
main > section > div > header.fixed,
main > header {
    background-color: var(--movim-accent);
    color: white;
    border-color: var(--movim-accent);
}

header.fixed ul.list li > p:nth-last-of-type(2) + p,
main > section > div > header.big *,
.snackbar ul.list li > p:nth-last-of-type(2) + p,
main > header ul.list li > p:nth-last-of-type(2) + p,
header.big ul.list li > p:nth-last-of-type(2) + p {
    color: white;
}

/* Gray accent : orange */

.tabs,
.tabs li.active a:not(.classic):not(.action),
.button,
header:not(.big) .icon a,
a {
    color: rgb(var(--movim-main));
    border-color: rgb(var(--movim-main));
}

form > div .checkbox:before { background-color: rgba(var(--movim-main), 0.5); }
form > div .checkbox > input[type="checkbox"]:checked + label { background-color: rgb(var(--movim-main)); }

form input:focus:not(:invalid) + label,
form textarea:focus:not(:invalid) + label {
    color: rgb(var(--movim-main));
}

form input:focus:not(:invalid):not(.button),
form textarea:focus:not(:invalid):not(.button) {
    box-shadow: 0px 2px 0px rgb(var(--movim-main));
}