add proper dark mode support0.1.0

3 files changed, 37 insertions, 21 deletions

diff --git a/sass/app.scss b/sass/app.scss
index 0b960f5..621cb79 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -1,7 +1,7 @@
 body {
 	margin: 0;
-	color: black;
-	background-color: white;
+	color: $fg;
+	background-color: $bg;
 }
 
 html {
@@ -149,7 +149,7 @@ ul.stops {
 		width: 100%;
 		position: relative;
 		border-bottom: 1px solid grey;
-		background-color: white;
+		background-color: $bg;
 		cursor: pointer;
 
 		.name {
@@ -160,7 +160,7 @@ ul.stops {
 			overflow: hidden;
 			background-color: transparent;
 			font-size: 150%;
-			color: black;
+			color: $fg;
 		}
 
 		.distance {
@@ -200,33 +200,33 @@ ul.stops {
 			}
 
 			.longdistance {
-				border: 0.1em solid #ffcccc;
+				border: 0.1em solid $longdistance-bg;
 			}
 
 			.regional {
-				background-color: #eeeeee;
+				background-color: $regional-bg;
 			}
 
 			.tram {
-				background-color:#ffcccc;
+				background-color: $tram-bg;
 			}
 
 			.taxi {
-				background-color:#eeaaee;
+				background-color: $taxi-bg;
 				font-weight: normal;
 			}
 
 			.suburban {
-				background-color:#aaffba;
+				background-color: $suburban-bg;
 				border-radius: 30px;
 			}
 
 			.subway {
-				background-color:#aac0ff;
+				background-color: $subway-bg;
 			}
 
 			.bus {
-				background-color:#eeaaee;
+				background-color: $bus-bg;
 				border-radius: 10px;
 			}
 		}
@@ -252,7 +252,7 @@ ul.departures {
 		position: relative;
 		cursor: pointer;
 		border-bottom: 1px solid grey;
-		background-color: white;
+		background-color: $bg;
 
 		&.cancelled {
 			background-color: #ffe7d0;
@@ -268,31 +268,31 @@ ul.departures {
 		max-width: 5em;
 		overflow: hidden;
 		font-size: 120%;
-		background-color: #eeeeee;
+		background-color: $regional-bg;
 		font-weight: bold;
 		padding-left: 0.1em;
 		padding-right: 0.1em;
 	}
 
 	.longdistance {
-		border: 0.1em solid #ffcccc;
+		border: 0.1em solid $longdistance-bg;
 	}
 
 	.tram {
-		background-color:#ffcccc;
+		background-color: $tram-bg;
 	}
 
 	.suburban {
-		background-color:#aaffba;
+		background-color: $suburban-bg;
 		border-radius: 30px;
 	}
 
 	.subway {
-		background-color:#aac0ff;
+		background-color: $subway-bg;
 	}
 
 	.bus {
-		background-color:#eeaaee;
+		background-color: $bus-bg;
 		border-radius: 10px;
 	}
 
@@ -304,7 +304,7 @@ ul.departures {
 		overflow: hidden;
 		background-color: transparent;
 		font-size: 150%;
-		color: black;
+		color: $fg;
 	}
 
 	.destsuffix {
@@ -322,7 +322,7 @@ ul.departures {
 		top: 1px;
 		background-color: transparent;
 		padding-left: 0.2em;
-		color: black;
+		color: $fg;
 
 		.delay {
 			padding-right: 1ex;
@@ -338,7 +338,7 @@ ul.departures {
 		background-color: transparent;
 		font-size: 140%;
 		font-weight: bold;
-		color: black;
+		color: $fg;
 	}
 }
 
diff --git a/sass/dark.scss b/sass/dark.scss
index 3104cd5..ba14876 100644
--- a/sass/dark.scss
+++ b/sass/dark.scss
@@ -15,4 +15,12 @@ $fg3: #999999;
 
 $link-color: #9999ff;
 
+$longdistance-bg: #7c1a1a;
+$regional-bg: #444444;
+$tram-bg: #852121;
+$taxi-bg: #7f3d7f;
+$suburban-bg: #2f6639;
+$subway-bg: #2045b0;
+$bus-bg: #7f3d7f;
+
 @import 'app.scss';
diff --git a/sass/light.scss b/sass/light.scss
index be313e4..99c3c44 100644
--- a/sass/light.scss
+++ b/sass/light.scss
@@ -15,4 +15,12 @@ $fg3: #999999;
 
 $link-color: #000099;
 
+$longdistance-bg: #ffcccc;
+$regional-bg: #eeeeee;
+$tram-bg: #ffcccc;
+$taxi-bg: #eeaaee;
+$suburban-bg: #aaffba;
+$subway-bg: #aac0ff;
+$bus-bg: #eeaaee;
+
 @import 'app.scss';