UIDidactika theme
The design system is what every plugin applies; the Didactika theme is what a Didactika site adds on top, and it is versioned on its own.
This site documents two things, and keeps them apart on purpose.
- The design system is what the plugins of Didactika apply: components, shapes, sizes, states, layout and the way each Moodle version is drawn. A plugin uses only this, so it looks right on any Moodle site, whatever its theme.
- The Didactika theme is what a site of Didactika adds on top: the palette, the typography, the gradient, the elevation and a few touches in the documentation. A plugin never sets any of it.
The switch Didactika theme in the header draws every example with the theme on top of the design system. Off, you see the design system alone, as a plugin receives it on a stock site.
Versions of the theme
The current version is v0.1 and it is the only one for now, so nothing is chosen beside the switch. When there is another, a selector will appear next to the switch while the theme is on. A new version of the theme changes what the theme adds and never the design system, so a plugin does not need to change when the theme does.
Link to a page with the theme on: ?brand=1&theme=0.1.
What v0.1 changes
The design system is what plugins publish for the whole community, so it stays close to Moodle: sober shapes and the colours and font of the site. The theme is where Didactika goes further, in the direction of Material and of modern React interfaces, in a way that would not fit a stock Moodle site.
| Area | Design system (plugins) | Didactika theme v0.1 |
|---|---|---|
| Colour | The colours of the Moodle site, with the tones derived from them | The Didactika palette on the Bootstrap roles: primary #0f766e, secondary #475569, success #15803d, info #0369a1, warning #b45309, danger #b91c1c |
| Typography | The font of the Moodle theme | Inter, with tighter spacing in headings |
| Buttons | 8 px radius, 36 px tall, round icon buttons, tonal variant | The same shape in forms and dialogs; pills only in the chrome of tables, toolbars and pagers; the icon buttons grow on hover and the plain one shows a tinted circle |
| Fields | A border, a ring on focus | A soft inner shadow, a tint on hover and a halo around a 2 px border on focus |
| Surfaces | 12 px radius, a thin border | 20 px radius on cards and 28 px on dialogs, tinted shadows instead of borders |
| Gradient | None: solid colours | A diagonal gradient from the primary colour on primary buttons, progress bars and a primary navbar |
| Learning touches | Nothing extra | A bar on the row under the pointer, a tab underline that slides in, gradient tiles, thicker progress bars and a check that pops |
| Motion | Colour fades only | A ripple from the point of a click and a one-pixel lift on hover |
| Documentation | The pages as they are | A label beside the title that says the theme is on |
What stays the same
The theme changes values, not structure: sizes, spacing, states, focus ring, icons and behaviour are those of the design system. That is what lets a plugin look the same with or without the theme, and what keeps a theme from breaking a screen.
Rules for plugins
- Use the Bootstrap variables and the classes of the components (
var(--bs-primary),btn-primary), never a hex value of the palette. The theme reaches the plugin through those variables. - Do not set a font family, a gradient or a custom shadow in a plugin. If a screen needs one, it belongs in the theme.
- Test a screen with the theme off and with it on: both must look right.