Theme creator

Start from

Import a theme file

From the theme catalog

Details

Name Author Tags

Mode Contrast tag

Only used to filter the theme catalog.

Corner radius: 8px

Colours

Hover, border and text shades are worked out from these.

Text Background Surface Message box Primary Secondary Success Warning Critical

All tokens

bg-container

bg-container-hover

bg-container-active

bg-container-line

bg-on-container

surface-container

surface-container-hover

surface-container-active

surface-container-line

surface-on-container

surface-var-container

surface-var-container-hover

surface-var-container-active

surface-var-container-line

surface-var-on-container

primary-main

primary-main-hover

primary-main-active

primary-main-line

primary-on-main

primary-container

primary-container-hover

primary-container-active

primary-container-line

primary-on-container

sec-main

sec-main-hover

sec-main-active

sec-main-line

sec-on-main

sec-container

sec-container-hover

sec-container-active

sec-container-line

sec-on-container

success-main

success-main-hover

success-main-active

success-main-line

success-on-main

success-container

success-container-hover

success-container-active

success-container-line

success-on-container

warn-main

warn-main-hover

warn-main-active

warn-main-line

warn-on-main

warn-container

warn-container-hover

warn-container-active

warn-container-line

warn-on-container

crit-main

crit-main-hover

crit-main-active

crit-main-line

crit-on-main

crit-container

crit-container-hover

crit-container-active

crit-container-line

crit-on-container

focus-ring

shadow

overlay

SMD

Sable

#general

#design 3

#off-topic

hangout

K Kai
S Sam Live
Y You

Connected hangout

#general

Yumi they/them | Rain

Has anyone tried the new theme creator?

Robin

@you it looks great in dark mode

Verified Unsent Failed Thread

Join room Cancel

Message #general

Export

In Sable, go to Settings, then Themes, then Import file. You only need the preview file if you submit the theme to the catalog.

/*
@sable-theme
id: my-theme
name: My theme
kind: dark
contrast: low
*/

body.sable-remote-theme {
  --sable-bg-container: #1b1a21;
  --sable-bg-container-hover: #25242b;
  --sable-bg-container-active: #302f36;
  --sable-bg-container-line: #3c3b42;
  --sable-bg-on-container: #eae8f0;
  --sable-surface-container: #24232c;
  --sable-surface-container-hover: #2e2d36;
  --sable-surface-container-active: #383740;
  --sable-surface-container-line: #44434b;
  --sable-surface-on-container: #eae8f0;
  --sable-surface-var-container: #121116;
  --sable-surface-var-container-hover: #1d1c21;
  --sable-surface-var-container-active: #28272c;
  --sable-surface-var-container-line: #353339;
  --sable-surface-var-on-container: #eae8f0;
  --sable-primary-main: #bdb6ec;
  --sable-primary-main-hover: #b0aadc;
  --sable-primary-main-active: #a39dcc;
  --sable-primary-main-line: #9691bb;
  --sable-primary-on-main: #1b1a21;
  --sable-primary-container: #3b394a;
  --sable-primary-container-hover: #454356;
  --sable-primary-container-active: #4f4c62;
  --sable-primary-container-line: #59556e;
  --sable-primary-on-container: #d8d4ee;
  --sable-sec-main: #9992ac;
  --sable-sec-main-hover: #8f88a1;
  --sable-sec-main-active: #857f96;
  --sable-sec-main-line: #7b758b;
  --sable-sec-on-main: #1b1a21;
  --sable-sec-container: #34323d;
  --sable-sec-container-hover: #3c3945;
  --sable-sec-container-active: #43404d;
  --sable-sec-container-line: #4b4856;
  --sable-sec-on-container: #cac6d5;
  --sable-success-main: #85e0ba;
  --sable-success-main-hover: #7dd0ae;
  --sable-success-main-active: #74c0a2;
  --sable-success-main-line: #6cb095;
  --sable-success-on-main: #1b1a21;
  --sable-success-container: #304240;
  --sable-success-container-hover: #374d49;
  --sable-success-container-active: #3d5952;
  --sable-success-container-line: #43655b;
  --sable-success-on-container: #c2e5da;
  --sable-warn-main: #e3ba91;
  --sable-warn-main-hover: #d3ad88;
  --sable-warn-main-active: #c3a07f;
  --sable-warn-main-line: #b39476;
  --sable-warn-on-main: #1b1a21;
  --sable-warn-container: #433a37;
  --sable-warn-container-hover: #4f443e;
  --sable-warn-container-active: #5b4d45;
  --sable-warn-container-line: #67574c;
  --sable-warn-on-container: #e7d6ca;
  --sable-crit-main: #e69d9d;
  --sable-crit-main-hover: #d69393;
  --sable-crit-main-active: #c68889;
  --sable-crit-main-line: #b57e7f;
  --sable-crit-on-main: #1b1a21;
  --sable-crit-container: #44343a;
  --sable-crit-container-hover: #503c41;
  --sable-crit-container-active: #5c4449;
  --sable-crit-container-line: #684c50;
  --sable-crit-on-container: #e8cacf;
  --sable-focus-ring: #bdb6ec80;
  --sable-shadow: rgb(0 0 0 / 40%);
  --sable-overlay: rgb(15 14 18 / 85%);
  --sable-radius: 8px;
}