Use css variables in themes

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.

Start by reviewing the repository's existing theme styles and how themes are distributed. Compare the requested CSS-variable approach with the current themes and browser-support constraints; done means variable-based themes are available alongside the existing themes without removing current-browser compatibility.