Themes and preferences

The same token can hold different values: the condition of the page picks one. Each condition is a class or an attribute on <html>, written by the mds-pref-* components, which also remember the user’s choice; mds-pref groups them in one panel. Your code changes nothing: it paints with the roles, and the roles move.

Mode

pref-mode-light, pref-mode-dark, pref-mode-system

mds-pref-mode

Named theme

data-theme-name="cool" or "warm"

mds-pref-theme

Contrast

pref-contrast-more

mds-pref-contrast

Corner shape

data-corner-shape="round" or "squircle"

mds-pref-theme

Depth

data-theme-depth="flat"

The tables below are computed from the token data, one condition per column, and list only the tokens that change; so their swatches are fixed colors, not the ones of this page.

Dark mode

The palette flips and the roles with it: the dark value of every role is in its table in Color. Never write dark: variants or dark-mode media queries for them. Tailwind’s dark: follows the system only, not the pref-mode-* classes.

Named themes and contrast

A named theme retints the neutral roles at once: surfaces, washes, borders, text, the inverse chip, on the porcelain family for cool and the bisque one for warm. The status roles never change with the theme. The contrast preference promotes text and borders, and turns the page into the paper of the mode. Under a named theme the promotions are restated in the theme’s family, so the two go together.

In light mode

--magma-surface-sunken

#e8e8e8

#e4e8ee

#ebe7e5

--magma-surface-muted

#ebebeb

#e8ebf1

#eeeae9

--magma-surface-default

#f2f2f2

#ffffff

#eff2f5

#ffffff

#f4f1f0

#ffffff

--magma-surface-raised

#f8f8f8

#f7f8fa

#f9f8f8

--magma-surface-inverse

#2a2a2a

#232b35

#302927

--magma-surface-inverse-muted

#494949

#3d495b

#524542

--magma-wash-soft

#ededed

#ebedf1

#efecec

--magma-wash-base

#e1e1e1

#dde2e8

#e5e0df

--magma-wash-strong

#d0d0d0

#c9d0db

#d6cecc

--magma-shadow-ink

#050505

#040506

#060505

--magma-text-default

#050505

#040506

#060505

--magma-text-muted

#494949

#050505

#3d495b

#040506

#524542

#060505

--magma-text-subtle

#636363

#494949

#53647d

#3d495b

#71605a

#524542

--magma-text-disabled

#777777

#637896

#87736c

--magma-border-muted

#dbdbdb

#c4c4c4

#d5dbe4

#bcc5d2

#e0d9d7

#cbc2bf

--magma-border-default

#c4c4c4

#8c8c8c

#bcc5d2

#808da0

#cbc2bf

#978984

--magma-border-strong

#8c8c8c

#808da0

#978984

--magma-info-text-muted

#004772

#002d56

#004772

#002d56

#004772

#002d56

--magma-info-text-subtle

#005e89

#004772

#005e89

#004772

#005e89

#004772

--magma-info-border-muted

#b8e2f5

#8dcfeb

#b8e2f5

#8dcfeb

#b8e2f5

#8dcfeb

--magma-info-border-default

#8dcfeb

#129ac4

#8dcfeb

#129ac4

#8dcfeb

#129ac4

--magma-info-border

#8dcfeb

#129ac4

#8dcfeb

#129ac4

#8dcfeb

#129ac4

--magma-success-text-muted

#005007

#003500

#005007

#003500

#005007

#003500

--magma-success-text-subtle

#006620

#005007

#006620

#005007

#006620

#005007

--magma-success-border-muted

#b9e8c9

#8fd7a9

#b9e8c9

#8fd7a9

#b9e8c9

#8fd7a9

--magma-success-border-default

#8fd7a9

#11a662

#8fd7a9

#11a662

#8fd7a9

#11a662

--magma-success-border

#8fd7a9

#11a662

#8fd7a9

#11a662

#8fd7a9

#11a662

--magma-warning-text-muted

#584200

#3a2c00

#584200

#3a2c00

#584200

#3a2c00

--magma-warning-text-subtle

#715500

#584200

#715500

#584200

#715500

#584200

--magma-warning-border-muted

#efd8a8

#e2bf75

#efd8a8

#e2bf75

#efd8a8

#e2bf75

--magma-warning-border-default

#e2bf75

#b88200

#e2bf75

#b88200

#e2bf75

#b88200

--magma-warning-border

#e2bf75

#b88200

#e2bf75

#b88200

#e2bf75

#b88200

--magma-danger-text-muted

#84000b

#590000

#84000b

#590000

#84000b

#590000

--magma-danger-text-subtle

#a52128

#84000b

#a52128

#84000b

#a52128

#84000b

--magma-danger-border-muted

#ffcbc6

#feaba5

#ffcbc6

#feaba5

#ffcbc6

#feaba5

--magma-danger-border-default

#feaba5

#da605d

#feaba5

#da605d

#feaba5

#da605d

--magma-danger-border

#feaba5

#da605d

#feaba5

#da605d

#feaba5

#da605d

--magma-neutral-fg

#494949

#3d495b

#524542

--magma-neutral-border

#a5a5a5

#99a8bb

#b2a39e

--magma-neutral-emphasis

#2a2a2a

#232b35

#302927

In dark mode

--magma-surface-sunken

#020202

#010205

#040202

--magma-surface-muted

#0d0d0d

#080e15

#120c0a

--magma-surface-default

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-surface-raised

#303030

#273140

#382d2a

--magma-surface-overlay

#4a4a4a

#3f4b5d

#544743

