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, and the demo app. It is recommended to only change fonts, font sizes, and margins/padding in the base/theme.cssfile

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

Images should go in the img folder of each theme, preferred file format is svg, rasterized formats are fine (png, jpeg, gif) for complex images.

Compressing a theme

Once your theme is done, you should compress it using csso for the base, dark and light files

 csso -i theme.css -o theme.min.css

Submitting a theme

Once your theme is compressed, add a readme.txt file respecting the following format

 @Theme:com-your_company-name_of_theme
 @Author:your_company
 @Version:1.0.0.0
 @Description:additional info

Your theme will be verified then added to the catalog if it passes quality control