add dark theme option

gravitypriest · gravitypriest · commit 98a87e6d2440 · 2017-03-25T15:42:37.000-04:00
diff --git a/index.html b/index.html
@@ -2,6 +2,8 @@
 <html>
 <head>
 	<link rel="stylesheet" type="text/css" href="stylesheets/styles.css">
+	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+	<script src='script.js' type='text/javascript'></script>
 	<title>One PR A Day</title>
 </head>
 <body>
@@ -13,5 +15,9 @@ <h1>I will be accepting up to one pull request per day on <a href="https://githu
 	<li>Find some inspiration for cool ideas on what you can add to the project <a href="https://medium.freecodecamp.com/6-absurd-ideas-for-building-your-first-web-application-24afca35e519#.do2wbrk4s">from this medium post</a></li>
 	</ul>
 </div>
+<div class='theme-buttons'>Theme:&nbsp;
+	<button id='light-button'>Dark</button>
+	<button id='dark-button'>Light</button>
+</div>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,23 @@
+$(document).ready(function() {
+    function setDarkTheme() {
+        $('body').addClass('dark');
+        $('#dark-button').hide();
+        $('#light-button').show();
+        localStorage.setItem('darkThemeEnabled', 1);
+    }
+
+    function setLightTheme() {
+        $('body').removeClass('dark');
+        $('#dark-button').show();
+        $('#light-button').hide();
+        localStorage.setItem('darkThemeEnabled', 0);
+    }
+
+    if (localStorage.getItem('darkThemeEnabled')
+        && localStorage.getItem('darkThemeEnabled') === '1') {
+        setDarkTheme();
+    }
+
+    $('#light-button').click(setLightTheme);
+    $('#dark-button').click(setDarkTheme);
+});
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -14,3 +14,43 @@ div {
 	margin-left: 25%;
 	margin-right: 25%;
 }
+
+button {
+	border-style: solid;
+	border-radius: 2px;
+	font-size: 14px;
+	font-weight: bold;
+}
+
+.theme-buttons {
+	position:absolute;
+	left:10px;
+	bottom:10px;
+	margin: 0px;
+}
+
+body.dark {
+	background-color: #333;
+}
+
+.dark h1 {
+	color: #DDD;
+}
+
+.dark div {
+	color: #DDD;
+}
+
+.dark a {
+	color: #AAF;
+}
+
+.dark a:visited {
+	color: #DAC;
+}
+
+.dark button {
+	background-color: #444;
+	border-color: #444;
+	color: #DDD;
+}
