Merge pull request #229 from sonechca/issue-193-sonechca

Create sky theme changing CSS and add new dropdown-item in HTML

home-page/themes.js

@@ -212,6 +212,30 @@ let winter = {
   "section-header-color": "white",
 };
 
+let sky = {
+  themeName: "sky",
+  "page-background": "#58B1FF",
+  "sectionContainer-background": "#E3F5F8",
+  "header-background": "#239CFF",
+  "header-color": "white",
+  "contributor-background": "#B8DEFF ",
+  "panel-background": "#B8DEFF ",
+  "panel-border-left": "15px solid #669DA5 ",
+  "contributor-name-color": "#B8DEFF ",
+  "role-color": "#620050",
+  "github-btn-background":  "#3b0632",
+  "chooseTheme-background": "#B8DEFF",
+  "btn-default-background": "#B8DEFF  ",
+  "btn-primary-background": "#B8DEFF ",
+  "btn-default-color": "black",
+  "btn-primary-color": "white",
+  "comment-slide-background": "#B8DEFF",
+  "comment-slide-color": "black",
+  "widget-background": "#B8DEFF",
+  "section-header-color": "white",
+  "footer-bg": "hsl(0,0%,5%)"
+};
+
 //Dropdown onclick listeners
 defaultTheme.onclick = () => {
   changeTheme(pageDefault);
@@ -237,6 +261,9 @@ abyssTheme.onclick = () => {
 winterTheme.onclick = () => {
   changeTheme(winter);
 }
+skyTheme.onclick = () => {
+  changeTheme(sky);
+}
 //Change Theme with jQuery selectors
 let changeTheme = (theme) => {
   localStorage.setItem("theme", JSON.stringify(theme));

index.html

@@ -41,6 +41,7 @@ <h3>Home</h3>
               <a class="dropdown-item" href="#" id="pumpkinSpiceTheme">Pumpkin Fall Theme</a>
               <a class="dropdown-item" href="#" id="abyssTheme">Abyss Theme</a>
               <a class="dropdown-item" href="#" id="winterTheme">Winter Theme</a>
+              <a class="dropdown-item" href="#" id="skyTheme">Sky Theme</a>
 
             </div>
           </div>