Theme Styling and Dark Mode
The addon styles Tutor LMS output so it matches the Reign theme. Styling is applied through a bundled stylesheet and inline style blocks emitted by the shortcodes.
Reign design tokens
Section titled “Reign design tokens”Course grids, category cards, and progress bars use Reign’s CSS custom properties so they follow your theme colors automatically. Every token carries a hex fallback, so styling still works if a token is absent. Tokens used include:
--reign-site-alternate-text-color--reign-site-secondary-bg-color--reign-site-sections-bg-color--reign-site-border-color--reign-colors-theme--reign-more-options-box-shadow
Because these are the same tokens Reign uses for light, dark, and auto color modes, the course output follows Reign’s dark mode with no extra configuration.
Custom color body class
Section titled “Custom color body class”When Tutor LMS is active and its color preset type is set to default, the addon adds a reign-tutor-custom-colors class to the <body> element. This lets Reign apply its own color scheme to Tutor LMS instead of Tutor’s built-in preset. If Tutor LMS is not loaded, the body classes are left untouched.
Responsive layout
Section titled “Responsive layout”The course grid and the category grid both include mobile breakpoints:
- Course grids collapse to two columns on tablet widths and one column on phones.
- The category grid steps down from its configured column count at 991px, 768px, and 480px.
RTL support
Section titled “RTL support”The plugin ships right-to-left stylesheets for both the admin and the front end. On an RTL site the RTL stylesheet is served in place of the default one.
Minified assets
Section titled “Minified assets”Outside of SCRIPT_DEBUG, the minified stylesheet is served. With SCRIPT_DEBUG enabled, the unminified stylesheet is served so you can read and debug the CSS.