Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing colors #255

Open
2 tasks done
jcubic opened this issue Dec 23, 2024 · 4 comments
Open
2 tasks done

Missing colors #255

jcubic opened this issue Dec 23, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@jcubic
Copy link

jcubic commented Dec 23, 2024

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.
@jcubic jcubic added the bug Something isn't working label Dec 23, 2024
@carbonrobot
Copy link
Contributor

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

@jcubic
Copy link
Author

jcubic commented Jan 2, 2025

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
Copy link
Contributor

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
Copy link
Author

jcubic commented Jan 2, 2025

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants