deathbybandaid/theme.park
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Created Creating your own themes (markdown)

GilbN 2019-09-11 23:43:49 +02:00
parent 64889e1ff4
commit 5ccbf45125
1 changed files with 50 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
Creating-your-own-themes.md Normal file

@ -0,0 +1,50 @@
# Creating your own themes
To create your own themes you only need the change the color variables in each theme. You dont need the edit the `app-base.css`.
You can either fork the repo and setup a [Github pages](https://pages.github.com/) site or clone it to your web server and serve the files that way.
You can't use the raw link as Github doesn't pass the mime types. That's why all my theme urls use the https://gilbn.github.io site.
***
## Example
Open the theme css file you want to change and look at the variables available.
Copy them to a new file. Remember to also include the `@import` line.
Add the theme to your service and load the page.
If you press `F12` and go to the `Elements` tab and scroll down you should see the variables in the root pseudo-class.
Try and disable one of them and you'll see what each variable does.
![](https://imgur.com/6RjKsHw.png)
The `--main-bg-color` will "always" be the background color.
And the `--modal-bg-color` will "always" be the background for the popup modals.
> If you click on the color a color picker will pop up and you can change the color live.
If you add a gradient from one of the links below, remember to not overwrite the `center center/cover no-repeat fixed` in the variables. Doing so might make the colors look a little wierd on small objects like drop down menus.
![](https://github.com/gilbN/theme.park/blob/master/Screenshots/mtkMQYPhKe.gif)
When you're done add the theme like you normally would.
https://github.com/gilbN/theme.park#setup
***
The links below are some great resources on finding cool gradients.
If you find a particular colored theme you feel should be added to the repo let me know on discord!
<a href="https://discord.gg/HM5uUKU" rel="noopener"><img class="alignnone" title="theme.park!" src="https://img.shields.io/badge/chat-Discord-blue.svg?style=for-the-badge&logo=discord" alt="" height="37" /></a>
[https://cssgradient.io/](https://cssgradient.io/)
[https://uigradients.com/](https://uigradients.com/)
[https://mycolor.space/gradient](https://mycolor.space/gradient)
[https://www.css-gradient.com/](https://www.css-gradient.com/)
[https://gradienthunt.com/](https://gradienthunt.com/)