0.2.4 • Published 3 years ago

prism-theme-vars v0.2.4

Weekly downloads
384
License
MIT
Repository
github
Last release
3 years ago

Prism --theme-vars

A customizable Prism.js theme using CSS variables

NPM version

🌈 Live Playground

Usage

npm i prism-theme-vars
import 'prism-theme-vars/base.css'

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-theme-vars/base.css">

Configuration

Add CSS variables in your CSS, For example:

@import "prism-theme-vars/base.css";

:root {
  --prism-foreground: #393a34;
  --prism-background: #fbfbfb;
  --prism-comment: #b8c4b8;
  --prism-string: #c67b5d;
  --prism-literal: #3a9c9b;
  --prism-keyword: #248459;
  --prism-function: #849145;
  --prism-deleted: #a14f55;
  --prism-class: #2b91af;
  --prism-builtin: #a52727;
  --prism-property: #ad502b;
  --prism-namespace: #c96880;
  --prism-punctuation: #8e8f8b;
  --prism-decorator: #bd8f8f;
  --prism-json-property: #698c96;
}

See base.css for more options avaliable.

Built-in Themes

We have a few themes variables built-in that you can directly use.

@import "prism-theme-vars/base.css";
@import "prism-theme-vars/themes/vitesse-light.css";

/* Overrides */
:root {
  --prism-background: #ffffff;
}

See all themes avaliable under themes/*. Contributions are also greatly welcome!

Work with codemirror-theme-vars

@import "prism-theme-vars/base.css";
@import "prism-theme-vars/to-codemirror.css";

/* --prism prefix will alias to --cm automatically */
:root {
  --prism-foreground: #393a34;
  --prism-background: #fbfbfb;
}

Dark mode

Here is an example of Tailwind CSS favored dark mode support.

html:not(.dark) {
  --prism-foreground: #393a34;
  --prism-background: #f8f8f8;

  --prism-comment: #758575;
  --prism-namespace: #444444;
  --prism-string: #bc8671;
  --prism-punctuation: #80817d;
  --prism-literal: #36acaa;
  --prism-keyword: #248459;
  --prism-function: #849145;
  --prism-deleted: #9a050f;
  --prism-class: #2b91af;
  --prism-builtin: #800000;
  --prism-property: #ce9178;
  --prism-regex: #ad502b;
}

html.dark {
  --prism-foreground: #d4d4d4;
  --prism-background: #1e1e1e;

  --prism-namespace: #aaaaaa;
  --prism-comment: #758575;
  --prism-namespace: #444444;
  --prism-string: #ce9178;
  --prism-punctuation: #d4d4d4;
  --prism-literal: #36acaa;
  --prism-keyword: #38a776;
  --prism-function: #dcdcaa;
  --prism-deleted: #9a050f;
  --prism-class: #4ec9b0;
  --prism-builtin: #d16969;
  --prism-property: #ce9178;
  --prism-regex: #ad502b;
}

License

MIT

slidev-theme-cabbageslidev-theme-cucslidevnubo-sites@everything-registry/sub-chunk-2474vvv-micro-web-appsvite-slidesvite-gardenvitepress-theme-you@docus/theme@docus/theme-edge@docus/blog-theme-edge@posva/slidev-themeslidev-theme-slidev-modern-techsucheon-chartslidev-theme-hep@daotl/vue-componentszycloud-uivue3-esignwaset@fishdesign-ui/docs@infinitebrahmanuniverse/nolb-pris@mr-huang/vuepress-theme-weasel@mt-plugin/mt-plugin-demo-component@mudssky/slidev-theme-default@martinelli/slidev-theme-martinelli@martinelli/theme-slidev@kolibrijs/theme-apple-basic@kolibrijs/theme-bricks@kolibrijs/theme-default@kolibrijs/theme-seriph@kolibrijs/theme-shibainu@kolibry/theme-apple-basic@kolibry/theme-bricks@kolibry/theme-default@kolibry/theme-seriph@kolibry/theme-shibainu@klef/slidev-theme-klef@phaicom/zrchcss@openscript-ch/slidev-theme@openscript-ch/slidev-theme-i18nrelmethisslidev-theme-2024-wadellaslidev-theme-academic-hehaoruislidev-theme-academic-schoberslidev-theme-adventielslidev-theme-aliyunslidev-theme-alltechslidev-theme-andyjjrtslidev-theme-anova-basicslidev-theme-101-rsslidev-theme-aneoslidev-theme-anny-themeslidev-theme-antfu-vite-conf-2023slidev-theme-atcslidev-theme-poli-uspslidev-theme-pptslidev-theme-project-documentationslidev-theme-prussianblueslidev-theme-queenslabslidev-theme-rainforestslidev-theme-renuoslidev-theme-revealslidev-theme-richslidev-theme-rockdoveslidev-theme-rohslidev-theme-secsislidev-theme-shadowslidev-theme-shopeeslidev-theme-sirius-collegeslidev-theme-spezislidev-theme-hexletslidev-theme-hexoslidev-theme-i18nslidev-theme-kageslidev-theme-kolaente-basicslidev-theme-lamdaslidev-theme-lecture-slidesslidev-theme-martinellislidev-theme-meetupslidev-theme-monoslidev-theme-monomislidev-theme-movistarslidev-theme-mtximuslidev-theme-myownprussianblueslidev-theme-nahco314slidev-theme-nearformslidev-theme-neatslidev-theme-neonslidev-theme-patrickdronkslidev-theme-penguinslidev-theme-penguin--kevin-fabreslidev-theme-penguin-htslidev-theme-mintslidev-theme-modern-techslidev-theme-netlifyslidev-theme-nislslidev-theme-nxyzslidev-theme-openlyslidev-theme-orlandoslidev-theme-ovgu
0.2.3

3 years ago

0.2.4

3 years ago

0.2.1

4 years ago

0.2.2

4 years ago

0.2.0

4 years ago

0.1.4

4 years ago

0.1.0

4 years ago

0.1.2

4 years ago

0.0.3

4 years ago

0.1.1

4 years ago

0.1.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago