Add dark mode (only available with prefers-color-scheme currently)

.gitignore

@@ -64,3 +64,6 @@ tags
 [._]*.un~
 
 # End of https://www.gitignore.io/api/vim,perl
+
+### theme stuff ###
+sass/node_modules

sass/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "semi": true,
+  "trailingComma": "es5"
+}

sass/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "travelynx",
+  "version": "1.0.0",
+  "description": "travelynx - Railway Travel Logger",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/derf/travelynx.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/derf/travelynx/issues"
+  },
+  "homepage": "https://github.com/derf/travelynx#readme",
+  "devDependencies": {
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
+    "materialize-css": "^1.0.0-rc.2",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.12.0",
+    "postcss": "^7.0.16",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.6.0",
+    "postcss-scss": "^2.0.0",
+    "sass-loader": "^7.1.0",
+    "webpack": "^4.31.0",
+    "webpack-cli": "^3.3.2"
+  }
+}

sass/src/common/index.scss

@@ -0,0 +1,18 @@
+$customColors: (
+  'caution': $error-color,
+  'info': $info-color,
+  'contrast': $off-black,
+);
+
+@each $name, $color in $customColors {
+  .#{$name}-color {
+    background-color: $color;
+  }
+  .#{$name}-color-text {
+    color: $color;
+  }
+}
+
+html {
+  background-color: $bg-color;
+}

sass/src/dark/_variables.scss

@@ -0,0 +1,18 @@
+$bg-color: color('grey', 'darken-4') !default;
+$info-color: color('yellow', 'darken-4');
+
+$off-black: color('shades', 'white');
+
+$primary-color: color('materialize-red', 'darken-2');
+$secondary-color: color('teal', 'darken-2');
+$link-color: color('light-blue', 'darken-1');
+$collection-link-color: color('teal', 'darken-4');
+$success-color: color('green', 'darken-2');
+$error-color: color('red', 'darken-2');
+$input-border-color: $off-black;
+$radio-empty-color: $off-black !default;
+
+$table-striped-color: color('grey', 'darken-3');
+$button-flat-color: $off-black;
+$card-bg-color: color('grey', 'darken-2');
+$card-link-color: $link-color;

sass/src/dark/index.scss

@@ -0,0 +1,8 @@
+@import '../../node_modules/materialize-css/sass/components/color-variables';
+@import 'variables.scss';
+@import '../../node_modules/materialize-css/sass/materialize.scss';
+@import '../common/index.scss';
+
+html {
+  background-color: $bg-color;
+}

sass/src/light/_variables.scss

@@ -0,0 +1,5 @@
+$bg-color: #fff;
+$info-color: color('yellow', 'lighten-4');
+$link-color: color('light-blue', 'darken-1');
+$card-link-color: $link-color;
+$card-bg-color: color('blue-grey', 'lighten-5');

sass/src/light/index.scss

@@ -0,0 +1,4 @@
+@import '../../node_modules/materialize-css/sass/components/color-variables';
+@import 'variables.scss';
+@import '../../node_modules/materialize-css/sass/materialize.scss';
+@import '../common/index.scss';

sass/webpack.config.js

@@ -0,0 +1,47 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+console.log(path.resolve('../public/static/css/'));
+
+module.exports = {
+  mode: 'production',
+  entry: {
+    light: './src/light/index.scss',
+    dark: './src/dark/index.scss',
+  },
+  output: {
+    path: path.resolve('../public/static/css/'),
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: '[name].min.css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.s?css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              ident: 'postcss',
+              plugins: loader => [
+                require('postcss-preset-env')(),
+                require('cssnano')(),
+              ],
+            },
+          },
+          'sass-loader',
+        ],
+      },
+    ],
+  },
+};

templates/account.html.ep

@@ -119,7 +119,7 @@
 						<button class="btn waves-effect waves-light" type="submit" name="action" value="generate">
 							Generieren
 						</button>
-						<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
+						<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
 							Löschen
 						</button>
 					%= end
@@ -213,7 +213,7 @@
 			</div>
 			<div class="input-field col s12 m12 l4 center-align">
 				%= csrf_field
-				<button class="btn waves-effect waves-light red" type="submit" name="action" value="delete">
+				<button class="btn waves-effect waves-light caution-color" type="submit" name="action" value="delete">
 					Account löschen
 				</button>
 			</div>

templates/add_journey.html.ep

