Material 3 Expressive Theme Variant

Icarus includes a variant inspired by Material 3 Expressive. It brings softly tinted surfaces, rounded cards, pill-shaped controls, and flower-like accents to the familiar Icarus layout. Navigation items and buttons change shape on hover or keyboard focus, while menus open with spring-like motion.

To enable the variant, open _config.icarus.yml and make the following change:

_config.icarus.yml

- variant: default
+ variant: m3e

The variant can also be set for a single post or page in its front-matter, as this post does:

Material-3-Expressive.md

title: Material 3 Expressive Theme Variant
variant: m3e
appearance: auto
---

The variant supports appearance: light, dark, and auto, as described in Dark Appearance. Code blocks use colors that match the surfaces of the variant.

It uses Roboto Flex, Roboto Mono, and Noto Sans SC, loaded from the web font CDN (see CDN Providers). Motion is reduced for visitors who prefer reduced motion in their system settings. It should be noted that the variant uses recent web styling features that do not work correctly in some legacy browsers.

The colors, shapes, and motion of the variant are CSS variables defined at the top of <icarus_directory>/include/style/m3e/foundation.styl. For example, change --m3-h from its default value of 285 to shift the whole palette to another hue.

For an overview of theme options, see Configuring the Theme.