From 6d005bc14331609f44f677ea50bf97b1ca232180 Mon Sep 17 00:00:00 2001 From: Jeremy Crafts Date: Sat, 25 Mar 2017 15:40:58 -0400 Subject: [PATCH 1/3] add dark theme option --- index.html | 6 ++++++ script.js | 25 +++++++++++++++++++++++++ stylesheets/styles.css | 40 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 71 insertions(+) create mode 100644 script.js diff --git a/index.html b/index.html index 0b11eca..ec56691 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,8 @@ + + One PR A Day @@ -13,5 +15,9 @@

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..2484297 --- /dev/null +++ b/script.js @@ -0,0 +1,25 @@ +$(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(); + } else { + setLightTheme(); + } + + $('#light-button').click(setLightTheme); + $('#dark-button').click(setDarkTheme); +}); diff --git a/stylesheets/styles.css b/stylesheets/styles.css index 4cecfa4..570d639 100644 --- 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; +} From 574fb9e956844b2471b484708568c704affd1a70 Mon Sep 17 00:00:00 2001 From: Jeremy Crafts Date: Sat, 25 Mar 2017 19:43:52 -0400 Subject: [PATCH 2/3] generalize for the addition of yet more themes --- index.html | 6 ++--- script.js | 52 ++++++++++++++++++++++++------------- stylesheets/styles.css | 28 +++----------------- stylesheets/themes/dark.css | 25 ++++++++++++++++++ 4 files changed, 64 insertions(+), 47 deletions(-) create mode 100644 stylesheets/themes/dark.css diff --git a/index.html b/index.html index ec56691..392fb4c 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + One PR A Day @@ -15,9 +16,6 @@

I will be accepting up to one pull request per day on from this medium post -
Theme:  - - -
+
Theme: 
diff --git a/script.js b/script.js index 2484297..1207458 100644 --- a/script.js +++ b/script.js @@ -1,25 +1,41 @@ -$(document).ready(function() { - function setDarkTheme() { - $('body').addClass('dark'); - $('#dark-button').hide(); - $('#light-button').show(); - localStorage.setItem('darkThemeEnabled', 1); - } +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. + */ +]; - function setLightTheme() { - $('body').removeClass('dark'); - $('#dark-button').show(); - $('#light-button').hide(); - localStorage.setItem('darkThemeEnabled', 0); +// 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); + if (theme !== 'default') { + $('body').addClass(theme); } + localStorage.setItem('theme', theme); +} - if (localStorage.getItem('darkThemeEnabled') - && localStorage.getItem('darkThemeEnabled') === '1') { - setDarkTheme(); +$(document).ready(function() { + if (localStorage.getItem('theme')) { + setTheme(localStorage.getItem('theme')); } else { - setLightTheme(); + setTheme('default'); } - $('#light-button').click(setLightTheme); - $('#dark-button').click(setDarkTheme); + 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); + }); }); diff --git a/stylesheets/styles.css b/stylesheets/styles.css index 570d639..7dab368 100644 --- a/stylesheets/styles.css +++ b/stylesheets/styles.css @@ -29,28 +29,6 @@ button { 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; -} +.theme-buttons > button { + margin-right: 5px; +} \ No newline at end of file diff --git a/stylesheets/themes/dark.css b/stylesheets/themes/dark.css new file mode 100644 index 0000000..ffdcb3d --- /dev/null +++ b/stylesheets/themes/dark.css @@ -0,0 +1,25 @@ +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; +} From 547293fc887205c236ceaf1a3ff28e94bef11640 Mon Sep 17 00:00:00 2001 From: Jeremy Crafts Date: Sat, 25 Mar 2017 21:33:57 -0400 Subject: [PATCH 3/3] make it more obvious which theme is selected --- script.js | 14 ++++++++------ stylesheets/styles.css | 7 ++++++- stylesheets/themes/dark.css | 9 +++++++-- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/script.js b/script.js index 1207458..41034d7 100644 --- a/script.js +++ b/script.js @@ -16,19 +16,15 @@ themes.forEach(function(theme) { 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() { - if (localStorage.getItem('theme')) { - setTheme(localStorage.getItem('theme')); - } else { - setTheme('default'); - } - themes.forEach(function(theme) { var themeButton = document.createElement('button'); themeButton.id = 'theme-select-' + theme.id; @@ -38,4 +34,10 @@ $(document).ready(function() { }; $('.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 7dab368..ec07b58 100644 --- a/stylesheets/styles.css +++ b/stylesheets/styles.css @@ -31,4 +31,9 @@ button { .theme-buttons > button { margin-right: 5px; -} \ No newline at end of file +} + +button.selected-theme { + background-color: #AAA; + border-color: #666 +} diff --git a/stylesheets/themes/dark.css b/stylesheets/themes/dark.css index ffdcb3d..88c35ff 100644 --- a/stylesheets/themes/dark.css +++ b/stylesheets/themes/dark.css @@ -19,7 +19,12 @@ body.dark { } .dark button { - background-color: #444; - border-color: #444; + background-color: #555; + border-color: #555; color: #DDD; } + +.dark button.selected-theme { + background-color: #444; + border-color: #222 +}