Thème et CSS

Chaque couleur de la feuille de style se résout depuis six canaux de base plus la palette de blocs nommée. Il n'y a aucune couleur codée en dur ailleurs — c'est vérifiable, et c'est ce qui rend un thème possible en surchargeant une poignée de valeurs plutôt qu'en réécrivant des règles.

Les canaux

VariableDéfaut clairRôle
--nbe-ink55 53 47L'encre. Un triplet RVB sans rgb(), pour que les alphas dérivés fonctionnent.
--nbe-ink-warm135 131 120Le gris chaud des fonds de code et des teintes.
--nbe-accent-rgb35 131 226L'accent : sélection, focus, liens.
--nbe-danger-rgb212 76 71Erreurs et actions destructives.
--nbe-shadow-rgb15 15 15La base des ombres.
--nbe-surface#fffLa page. Seul canal qui est une couleur complète.

Les canaux sont des triplets et non des couleurs, parce que la feuille les consomme en rgb(var(--nbe-ink) / 0.06). Changer --nbe-ink repeint les quelque vingt alphas dérivés d'un coup ; passer une couleur complète les casserait tous.

Surcharger

En CSS, si votre thème est statique :

/* n'importe où après la feuille de l'éditeur */
.nbe-editor {
  --nbe-accent-rgb: 220 38 38;   /* canal, pas couleur : les alphas suivent */
  --nbe-radius: 2px;
  --nbe-max-width: 900px;
}

Ou depuis JavaScript, si votre thème est dynamique :

new EditorView(el, editor, {
  theme: { '--nbe-accent-rgb': '220 38 38', '--nbe-radius': '2px' },
});

Mode sombre

Le mode sombre remappe ces canaux et rien d'autre : aucune règle n'est dupliquée. Il suit la préférence système par défaut. Une application qui a son propre sélecteur pose l'attribut, sur l'éditeur ou sur<html> — cette seconde forme est ce qui atteint les menus et infobulles sortis dans le body.

<html data-nbe-theme="dark">

La palette de blocs

Les couleurs qu'un utilisateur applique à un bloc sont persistéespar nom, jamais en CSS brut. Le paquet DOM les résout envar(--nbe-color-<nom>-text) etvar(--nbe-color-<nom>-bg), pour les dix noms de la palette. Un thème les remappe donc aussi, sans qu'aucun document ne soit réécrit.