Add dark theme with setting toggle

app/views/header.php

@@ -7,6 +7,7 @@
 	<meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=1" />
 	<link rel="stylesheet" href="<?= $urlGenerator->assetUrl('css/app.min.css') ?>" />
+	<link rel="<?= $config->get('dark_theme') ? '' : 'alternate ' ?>stylesheet" title="Dark Theme" href="<?= $urlGenerator->assetUrl('css/dark.min.css') ?>" />
 	<link rel="icon" href="<?= $urlGenerator->assetUrl('images/icons/favicon.ico') ?>" />
 	<link rel="apple-touch-icon" sizes="57x57" href="<?= $urlGenerator->assetUrl('images/icons/apple-icon-57x57.png') ?>">
 	<link rel="apple-touch-icon" sizes="60x60" href="<?= $urlGenerator->assetUrl('images/icons/apple-icon-60x60.png') ?>">
@@ -38,4 +39,5 @@
 			}
 		}
 	?>
+
 	</header>

public/css/dark-override.css

@@ -0,0 +1,117 @@
+a {
+	color: rgb(25, 120, 226);
+}
+
+a:hover {
+	color: #9e34fd;
+}
+
+body,
+legend,
+nav ul li a {
+	background: #333;
+	color: #eee;
+}
+
+nav a:hover, nav li.selected a {
+	border-color: #fff;
+}
+
+header button {
+	background: transparent;
+}
+
+table {
+	box-shadow: none;
+}
+
+td, th {
+	border-color: #111;
+}
+
+thead td,
+thead th {
+	background: #333;
+	color: #eee;
+}
+
+tbody > tr:nth-child(2n) {
+	background: #555;
+	color: #eee;
+}
+tbody > tr:nth-child(2n+1) {
+	background: #333;
+}
+
+footer, legend, hr {
+	border-color: #ddd;
+}
+
+small {
+	color: #fff;
+}
+
+input, select, textarea {
+	color: #111;
+}
+
+.invisible tr,
+.invisible td,
+.invisible th,
+.invisible tbody > tr:nth-child(2n),
+.invisible tbody > tr:nth-child(2n+1) {
+	background: transparent;
+}
+
+#main-nav {
+	border-bottom: .1rem solid #ddd;
+}
+
+.tabs,
+.vertical-tabs{
+	background: #333;
+}
+
+.tabs > label,
+.vertical-tabs .tab label {
+	background: #222;
+	border: 0;
+	color: #eee;
+}
+
+.vertical-tabs .tab label {
+	width: 100%;
+}
+
+.tabs > label:hover,
+.vertical-tabs .tab > label:hover {
+	background: #888;
+}
+
+.tabs > label:active,
+.vertical-tabs .tab > label:active {
+	background: #999;
+}
+
+.tabs > [type="radio"]:checked + label,
+.tabs > [type="radio"]:checked + label + .content,
+.vertical-tabs [type="radio"]:checked + label,
+.vertical-tabs [type="radio"]:checked ~ .content {
+	/* border-color: #333; */
+	border: 0;
+	background: #666;
+	color: #eee;
+}
+
+.vertical-tabs {
+	background: #222;
+	border: 1px solid #444;
+}
+
+.vertical-tabs .tab {
+	background: #666;
+	border-bottom: 1px solid #444;
+}
+
+
+

public/css/dark.min.css

@@ -0,0 +1 @@
+a{color:#1978e2}a:hover{color:#9e34fd}body,legend,nav ul li a{background:#333;color:#eee}nav a:hover,nav li.selected a{border-color:#fff}header button{background:transparent}table{-webkit-box-shadow:none;box-shadow:none}td,th{border-color:#111}thead td,thead th{background:#333;color:#eee}tbody>tr:nth-child(2n){background:#555;color:#eee}tbody>tr:nth-child(odd){background:#333}footer,hr,legend{border-color:#ddd}small{color:#fff}input,select,textarea{color:#111}.invisible tbody>tr:nth-child(2n),.invisible tbody>tr:nth-child(odd),.invisible td,.invisible th,.invisible tr{background:transparent}#main-nav{border-bottom:.1rem solid #ddd}.tabs,.vertical-tabs{background:#333}.tabs>label,.vertical-tabs .tab label{background:#222;border:0;color:#eee}.vertical-tabs .tab label{width:100%}.tabs>label:hover,.vertical-tabs .tab>label:hover{background:#888}.tabs>label:active,.vertical-tabs .tab>label:active{background:#999}.tabs>[type=radio]:checked+label,.tabs>[type=radio]:checked+label+.content,.vertical-tabs [type=radio]:checked+label,.vertical-tabs [type=radio]:checked~.content{border:0;background:#666;color:#eee}.vertical-tabs{background:#222;border:1px solid #444}.vertical-tabs .tab{background:#666;border-bottom:1px solid #444}

public/css/dark.min.css.map

@@ -0,0 +1 @@
+undefined

public/css/general.css

@@ -359,7 +359,7 @@ td .media-wrap-flex {
 	display: inline-block;
 	text-align: center;
 	width: 220px;
-	height: 311px;
+	height: 312px;
 	margin: var(--normal-padding);
 	z-index: 0;
 	background: rgba(0, 0, 0, 0.15);
@@ -423,7 +423,7 @@ picture.cover {
     background: var(--title-overlay); */
 	content: '';
 	display: block;
-	height: 311px;
+	height: 312px;
 	left: 0;
 	position: absolute;
 	top: 0;

public/tools/css.js

@@ -8,7 +8,9 @@ const cssNext = require('postcss-cssnext');
 const cssNano = require('cssnano');
 
 const css = fs.readFileSync('css/all.css', 'utf-8');
+const darkCss = fs.readFileSync('css/dark-override.css', 'utf-8');
 
+// Basic theme
 postcss()
 	.use(atImport())
 	.use(cssNext())
@@ -26,4 +28,24 @@ postcss()
 	}).then(result => {
 	fs.writeFileSync('css/app.min.css', result.css);
 	fs.writeFileSync('css/app.min.css.map', result.map);
-	});
+});
+
+// Dark theme
+postcss()
+	.use(atImport())
+	.use(cssNext())
+	.use(cssNano({
+		autoprefixer: false,
+		colormin: false,
+		minifyFontValues: false,
+		options: {
+			sourcemap: false
+		}
+	}))
+	.process(darkCss, {
+		from: 'css/dark-override.css',
+		to: 'css/dark.min.css'
+	}).then(result => {
+	fs.writeFileSync('css/dark.min.css', result.css);
+	fs.writeFileSync('css/dark.min.css.map', result.map);
+});

src/Types/Config.php

@@ -24,6 +24,7 @@ class Config extends AbstractType {
 
 	// Settings in config.toml
 	public $asset_path; // Path to public folder for urls
+	public $dark_theme;
 	public $default_anime_list_path;
 	public $default_list;
 	public $default_manga_list_path;

src/constants.php

@@ -153,6 +153,12 @@ const SETTINGS_MAP = [
 			'default' => 'Somebody',
 			'description' => 'Name of the owner of the list data.',
 		],
+		'dark_theme' => [
+			'type' => 'boolean',
+			'title' => 'Use Dark Theme',
+			'default' => FALSE,
+			'description' => 'Use a darker background theme?',
+		],
 		'show_anime_collection' => [
 			'type' => 'boolean',
 			'title' => 'Show Anime Collection',