@@ -2,7 +2,7 @@
 % if (not get_oldest_journey_ts()) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card yellow lighten-4">
+			<div class="card info-color">
 				<div class="card-content">
 					<span class="card-title">Hinweis</span>
 					<p>travelynx ist darauf ausgelegt, über die Hauptseite in
@@ -16,7 +16,7 @@
 % if ($error) {
 	<div class="row">
 		<div class="col s12">
-			<div class="card red darken-4">
+			<div class="card caution-color">
 				<div class="card-content white-text">
 					<span class="card-title">Ungültige Eingabe</span>
 					<p><%= $error %></p>

templates/landingpage.html.ep

@@ -2,7 +2,7 @@
 	% if (stash('error')) {
 		<div class="row">
 			<div class="col s12">
-				<div class="card red darken-4">
+				<div class="card caution-color">
 					<div class="card-content white-text">
 						<span class="card-title">Backend-Fehler</span>
 						<p><%= stash('error') %></p>
@@ -18,7 +18,7 @@
 				%= include '_checked_in', journey => $status;
 			% }
 			% elsif ($status->{cancelled}) {
-				<div class="card yellow lighten-4">
+				<div class="card info-color">
 					<div class="card-content">
 						<span class="card-title">Zugausfall dokumentieren</span>
 						<p>Prinzipiell wärest du nun eingecheckt in
@@ -47,20 +47,20 @@
 				</div>
 			% }
 			% else {
-				<div class="card grey darken-4">
+				<div class="card">
-					<div class="card-content white-text">
+					<div class="card-content">
 						<span class="card-title">Hallo, <%= current_user()->{name} %>!</span>
 						<p>Du bist gerade nicht eingecheckt.</p>
 						<div class="geolocation">
-							<button class="btn waves-effect waves-light btn-flat white">Stationen in der Umgebung abfragen</button>
+							<button class="btn waves-effect waves-light btn-flat">Stationen in der Umgebung abfragen</button>
 						</div>
 						%= form_for 'list_departures' => begin
 							<div class="input-field">
-								%= text_field 'station', id => 'station', class => 'autocomplete white-text', required => undef
+								%= text_field 'station', id => 'station', class => 'autocomplete contrast-color-text', required => undef
 								<label for="station">Manuelle Eingabe (Name oder DS100)</label>
 							</div>
 							<div class="center-align">
-								<button class="btn waves-effect waves-light btn-flat white" type="submit" name="action" value="departures">
+								<button class="btn waves-effect waves-light btn-flat" type="submit" name="action" value="departures">
 									<i class="material-icons left">send</i>
 									Abfahrten
 								</button>

templates/layouts/default.html.ep

@@ -18,7 +18,23 @@
 	<link rel="apple-touch-icon" sizes="152x152" href="/static/<%= $av %>/icons/icon-152x152.png">
 	<link rel="apple-touch-icon" sizes="167x167" href="/static/<%= $av %>/icons/icon-167x167.png">
 	<link rel="manifest" href="/static/<%= $av %>/manifest.json">
-	%= stylesheet "/static/${av}/css/materialize.min.css"
+	<script>
+			function addStyleSheet(path) {
+				var st = document.createElement('link');
+				st.href = path;
+				st.rel = 'stylesheet';
+				document.head.appendChild(st);
+		}
+
+		if (window.matchMedia('(prefers-color-scheme: dark').matches) {
+				addStyleSheet("/static/<%= $av %>/css/dark.min.css");
+		} else {
+				addStyleSheet("/static/<%= $av %>/css/light.min.css");
+		}
+	</script>
+	<noscript>
+	%= stylesheet "/static/${av}/css/light.min.css"
+	</noscript>
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/local.css"
 	%= javascript "/static/${av}/js/jquery-3.4.1.min.js"
@@ -66,7 +82,7 @@
 % if (app->mode eq 'development') {
 <div class="container">
 	<div class="row">
-		<div class="col s12 red darken-4 white-text">
+		<div class="col s12 caution-color white-text">
 			Development Mode – Datenbank: <%= app->config->{db}->{database} %>
 			@ <%= app->config->{db}->{host} %>
 		</div>

templates/privacy.html.ep

@@ -14,7 +14,7 @@
 		<div class="input-field col s12">
 			<label>
 				%= check_box public_status => 1
-				<span class="black-text">Aktueller Status</span>
+				<span>Aktueller Status</span>
 			</label>
 		</div>
 	</div>