Home

This repository is a catalog of themes for OGX.JS. All themes support light and dark themes.

Using themes

Clone then copy the desired theme in your www/themes folder of your OGX.JS app.

Edit your index.html to reflect the chosen themes by replacing [name] by the name of the theme.

 <link href="themes/[name]/base/css/theme.min.css" rel="stylesheet" type="text/css">
 <link href="themes/[name]/light/css/theme.min.css" rel="stylesheet" media="(prefers-color-scheme: light)" type="text/css">
 <link href="themes/[name]/dark/css/theme.min.css" rel="stylesheet" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" type="text/css">

Defining theme preference

If you want to force a theme if the end user has no preference, add no-preference to the media attribute of either the dark or light theme

 "(prefers-color-scheme: no-preference)"

Creating new themes

Base your work upon the io-globules-raw theme, which is the uncompressed default theme. It is recommended to only change fonts, font sizes, and margins/padding in the base/theme.cssfile

Then to change colors, borders and filters, edit both dark/theme.css and light/theme.css