diff --git a/index.html b/index.html
index 0b11eca..392fb4c 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,9 @@
+
+
+
One PR A Day
@@ -13,5 +16,6 @@ I will be accepting up to one pull request per day on from this medium post
+
Theme:
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..41034d7
--- /dev/null
+++ b/script.js
@@ -0,0 +1,43 @@
+var themes = [
+ { id: 'default', label: 'Default' },
+ { id: 'dark', label: 'Dark' }
+ /*
+ * Add more themes here. Match 'id' property
+ * with the class name in the CSS file. See
+ * 1pr/stylesheets/themes/dark.css for example.
+ */
+];
+
+// aggregate string to remove all theme classes on theme change
+var allThemeClasses = '';
+themes.forEach(function(theme) {
+ allThemeClasses = allThemeClasses + ' ' + theme.id;
+});
+
+function setTheme(theme) {
+ $('body').removeClass(allThemeClasses);
+ $('.theme-buttons > button').removeClass('selected-theme');
+ if (theme !== 'default') {
+ $('body').addClass(theme);
+ }
+ localStorage.setItem('theme', theme);
+ $('#theme-select-' + theme).addClass('selected-theme');
+}
+
+$(document).ready(function() {
+ themes.forEach(function(theme) {
+ var themeButton = document.createElement('button');
+ themeButton.id = 'theme-select-' + theme.id;
+ themeButton.innerHTML = theme.label;
+ themeButton.onclick = function() {
+ setTheme(theme.id);
+ };
+ $('.theme-buttons').append(themeButton);
+ });
+
+ if (localStorage.getItem('theme')) {
+ setTheme(localStorage.getItem('theme'));
+ } else {
+ setTheme('default');
+ }
+});
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index 4cecfa4..ec07b58 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -14,3 +14,26 @@ 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;
+}
+
+.theme-buttons > button {
+ margin-right: 5px;
+}
+
+button.selected-theme {
+ background-color: #AAA;
+ border-color: #666
+}
diff --git a/stylesheets/themes/dark.css b/stylesheets/themes/dark.css
new file mode 100644
index 0000000..88c35ff
--- /dev/null
+++ b/stylesheets/themes/dark.css
@@ -0,0 +1,30 @@
+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: #555;
+ border-color: #555;
+ color: #DDD;
+}
+
+.dark button.selected-theme {
+ background-color: #444;
+ border-color: #222
+}