Missing colors

[jcubic]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Code Sandbox link

No response

Bug report

Themes don't implement colors for all tokens, some of the themes don't support boolean and some of them don't implement regular expressions.

This means that it don't support everything what PrismJS supports.

[carbonrobot]

Could you let me know which themes so I can update them?

[jcubic]

I think that only one theme include boolean and regular expressions, so you need to check them all.

I suggest go into every theme and check if they include all the tokens.

I can check this for you, but I will need to include most of the files, and you will need to update most of the files anyway.

[carbonrobot]

The themes we have are just community contributions converted from existing themes. For example, dracula.ts is from https://github.com/dracula/visual-studio-code which does not contain a boolean color scheme. Similar story for regex tokens as well. If the original theme that was uploaded by the community supported regex, then so does the built in theme.

For each theme file, you can see the original sources at the top of the file

// Duotone Light
// Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes)
// Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-evening-dark.css)
// Generated with Base16 Builder (https://github.com/base16-builder/base16-builder)
import type { PrismTheme } from "../types"
const theme: PrismTheme = {

In this PR, I added some documentation on how to use a CSS based Prism theme, which might be helpful.

[jcubic]

This is what I've ended up with my TypeScript project:

import {themes as prismThemes} from 'prism-react-renderer';

prismThemes.dracula.styles.push({
  types: ['regex', 'important'],
  style: {
    color: '#fd971f'
  }
}, {
  types: ['number', 'boolean'],
  style: {
    color: '#ae81ff'
  }
});

I don't remember where I get the colors.