SKM-CSS-THEMES

Themes Locations

The base theme with common colors is availabe at the root level of the /scss directory. this is a simple representation of base colors to be imported accross lots of different themes.

The /scss/themes directory contains a direct represenation of the ignition com.inductiveautomation.perspective directory to properly file map our files to their file tree. Do not modify this file tree, this is how our paths need to be represented.

Within the varients folder there are the dark and light themes directly from Ignition, they are hashed, any modifications to those folders directly will result in ignition rejecting a theme. Since these are just for reference you can technically modify them without breaking our system, however; if something is mapped to those folder structures, changes could break our themes. Better to leave those as read only. Again, they are for internal reference only.

SKM Created Themes

If you need to add variables that will not be within the common scope within /themes/varients/* is where you will find our light-main and dark-main themes.

They are organized in the Ignition theme design pattern to maxemize compatibility. They are structured like

there are top level themes that are referencing the index of their respective folders

// i.e /themes/dark-main.scss is referencing /themes/dark-main/index.scss

Unless there is a specific reason, only ever directly edit the /themes/[theme-name]/variables.scss -- currently we're mapping our SASS variables to plain CSS5 variables. This is to ensure that the code compiles correctly.

Build

Basic usage requires you to have npm or yarn installed, this project was built with yarn, but ultimately its up to you.

To build this project you must have a command line within this directory and run the command:

yarn

This will install all required dependencies from the server, alternatively this can be done with:

npm install

After installation to build the current themes you just run

yarn build

This will clean out the current /dist directory(if it exists), and compile our themes. These themes can be directly imported into:

[your current ignition install directory]/Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes.

Make sure that you copy the dist directory as is, to stay within their design pattern we need the BOTH the folder and the [theme-name].css file to be in the themes directory.