Theming LODEX

Quick description

LODEX has always allowed theming, but since LODEX 14.0.27 a dynamic system has been added to allow easy theme creation. To allow this, a themes folder is available in the src/app/custom/ directory. And a `themes' configuration to enable or disable themes is available in the config.json file.

Terminology

• Public Panel: Page generated with the dataset and model
• Admin Panel: Page use to add a dataset and model
• Root Panel: Page use to create instances

How it work

Theme structure

A theme requires at least one file, this file must be a json file called lodex-theme.json. LODEX will not load the theme without this file.

Any other file is optional, and if you want to override the default main theme palette and index file, you must declare it in the theme file.

themes
├── myTheme
│   ├── lodex-theme.json
│   ├── index.html
│   ├── theme.js
│   └── theme.css
└── otherTheme
    └── ...

LODEX theme file

The theme file is the declaration of a theme, containing the name, description and other metadata required to load and apply it correctly.

The version corresponds to the LODEX theme system version, if the theme is not the same version, a message will be shown in the console and an outdated text will be added to the description. To see all the changes you can consult the changelog bellow.

The name and description are used to localise and describe the theme in LODEX Admin Panel.

The files are optional but allow you to override the index.html file and the theme palette, these files must be in the same directory as the theme file.

{
  "version": "2",
  "name": {
    "fr": "Système",
    "en": "System"
  },
  "description": {
      "fr": "Thème système",
      "en": "System theme"
  },
  "files": {
    "theme": {
      "main": "customTheme.js",
      "index": "index.html"
    }
  }
}

Changelog

Version 3

Warning: Still in progress see #1999

Change

• Remove restricted from the LODEX theme file
• Update color palette system
• Admin Panel now use the file from System Theme (default)
• Public Panel, Admin Panel and Root Panel now use the same css file as base src/app/custom/themes/default/css/styles.css

Documentation

TODO

Version 2bisbis (un-versioned)

Warning: This version in un-versioned, this mean you need to use the version 2, the theme system work differently from the prevouis version.

Available since 14.0.48

Change

• Default theme is now a proper theme
• Now using ejs instead of regex for HTML template

Documentation

EJS avaible variable:

• lodex.version: LODEX Version
• lodex.base.href: replace {|__JS_HOST__|}
• theme.base.href: replace {|__THEMES_HOST__|}

Exemple of EJS Call:

<%= theme.base.href %>

Version 2bis (un-versioned)

Warning: This version in un-versioned, this mean you need to use the version 2, the theme system work differently from the prevouis version.

Available since 14.0.45

Change

• Theme folder move from src/themes to src/app/custom/themes
• Symlink create from src/app/custom/themes to src/themes

Documentation

Theme folder: src/app/custom/themes and src/themes

Version 2

Available since 14.0.34

Change

• Theme import system updated

Version 1

Available since 14.0.27

Documentation

Theme folder: src/themes

• {|__JS_HOST__|}: Allow access to application files (relevant in dev mode, this allows access to webpack)
• {|__THEMES_HOST__|}: Allow access to theme files (always in dev mode, this allows access to the API)