--magma-surface-inverse

#f4f4f4

#f3f4f7

#f6f5f4

--magma-surface-inverse-muted

#e4e4e4

#e1e5eb

#e8e4e3

--magma-wash-soft

#3e3e3e

#343f4f

#473c39

--magma-wash-base

#535353

#455367

#5e4f4b

--magma-wash-strong

#6b6b6b

#596b86

#796761

--magma-shadow-ink

#fcfcfc

#fcfcfd

#fcfcfc

--magma-text-default

#fcfcfc

#fcfcfd

#fcfcfc

--magma-text-muted

#e4e4e4

#fcfcfc

#e1e5eb

#fcfcfd

#e8e4e3

#fcfcfc

--magma-text-subtle

#d3d3d3

#e4e4e4

#cdd4dd

#e1e5eb

#d9d2cf

#e8e4e3

--magma-text-disabled

#c4c4c4

#bbc5d2

#ccc2bf

--magma-text-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-border-muted

#404040

#6f6f6f

#354151

#627083

#493c39

#7a6b66

--magma-border-default

#6f6f6f

#ababab

#627083

#a0acbc

#7a6b66

#b4a8a4

--magma-border-strong

#ababab

#a0acbc

#b4a8a4

--magma-info-text-muted

#cfebf8

#e8f5fc

#cfebf8

#e8f5fc

#cfebf8

#e8f5fc

--magma-info-text-subtle

#b4e0f4

#cfebf8

#b4e0f4

#cfebf8

#b4e0f4

#cfebf8

--magma-info-border-muted

#004970

#007ca8

#004970

#007ca8

#004970

#007ca8

--magma-info-border-default

#007ca8

#5eb8dc

#007ca8

#5eb8dc

#007ca8

#5eb8dc

--magma-info-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-info-border

#007ca8

#5eb8dc

#007ca8

#5eb8dc

#007ca8

#5eb8dc

--magma-success-text-muted

#ceeed8

#e7f7ec

#ceeed8

#e7f7ec

#ceeed8

#e7f7ec

--magma-success-text-subtle

#b3e6c4

#ceeed8

#b3e6c4

#ceeed8

#b3e6c4

#ceeed8

--magma-success-border-muted

#005514

#008941

#005514

#008941

#005514

#008941

--magma-success-border-default

#008941

#5fc388

#008941

#5fc388

#008941

#5fc388

--magma-success-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-success-border

#008941

#5fc388

#008941

#5fc388

#008941

#5fc388

--magma-warning-text-muted

#ffe595

#fff2cd

#ffe595

#fff2cd

#ffe595

#fff2cd

--magma-warning-text-subtle

#ffd559

#ffe595

#ffd559

#ffe595

#ffd559

#ffe595

--magma-warning-border-muted

#653100

#9b6200

#653100

#9b6200

#653100

#9b6200

--magma-warning-border-default

#9b6200

#d1a337

#9b6200

#d1a337

#9b6200

#d1a337

--magma-warning-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-warning-border

#9b6200

#d1a337

#9b6200

#d1a337

#9b6200

#d1a337

--magma-danger-text-muted

#ffdfdd

#ffefee

#ffdfdd

#ffefee

#ffdfdd

#ffefee

--magma-danger-text-subtle

#ffceca

#ffdfdd

#ffceca

#ffdfdd

#ffceca

#ffdfdd

--magma-danger-border-muted

#7e000f

#bc3a3c

#7e000f

#bc3a3c

#7e000f

#bc3a3c

--magma-danger-border-default

#bc3a3c

#f18883

#bc3a3c

#f18883

#bc3a3c

#f18883

--magma-danger-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-danger-border

#bc3a3c

#f18883

#bc3a3c

#f18883

#bc3a3c

#f18883

--magma-neutral-fg

#e4e4e4

#e1e5eb

#e8e4e3

--magma-neutral-border

#9a9a9a

#8c9cb2

#a89792

--magma-neutral-emphasis

#f4f4f4

#f3f4f7

#f6f5f4

--magma-neutral-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-on-inverse

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-accent-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

--magma-accent-ai-on-emphasis

#1d1d1d

#000000

#151d29

#000000

#231b18

#000000

Corner shape

The shape and the radius scale tuned for it move together. --magma-radius-full, the pill, is the same under every shape.

--magma-radius-3xs

6px

4px

--magma-radius-2xs

10px

6px

--magma-radius-xs

14px

8px

--magma-radius-sm

16px

10px

--magma-radius-md

20px

12px

--magma-radius-lg

28px

16px

--magma-radius-xl

36px

20px

--magma-radius-2xl

40px

24px

--magma-radius-3xl

56px

32px

--magma-radius-4xl

80px

48px

--magma-radius-5xl

112px

64px

Depth

A flat theme sets the depth to 0, which takes the shadows of the elevations away. The depth axis is in styles/dist/css/theme.css, outside the documented setup: it works only where a project imports that file.

--depth

--mds-elevation-raised

0px 1px 2px 0px rgb(0 0 0 / 0.06), 0px 2px 8px 0px rgb(0 0 0 / 0.08)

0px 0px 0px 0px rgb(0 0 0 / 0), 0px 0px 0px 0px rgb(0 0 0 / 0)

--mds-elevation-overlay

0px 4px 12px 0px rgb(0 0 0 / 0.12), 0px 8px 24px 0px rgb(0 0 0 / 0.16)

0px 0px 0px 0px rgb(0 0 0 / 0), 0px 0px 0px 0px rgb(0 0 0 / 0)