Custom CSS for Light and Dark modes

[Hachann]

Hello everyone,

I'm happy to share the CSS code below.

Please note that it only affects the visual appearance of the Notebook—specifically the cell content—and does not alter the WLJS interface itself.

The style works seamlessly with both Dark and Light modes. Here’s what it does:

• Input cells and output cells have distinct background colors for better visual separation.
• Initialization cells are highlighted with a slightly more noticeable background to draw attention.
• A subtle left border is added to input cells, making it easier to identify where each input begins.
• Markdown output remains unchanged, preserving its original formatting.

Feel free to use and adjust as needed!

/* --- WLJS Notebook: Modern & Semantic UI --- */

:root {
    /* Typographie */
    --font-code: "Monaspace Neon", "Fira Code", monospace;
    --radius-cell: 8px;
    --padding-cell: 12px;

    /* Thème CLAIR (Par défaut) */
    --bg-body: #ffffff;
    --bg-input: #f9fafb;
    --bg-output: #ffffff;
    --bg-init: #f0fdfa;
    --border-init: #2dd4bf;
    --text-main: #1f2937;

    /* Couleurs de syntaxe - Clair */
    --syntax-keyword: #9333ea;    /* Violet pour fonctions/mots-clés */
    --editor-key-variable: #1f2937;    /* GLOBAL/CALCULÉ : Sombre */
    --editor-local-variable: #2563eb;  /* LOCAL/NON-CALCULÉ : Bleu */
    --editor-key-atom: #0891b2;        /* Symboles spéciaux */
    --editor-key-string: #b45309;      /* Chaînes de caractères */
}

/* Thème SOMBRE (Activé par l'interface) */
[data-theme='dark'] {
    --bg-body: #0f172a;
    --bg-input: #1e293b;
    --bg-output: #0f172a;
    --bg-init: #064e3b;
    --border-init: #2dd4bf;
    --text-main: #f1f5f9;

    /* Couleurs de syntaxe - Sombre */
    --syntax-keyword: #fb7185;    /* Rose/Rouge doux */
    --editor-key-variable: #f1f5f9;    /* GLOBAL/CALCULÉ : Blanc/Gris */
    --editor-local-variable: #60a5fa;  /* LOCAL/NON-CALCULÉ : Bleu ciel */
    --editor-key-atom: #22d3ee;
    --editor-key-string: #fbbf24;
}

/* --- 1. Structure des cellules --- */

.ccontainer {
    background-color: var(--bg-body) !important;
}

.cin {
    font-family: var(--font-code) !important;
    font-weight: 600 !important; /* SemiBold par défaut */
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-cell);
    padding: var(--padding-cell);
    transition: background-color 0.2s ease;
}

/* Output hors Markdown (Graphiques, Tables, etc.) */
.cout:not(.markdown) {
    background-color: var(--bg-output) !important;
    color: var(--text-main);
    padding: var(--padding-cell);
    border-radius: var(--radius-cell);
}

/* Cellules d'initialisation */
.cin.cinit, .cinit {
    background-color: var(--bg-init) !important;
    border-left: 4px solid var(--border-init) !important;
}

/* --- 2. Coloration Syntaxique & Sémantique --- */

/* Forcer les graisses spécifiques sans casser les couleurs */
.cin .cm-keyword, 
.cin .cm-builtin {
    font-weight: 700 !important; /* Fonctions en Gras */
    color: var(--syntax-keyword) !important;
}

/* Distinction Variable Globale vs Locale (Calculée vs Non-calculée) */
/* On utilise l'héritage des variables --editor définies en haut */
.cin .cm-variable {
    font-weight: 600;
    color: var(--editor-key-variable) !important;
}

.cin .cm-variable-2 {
    font-weight: 600;
    color: var(--editor-local-variable) !important;
}

.cin .cm-atom {
    font-weight: 600;
    color: var(--editor-key-atom) !important;
}

.cin .cm-string {
    color: var(--editor-key-string) !important;
}

/* --- 3. Préservation du Markdown --- */

/* 1. Réinitialiser la police pour le texte standard Markdown (Titres, p, li...) */
.markdown {
    font-family: system-ui, -apple-system, sans-serif !important;
    /* On retire 'font-weight: normal' ici pour laisser les balises <b>/<strong> gérer leur graisse */
}

/* 2. S'assurer que les éléments de texte standard n'héritent pas du "SemiBold" des cellules de code */
.markdown p, .markdown li, .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
    font-weight: 400; /* Normal */
}

/* 3. RÉPARER LE GRAS : On force le gras pour les balises strong/b */
.markdown strong, .markdown b {
    font-weight: 700 !important;
}

/* 4. RÉPARER LE CODE INLINE : On rétablit la police monospace pour <code> et <pre> */
.markdown code, .markdown pre {
    font-family: var(--font-code) !important;
    font-weight: 500; /* Un peu plus léger que le code éditeur pour la lisibilité */
}