Optimized methods for Color Theming in MODx | PMACS TEAM | #modx #optimize

ColorThemeMODx

Key: colortheme

Label: Color Theme

Description: Choose your desired color theme.

Group: Publishers (drop down)

Field Type: Selectbox (drop down)

Value: blank

Field Options: Make sure to set your default value to your default CSS file. Then set your color themes equal to the name of your cssfile. To do this, seperate the themes by a pipe. Also, it is case sensitive to your css file, so keep that in mind.
Example: Default==override||Light==light-theme||Galaxy==galaxy-theme

Setting is required: Check

OptimizedMethod

<link rel="stylesheet" href="assets/design/css/[[++colortheme]].css">'

OriginalMethod

<!-- Default Theme -->
[[If?
 &subject=`[[++colortheme]]`
 &operator=`EQ`
 &operand=`Default` 
 &then=`<link rel="stylesheet" href="assets/design/css/override.css">`
 ]]
<!-- Light Theme -->
[[If?
 &subject=`[[++colortheme]]`
 &operator=`EQ`
 &operand=`Light`
 &then=`<link rel="stylesheet" href="assets/design/css/light-theme.css">`
 ]]
<!-- Dark Theme -->
[[If?
 &subject=`[[++colortheme]]`
 &operator=`EQ`
 &operand=`Dark`
 &then=`<link rel="stylesheet" href="assets/design/css/dark-theme.css">`
 ]]
<!-- Additional Themes -->