Add dark mode

about.html

@@ -7,6 +7,7 @@
 	<title>About - InfoTren</title>
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 
 	<script src="/common/worker.js"></script>
 	<script defer src="/common/back.js"></script>

base.css

@@ -94,7 +94,7 @@ header {
 }
 
 header.embedded {
-	background-color: #0000ff;
+	background-color: #0000ff !important;
 	color: white;
 }
 
@@ -108,7 +108,7 @@ header.embedded {
 
 @media (display-mode: window-controls-overlay) {
 	header {
-		background-color: #0000ff;
+		background-color: #0000ff !important;
 		color: white;
 	}
 

base.dark.css

@@ -0,0 +1,38 @@
+@media (prefers-color-scheme: dark) {
+
+body {
+	color: white;
+	background-color: black;
+}
+
+header:not(.embedded) {
+	background-color: black;
+}
+
+footer {
+	background-color: #303030;
+}
+
+h4 {
+	color: #a0a0a0;
+	background-color: #0f0f0f;
+}
+
+p.sec, p.thi {
+	color: lightgrey;
+}
+
+li.items:not(.disabled):hover:not(:focus), a:not(.disabled):hover:not(:focus) {
+	background-color: #0000bb;
+	color: white;
+}
+
+a:not(.no-a-custom):not(.no-custom-a):not(:focus):not(:hover) {
+	color: white;
+}
+
+.back {
+	filter: invert(1);
+}
+
+}

index.html

@@ -9,6 +9,7 @@
 	<link rel="manifest" href="/manifest.json">
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 
 	<script src="/common/worker.js"></script>
 	<script src="/common/items.js"></script>

route.html

@@ -9,6 +9,7 @@
 	<link rel="manifest" href="/manifest.json">
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 	<link rel="stylesheet" href="route.css">
 
 	<script src="/common/worker.js"></script>

showcase.html

@@ -7,6 +7,7 @@
 	<title>Showcase</title>
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 
 	<script src="/common/worker.js"></script>
 	<script defer src="/common/back.js"></script>

station.html

@@ -4,11 +4,13 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="color-scheme" content="light dark">
 	<title>Station - InfoTren</title>
 
 	<link rel="manifest" href="/manifest.json">
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 
 	<script src="/common/worker.js"></script>
 	<script defer src="/common/back.js"></script>

sw.js

@@ -1,4 +1,4 @@
-const VERSION = 'v34'
+const VERSION = 'v35'
 const API_ORIGIN = 'https://scraper.infotren.dcdev.ro/'
 const API_TRAINS = `${API_ORIGIN}v3/trains`
 const API_STATIONS = `${API_ORIGIN}v3/stations`
@@ -20,6 +20,7 @@ const CACHE_FIRST = [
 
 	// Base
 	'/base.css',
+	'/base.dark.css',
 
 	// Pages
 	'/index.html',
@@ -34,6 +35,7 @@ const CACHE_FIRST = [
 	'/view-train.html',
 	'/view-train.js',
 	'/view-train.css',
+	'/view-train.dark.css',
 
 	'/station.html',
 	'/station.js',
@@ -41,6 +43,7 @@ const CACHE_FIRST = [
 	'/view-station.html',
 	'/view-station.js',
 	'/view-station.css',
+	'/view-station.dark.css',
 
 	'/route.html',
 	'/route.js',

train.html

@@ -4,11 +4,13 @@
 	<meta charset="UTF-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="color-scheme" content="light dark">
 	<title>Train - InfoTren</title>
 
 	<link rel="manifest" href="/manifest.json">
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 
 	<script src="/common/worker.js"></script>
 	<script defer src="/common/back.js"></script>

view-station.dark.css

@@ -0,0 +1,43 @@
+@media(prefers-color-scheme: dark) {
+
+.early {
+	color: lightgreen;
+}
+
+.late {
+	color: #ff3333;
+}
+
+#tabs-arr {
+	border-bottom-color: #bbffbb;
+}
+
+#tabs-dep {
+	border-bottom-color: #bbbbff;
+}
+
+#arrivals .train-item {
+	background-color: #001a00;
+}
+
+#arrivals .train-item:nth-of-type(even) {
+	background-color: #004400;
+}
+
+#departures .train-item {
+	background-color: #00002a;
+}
+
+#departures .train-item:nth-of-type(even) {
+	background-color: #000066;
+}
+
+.train-item.cancelled {
+	background-color: #550000 !important;
+}
+
+.train-item .platform {
+	border-color: white;
+}
+
+}

view-station.html

@@ -9,7 +9,9 @@
 	<link rel="manifest" href="/manifest.json">
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 	<link rel="stylesheet" href="view-station.css">
+	<link rel="stylesheet" href="view-station.dark.css">
 
 	<script src="/common/worker.js"></script>
 	<script defer src="/common/back.js"></script>

view-train.dark.css

@@ -0,0 +1,23 @@
+@media(prefers-color-scheme: dark) {
+
+.early {
+	color: lightgreen;
+}
+
+.late {
+	color: #ff3333;
+}
+
+.station { 
+	color: white; 
+}
+
+.stationItem:nth-of-type(even) {
+	background-color: #0f0f0f;
+}
+
+.stationItem .arrival .original, .stationItem .departure .original {
+	color: #afafaf;
+}
+
+}

view-train.html

@@ -9,7 +9,9 @@
 	<link rel="manifest" href="/manifest.json">
 
 	<link rel="stylesheet" href="/base.css">
+	<link rel="stylesheet" href="/base.dark.css">
 	<link rel="stylesheet" href="view-train.css">
+	<link rel="stylesheet" href="view-train.dark.css">
 
 	<script src="/common/worker.js"></script>
 	<script defer src="/common/back.js"></script>