#14 Introduce dark mode

This commit is contained in:
2021-03-01 23:43:31 +01:00
parent ad540950cd
commit fde1c6787e
31 changed files with 137 additions and 13 deletions

View File

@@ -1,5 +1,6 @@
v44 -> v45:
- #5 Having no periods breaks the "expenses per period" graph on the account overview page
- #14 Introduce toggleable dark mode
v43 -> v44:
- #8: Remove hard dependency on push-service - integrate new release of push-service

View File

@@ -0,0 +1,16 @@
/* Color definitions for dark mode */
:root {
--error-color: #D30000;
--bank-color: #008FFB;
--cash-color: #FFCB00;
--income-color: #00A900;
--liability-color: #D36000;
--expense-color: #D30000;
--start-color: #AB005D;
--text-color: #7f7f7f;
--background-color: #1d1f21;
--link-color: #87ab63;
--hover-color: #1f1f2f;
--border-color: #7f7f7f;
}
/* --------------------- */

View File

@@ -0,0 +1,16 @@
/* Color definitions for light mode */
:root {
--error-color: #D30000;
--bank-color: #008FFB;
--cash-color: #FFCB00;
--income-color: #00A900;
--liability-color: #D36000;
--expense-color: #D30000;
--start-color: #AB005D;
--text-color: #000000;
--background-color: #FFFFFF;
--link-color: #0000EE;
--hover-color: lightgrey;
--border-color: #ddd;
}
/* --------------------- */

View File

@@ -1,16 +1,18 @@
/* Variable declarations */
:root {
--error-color: #D30000/*#ff6666*/;
--bank-color: #008FFB;
--cash-color: #FFCB00;
--income-color: #00A900;
--liability-color: #D36000;
--expense-color: #D30000;
--start-color: #AB005D;
--type-row-width: 5px;
}
/* --------------------- */
body {
color: var(--text-color);
background-color: var(--background-color);
}
a {
color: var(--link-color);
}
#account-overview-table,
#transaction-table,
#recurring-transaction-list-table {
@@ -27,7 +29,7 @@
#transaction-table td,
#recurring-transaction-list-table th,
#recurring-transaction-list-table td {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--border-color);
padding: 0.3em;
vertical-align: top;
}
@@ -37,11 +39,11 @@
#recurring-transaction-list-table th {
position: sticky;
top: 0px;
background-color: white;
background-color: var(--background-color);
}
tr:hover {
background-color: lightgrey;
background-color: var(--hover-color);
}
.overspend {