thedesk/app/css/themes.css

:root {
  --bg: white;
  --drag: rgba(255, 255, 255, 0.8);
  --color: black;
  --beforehover: #757575;
  --modal: white;
  --subcolor: #e0e0e0;
  --box: white;
  --sidebar: #eeeeee;
  --shared: #cfd8dc;
  --notfbox: white;
  --emphasized: #81c784;
  --his-data: rgba(255, 255, 255, 0.9);
  --active: #e6ee9c;
  --postbox: white;
  --modalfooter: #fafafa;
  --accentbtn: #009688;
  --selected: #c0c0c0;
  --selectedWithShare: #b2babd;
  --gray: #757575;
}
#imagemodal {
  background: url("../img/pixel.white.svg");
}
.blacktheme {
  --bg: #212121;
  --drag: rgba(0, 0, 0, 0.8);
  --color: white;
  --beforehover: #9e9e9e;
  --modal: black;
  --subcolor: #212121;
  --box: #424242;
  --sidebar: #424242;
  --shared: #004d40;
  --notfbox: #333333;
  --emphasized: #4e342e;
  --his-data: rgba(0, 0, 0, 0.8);
  --active: #757575;
  --postbox: #424242;
  --modalfooter: #212121;
  --accentbtn: #3f51b5;
  --selected: #3f3f3f;
  --selectedWithShare: #003a30;
  --gray: #cccccc;
}
.blacktheme #imagemodal {
  background: url("../img/pixel.svg");
}
.indigotheme {
  --bg: #031833;
  --drag: rgba(0, 0, 0, 0.8);
  --color: white;
  --beforehover: #9e9e9e;
  --modal: #0d1351;
  --subcolor: #0d1351;
  --shared: #004d40;
  --box: #0d1351;
  --sidebar: #0d1351;
  --notfbox: #0d47a1;
  --emphasized: #4e342e;
  --his-data: rgba(13, 19, 81, 0.8);
  --active: #757575;
  --postbox: #1a237e;
  --modalfooter: #031833;
  --accentbtn: #00acc1;
  --selected: #214f8a;
  --selectedWithShare: #003a30;
  --gray: #cccccc ;
}
.indigotheme #imagemodal {
  background: url("../img/pixel.svg");
}
.browntheme {
  --bg: #261411;
  --drag: rgba(0, 0, 0, 0.8);
  --color: white;
  --beforehover: #9e9e9e;
  --modal: #261411;
  --subcolor: #4e342e;
  --shared: #004d40;
  --box: #4e342e;
  --sidebar: #4e342e;
  --notfbox: #4e342e;
  --emphasized: #0d47a1;
  --his-data: rgba(62, 39, 35, 0.8);
  --active: #757575;
  --postbox: #4e342e;
  --modalfooter: #261411;
  --accentbtn: #827717;
  --selected: #6d352b;
  --selectedWithShare: #003a30;
  --gray: #cccccc;
}
.browntheme #imagemodal {
  background: url("../img/pixel.svg");
}
.greentheme {
  --bg: #c8e6c9;
  --drag: rgba(255, 255, 255, 0.8);
  --color: black;
  --beforehover: #757575;
  --modal: #81c784;
  --subcolor: #a5d6a7;
  --box: #81c784;
  --sidebar: #c5e1a5;
  --shared: #ffcc80;
  --notfbox: #a5d6a7;
  --emphasized: #9e9d24;
  --his-data: rgba(255, 255, 255, 0.9);
  --active: #e6ee9c;
  --postbox: #a5d6a7;
  --modalfooter: #81c784;
  --accentbtn: #33691e;
  --selected: #78c17a;
  --selectedWithShare: #caa266;
  --gray: #757575;
}
.greentheme #imagemodal {
  background: url("../img/pixel.white.svg");
}
.bluetheme {
  --bg: #c9e1ec;
  --drag: rgba(255, 255, 255, 0.8);
  --color: black;
  --beforehover: #757575;
  --modal: #b2ebf2;
  --subcolor: #90caf9;
  --box: #90caf9;
  --sidebar: #b6e6f5;
  --shared: #e0ffe4;
  --notfbox: #90caf9;
  --emphasized: #c5e1a5;
  --his-data: rgba(255, 255, 255, 0.9);
  --active: #b39ddb;
  --postbox: #dff1ff;
  --modalfooter: #2196f3;
  --accentbtn: #2f7bb7;
  --selected: #9dcade;
  --selectedWithShare: #c1dac4;
  --gray: #757575;
}
.bluetheme #imagemodal {
  background: url("../img/pixel.white.svg");
}