Themes
Themes are a bit of functionality that allow the user to change how the frontend css works for that client only. Moonlight provides developers with tools to create their own themes for further customizability. All themes (even pre-set ones) are stored as theme codes. These codes are then processed to update the css every time the page loads based on what the theme code states. Theme codes are stored in the localStorage('moonlight.themes') local storage item.
All themes are is just basic json code. If you prefer a frontend, we made a little cool page that is available on every Moonlight link. Just go to for example moonlight.silvereen.net/builder.html. Please note that the builder page is not going to be updated or changed and not much effort was put into it because we encourage people to use our template json code to create your themes.
Here is an example of a themes json file:
{
"--primary-color": "#303030",
"--secondary-color": "#575757",
"--third-color": "#1a1a1a",
"--text-color": "#fff",
"--background": "#1a1a1a",
"--container": "rgba(255, 255, 255, 0.28)",
"--containerborder": "rgba(0,0,0,0)",
"--selected": "lime",
"--buttonbg": "#1a1a1a"
}
The primary-color is the color that is going to be used the most, usually you want to pick a color (for example blue) and make the primary color a lighter shade of blue (#6e77ff).
The secondary-color is the second color you may see for some other UI such as navbar underlines, etc. Usually you want this to be the neutral color or the main color (for example #0000FF)
The third-color is usually the text that will only appear on the right side of the Moonlight 4.0 text on the home page and some very, very few other areas in the UI such as the scroll bar. Usually you want this to be a darker shade of your base color (for example #000980)
The text-color as it states, is, for text. All text on Moonlight will be set to the text color property. Usually for lighter themes you want to make the text darker and for darker themes you want to make the text lighter. In my case, its a dark theme so lets go with white (#FFFFFF)
The background can be set to either a color or image. If your using a image you must format it such as url(silvereen.net/image.jpg), just replace the silvereen.net/image.jpg with your image. Usually you want the background to contrast well with every other property so do alot of testing!
The container is as of now only using for the container category sections on the settings page. I suggest you leave it as it because the current background contrasts well with most colors.
The containerborder property is the border around the container. I again, suggest leaving it as is.
The selected property is for selected button settings on the settings page for example the UV and Dynamic proxy switch and the Eurda toggle. Usually this is something you want to leave as-is.
The buttonbg is the background of the buttons on Moonlight. Usually you want this to be dark or light depending on your theme, style, and look.
You can use any type of color method such as the following:
rgb(0,0,0)
rgba(0,0,0,0
#000000
blue
Please keep in mind that themes are still a work in progress and will still be worked on after the release of 4.0. Expect bugs and errors!
