Use css variables in themes

[richardwerkman]

Motivation When writing a dark mode for my application I wanted to use css variables to switch the colours when pressing a button.

Description This would look something like this:

/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
    color: var(--prism-maintext, #ccc);
    background: none;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 1em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;

    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;

    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: var(--prism-background, #2d2d2d);
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: var(--prism-text, #999);
}

.token.punctuation {
    color: var(--prism-punctuation, #ccc);
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
    color: var(--prism-names, #e2777a);
}

.token.function-name {
    color: var(--prism-punctuation, #6196cc);
}

.token.boolean,
.token.number,
.token.function {
    color: var(--prism-functions, #f08d49);
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
    color: var(--prism-symbol, #f8c555);
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
    color: var(--prism-keywords, #cc99cd);
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
    color: var(--prism-strings, #7ec699);
}

.token.operator,
.token.entity,
.token.url {
    color: var(--prism-url, #67cdcc);
}

.token.important,
.token.bold {
    font-weight: bold;
}
.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

.token.inserted {
    color: var(--inserted, green);
}

And switching using a theme attribute on the root element.

:host([theme="dark"])  {
  --prism-maintext: #ccc;
  --prism-background: #2d2d2d;
  --prism-text: #999;
  --prism-keywords: #cc99cd;
  --prism-punctuation: #ccc;
  --prism-functions: #f08d49;
  --prism-strings:  #7ec699;
  --prism-namespace:  #e2777a;
  --prism-names: #6196cc;
  --prism-symbol: #f8c555;
  --prism-url: #9a6e3a;
}

:host(:not([theme="dark"])) {
  --prism-maintext: black;
  --prism-background: #f5f2f0;
  --prism-text: #999;
  --prism-keywords: #07a;
  --prism-punctuation: #999;
  --prism-functions: #f08d49;
  --prism-strings:  #690;
  --prism-namespace:  #e2777a;
  --prism-names: #6196cc;
  --prism-symbol: #DD4A68;
  --prism-url: #67cdcc;
}

Alternatives At the moment I copied a theme to my project and modified it to use the variables. It would be great to be able to use this out of the box. Your themes could look like setting the variables instead of a copy of the styling.

This solution should be available next to the current themes as not all browsers support this yet.

[antfu]

For a similar reason, I recently made this: https://github.com/antfu/prism-theme-vars

With a playground where you can preview and customize the theme. Hope it could be useful :)