Add CSS Themes

[MasterOfTheTiger]

This is a good issue for new contributors to Heb12. You simply have to make a themes for Heb12 Desktop. You can do any color not already implemented. Be sure it looks good enough to be in a final program!

Basic CSS It would be a good idea to look at the previous themes made. The orange theme is useful for this.

#head {
    background-color: #f37329;
    color: white;
}
.button {
    color: white;
    text-shadow: 2px 2px 5px gray;
}

/* Popup border color */
.popup {
    border-color: #f37329;
}
/* Link color */
.link {
  color: #cc3b02;
}
/* Header buttons */
.button:hover {
    background-color: #ea6417;
}
.button:hover option, .button:hover optgroup {
  background-color: #ffffff;
  color: black;
}
/* Other buttons */
button:active {
  background-color: #f37329;
  border-color: #f37329;
}

.closePopup {
  transition-duration: 0.5s;
  color: #f37329;
}
.closePopup:hover {
  transition-duration: 0.5s;
  color: #a62100;
}

#result {
  /*box-shadow: 3px 5px 5px 5px #ffc27d;*/
}

.arrow {
  color: white;
  background-color: #f37329;
}

You will also have to add the theme to the dropdown menu in index.html line 106. Put it in alphabetical order.

Installing Heb12 Just run these and go:

$ git clone https://github.com/heb12/heb12.git
$ cd heb12
$ npm install

Run npm run start to see your changes.

Themes

• [ ] Green Theme

• [ ] Yellow theme

• [ ] Cream colored (off-white) theme

Other ideas are welcome.

Please include a screenshot of your theme.

[codejagaban]

Can I work on this?

[MasterOfTheTiger]

@trustjamin That would be great!

[codejagaban]

the npm command is throwing errors

[MasterOfTheTiger]

More themes may be added, but now that hacktoberfest is over and release v0.3.0 is coming, this issue will be closed.