Add theme support

This commit is contained in:
2022-10-03 12:05:44 +02:00
parent 394d86a13a
commit 257f665ce6
7 changed files with 120 additions and 33 deletions

View File

@@ -1,30 +1,3 @@
:root {
--bg-color: #353535;
--element-color: #333030;
--element-color-hover: #292424;
--element-border-input: #4e7a3a;
--element-border-focus: #9ac982;
--element-border-action: #1f5b63;
--text-color: #bdbdbd;
--font-family: "sourcesanspro";
--titlebar-color: #212121;
--titlebar-element-active-color: #466439;
--titlebar-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
--bottomnav-color: #555555;
--bottomnav-icon-color: #c7c7c7;
--bottomnav-icon-active-color: #456c47;
--bottomnav-active-color: #7ca74b;
--bottomnav-shadow: 5px 7px 19px 0px rgba(0, 0, 0, 0.25);
--loader-color: #7ca74b;
--substitution-background-change: #14587e;
--substitution-background-cancellation: #7d2b2d;
--substitution-background-addition: #476331;
--substitution-background-deletion: #7d2b2d;
--substitution-background-unchanged: #26272a;
--timetable-trust-warning-border: #b71c1c;
--timetable-trust-warning-background: #412727;
}
@font-face {
font-family: "sourcesanspro";
font-style: "normal";

53
src/assets/themes.css Normal file
View File

@@ -0,0 +1,53 @@
.app.theme-dark {
--bg-color: #353535;
--element-color: #333030;
--element-color-hover: #292424;
--element-border-input: #4e7a3a;
--element-border-focus: #9ac982;
--element-border-action: #1f5b63;
--text-color: #bdbdbd;
--font-family: "sourcesanspro";
--titlebar-color: #212121;
--titlebar-element-active-color: #466439;
--titlebar-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
--bottomnav-color: #555555;
--bottomnav-icon-color: #c7c7c7;
--bottomnav-icon-active-color: #456c47;
--bottomnav-active-color: #7ca74b;
--bottomnav-shadow: 5px 7px 19px 0px rgba(0, 0, 0, 0.25);
--loader-color: #7ca74b;
--substitution-background-change: #095079;
--substitution-background-cancellation: #7d2b2d;
--substitution-background-addition: #375c1d;
--substitution-background-deletion: #7d2b2d;
--substitution-background-unchanged: #26272a;
--timetable-trust-warning-border: #b71c1c;
--timetable-trust-warning-background: #412727;
}
.app.theme-light {
--bg-color: #e0e0e0;
--element-color: #bdbdbd;
--element-color-hover: #ada9a9;
--element-border-input: #4caf50;
--element-border-focus: #7ba764;
--element-border-action: #3f51b5;
--text-color: #353131;
--font-family: "sourcesanspro";
--titlebar-color: #d3d4d3;
--titlebar-element-active-color: #97af98;
--titlebar-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
--bottomnav-color: #b1c5b2;
--bottomnav-icon-color: #584f4f;
--bottomnav-icon-active-color: #456c47;
--bottomnav-active-color: #99b677;
--bottomnav-shadow: 5px 7px 19px 0px rgba(0, 0, 0, 0.25);
--loader-color: #7ca74b;
--substitution-background-change: #9bb7c7;
--substitution-background-cancellation: #e4a7a9;
--substitution-background-addition: #b0d396;
--substitution-background-deletion: #e4a7a9;
--substitution-background-unchanged: #cecccc;
--timetable-trust-warning-border: #b71c1c;
--timetable-trust-warning-background: #dabcbc;
}