From e4094365381c326b7849c86983461b86ef0cf5e5 Mon Sep 17 00:00:00 2001
From: Zach DeCook <zachdecook@gmail.com>
Date: Thu, 22 Mar 2018 18:35:00 -0400
Subject: * Theme: Ability to change between light and dark themes

---
 README.md      | 10 ++++++++++
 index.css      | 19 ++++++++++++++++++-
 index.less     | 14 ++++++++++++++
 index.php      | 24 ++++++++++++++++++++++--
 theme-dark.css | 15 +++++++++++++++
 5 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 theme-dark.css

diff --git a/README.md b/README.md
index aef2817..5de741d 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,16 @@ git pull && git submodule update --init --recursive && git submodule update &&
  cd chordsdata && ./commands.sh
 ```
 
+## Developers
+
+Contributions are welcome! If you think you can do something to improve this project,
+feel free to make a pull request.
+
+### Notes
+
+The `index.css` file is made by
+`lessc --source-map-map-inline index.less > index.css`.
+
 ## Acknowledgements
 
 * Github user [mzarillo](https://github.com/mzarillo) for
diff --git a/index.css b/index.css
index 4a4f6d4..302b9f8 100644
--- a/index.css
+++ b/index.css
@@ -2,6 +2,23 @@ pre {
   font-weight: bold;
   font-size: 1em;
 }
+.darkbubble,
+.lightbubble {
+  font-size: 2em;
+}
+.darkbubble:hover,
+.lightbubble:hover {
+  text-decoration: none;
+  text-shadow: 0 0 5px;
+}
+.darkbubble,
+.darkbubble:hover {
+  color: #001144;
+}
+.lightbubble,
+.lightbubble:hover {
+  color: #CCDDFF;
+}
 .tabs,
 .chord0,
 .chordC {
@@ -211,4 +228,4 @@ pre {
   background-color: #d6306b;
   border-color: #b40e49;
 }
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJBO0VBQ0MsaUJBQUE7RUFDQSxjQUFBOztBQVFEO0FBQU87QUFBUzs7RUFMZixjQUFBO0VBT0EsaUJBQUE7O0FBRUQ7QUFBUztBQUFXO0VBVG5CLGNBQUE7O0FBWUQ7QUFBUztBQUFXO0VBWm5CLGNBQUE7O0FBZUQ7QUFBUztBQUFVO0VBZmxCLGNBQUE7O0FBa0JEO0FBQVM7QUFBVTtFQWxCbEIsY0FBQTs7QUFxQkQ7QUFBUztBQUFVO0VBckJsQixjQUFBOztBQXdCRDtBQUFTO0FBQVU7O0VBeEJsQixjQUFBOztBQTJCRDtBQUFTO0FBQVU7O0VBM0JsQixjQUFBOztBQThCRDtBQUFTO0FBQVU7O0VBOUJsQixjQUFBOztBQWlDRDtBQUFTO0FBQVU7O0VBakNsQixjQUFBOztBQW9DRDtBQUFVO0FBQVU7RUFwQ25CLGNBQUE7O0FBdUNEO0FBQVU7QUFBVTtFQXZDbkIsY0FBQTs7QUF5REQ7RUFiQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHNCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQU9GO0VBakJDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBVUY7RUFwQkMsY0FBQTtFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQUlBLE9BQUM7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFhRjtFQXZCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQWdCRjtFQTFCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQW1CRjtFQTdCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXNCRjtFQWhDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXlCRjtFQW5DQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQTRCRjtFQXRDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQStCRjtFQXpDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQWtDRjtFQTVDQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXFDRjtFQS9DQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQXdDRjtFQWxEQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsTUFBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBIn0= */
\ No newline at end of file
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4Lmxlc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkJBO0VBQ0MsaUJBQUE7RUFDQSxjQUFBOztBQUVEO0FBQWE7RUFDWixjQUFBOztBQUVELFdBQVc7QUFBUSxZQUFZO0VBQzlCLHFCQUFBO0VBQ0Esb0JBQUE7O0FBRUQ7QUFBYSxXQUFXO0VBQ3ZCLGNBQUE7O0FBRUQ7QUFBYyxZQUFZO0VBQzFCLGNBQUE7O0FBU0E7QUFBTztBQUFTOztFQUxmLGNBQUE7RUFPQSxpQkFBQTs7QUFFRDtBQUFTO0FBQVc7RUFUbkIsY0FBQTs7QUFZRDtBQUFTO0FBQVc7RUFabkIsY0FBQTs7QUFlRDtBQUFTO0FBQVU7RUFmbEIsY0FBQTs7QUFrQkQ7QUFBUztBQUFVO0VBbEJsQixjQUFBOztBQXFCRDtBQUFTO0FBQVU7RUFyQmxCLGNBQUE7O0FBd0JEO0FBQVM7QUFBVTs7RUF4QmxCLGNBQUE7O0FBMkJEO0FBQVM7QUFBVTs7RUEzQmxCLGNBQUE7O0FBOEJEO0FBQVM7QUFBVTs7RUE5QmxCLGNBQUE7O0FBaUNEO0FBQVM7QUFBVTs7RUFqQ2xCLGNBQUE7O0FBb0NEO0FBQVU7QUFBVTtFQXBDbkIsY0FBQTs7QUF1Q0Q7QUFBVTtBQUFVO0VBdkNuQixjQUFBOztBQXlERDtFQWJDLGNBQUE7RUFDQSxZQUFBO0VBQ0Esc0JBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBT0Y7RUFqQkMsY0FBQTtFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQUlBLE1BQUM7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFVRjtFQXBCQyxjQUFBO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBSUEsT0FBQztFQUNBLFlBQUE7RUFDQSx5QkFBQTtFQUNBLHFCQUFBOztBQWFGO0VBdkJDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBZ0JGO0VBMUJDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBbUJGO0VBN0JDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBc0JGO0VBaENDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBeUJGO0VBbkNDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBNEJGO0VBdENDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBK0JGO0VBekNDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBa0NGO0VBNUNDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBcUNGO0VBL0NDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxPQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUE7O0FBd0NGO0VBbERDLGNBQUE7RUFDQSxZQUFBO0VBQ0EseUJBQUE7RUFDQSxxQkFBQTs7QUFJQSxNQUFDO0VBQ0EsWUFBQTtFQUNBLHlCQUFBO0VBQ0EscUJBQUEifQ== */
\ No newline at end of file
diff --git a/index.less b/index.less
index e1baf4a..abf4747 100644
--- a/index.less
+++ b/index.less
@@ -31,6 +31,20 @@ pre {
 	font-weight: bold;
 	font-size: 1em;
 }
+.darkbubble, .lightbubble {
+	font-size: 2em;
+}
+.darkbubble:hover, .lightbubble:hover {
+	text-decoration: none;
+	text-shadow: 0 0 5px;
+}
+.darkbubble, .darkbubble:hover {
+	color: #001144;
+}
+.lightbubble, .lightbubble:hover {
+color: #CCDDFF;
+}
+
 .chordZ(@color: #BBB){
 	color: @color;
 	& when(hsvvalue(@color) > 95%) and (lightness(@color) > 51%){
diff --git a/index.php b/index.php
index 34652c6..d8d68ac 100755
--- a/index.php
+++ b/index.php
@@ -1,3 +1,10 @@
+<?php
+$theme = $_COOKIE['theme'] ?? 'light';
+if ( isset( $_GET['theme'] ) ){
+	$theme = $_GET['theme'];
+	setcookie( 'theme', $theme, time()+60*60*24*30 );
+}
+?>
 <!--
 index.php contains the main html used for creating the page.
 Author: Zach DeCook
@@ -11,7 +18,12 @@ Author: Zach DeCook
 			crossorigin="anonymous">
 
 		<link rel="stylesheet" href="index.css" >
-		<link rel="stylesheet" href="theme.css" >
+		<link rel="stylesheet"
+			href=
+			<?php
+			if ( $theme == 'dark' ){echo "'theme-dark.css'";}
+			else {echo "'theme.css'";}
+			?> >
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=.65">
 		<title>Choruses and Hymns</title>
@@ -22,7 +34,15 @@ Author: Zach DeCook
 <header>
 
 	<div class = "col-xs-6 col-xs-offset-0 ">
-		<h3>Browse Songs</h3>
+		<h3>Prosongsa</h3>
+		Theme:
+		<?php
+		$query = preg_replace( '/&?theme=\w+/', '', $_SERVER['QUERY_STRING'] );
+		echo "<a class='lightbubble' href='?$query&theme=light'>&#x25cf;</a>
+			<a class='darkbubble' href='?$query&theme=dark'>&#x25cf;</a>";
+		?>
+		(Uses cookies :)
+		<br>
 		<a href="?song=0">Table of contents</a>
 		<form>
 			<input name='song' type='number' value='<?php echo isset($_GET['song']) ? $_GET['song'] : '' ?>'
diff --git a/theme-dark.css b/theme-dark.css
new file mode 100644
index 0000000..f47b25b
--- /dev/null
+++ b/theme-dark.css
@@ -0,0 +1,15 @@
+body {
+	background-color: #001144;
+	color: white;
+}
+pre {
+	background-color: black;
+	color: white;
+}
+canvas {
+	-webkit-filter: invert(100%);
+	filter: invert(100%);
+}
+input, select {
+	color: black;
+}
-- 
cgit 1.4.1