Sable
Abrir Sable

Creador de temas

Haz un tema y expórtalo como un archivo .sable.css.

A partir de

Detalles

Solo se usa para filtrar el catálogo de temas.

Colores

Los matices de hover, bordes y texto se calculan a partir de ellos.

Todas las definiciones

Exportar

En Sable, ve a Ajustes, Temas e Importar archivo. Solo necesitas el archivo de previsualización si envías el tema al catálogo.

/*
@sable-theme
id: mi-tema
name: Mi tema
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;
}