0.1.2 • Published 2 years ago

codemirror-theme-vars v0.1.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

CoderMirror --theme-vars

A customizable CodeMirror theme using CSS variables

NPM version

Usage

npm i codemirror-theme-vars
import 'codemirror-theme-vars/base.css'
new CoderMirror({
  theme: 'vars'
})

or

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

Configuration

Add CSS variables in your CSS, For example:

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

:root {
  --cm-foreground: #393a34;
  --cm-background: #fbfbfb;
  --cm-comment: #b8c4b8;
  --cm-string: #c67b5d;
  --cm-literal: #3a9c9b;
  --cm-keyword: #248459;
  --cm-function: #849145;
  --cm-deleted: #a14f55;
  --cm-class: #2b91af;
  --cm-builtin: #a52727;
  --cm-property: #ad502b;
  --cm-namespace: #c96880;
  --cm-punctuation: #8e8f8b;
  --cm-decorator: #bd8f8f;
  --cm-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 "codemirror-theme-vars/base.css";
@import "codemirror-theme-vars/themes/vitesse-light.css";

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

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

Work with prism-theme-vars

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

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

Dark mode

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

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

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

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

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

License

MIT

slidev-theme-cabbageslidev-theme-cucslidev@everything-registry/sub-chunk-1350@posva/slidev-themeslidev-theme-slidev-modern-techatomico-editorslidev-theme-hep@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@openscript-ch/slidev-theme@openscript-ch/slidev-theme-i18nslidev-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-rockdoveslidev-theme-rohslidev-theme-secsislidev-theme-shadowslidev-theme-shopeeslidev-theme-spezislidev-theme-hexletslidev-theme-hexoslidev-theme-i18nslidev-theme-kageslidev-theme-kolaente-basicslidev-theme-ksick-dynatraceslidev-theme-lamdaslidev-theme-martinellislidev-theme-meetupslidev-theme-monoslidev-theme-movistarslidev-theme-mtximuslidev-theme-myownprussianblueslidev-theme-nahco314slidev-theme-nearformslidev-theme-neatslidev-theme-neonslidev-theme-patrickdronkslidev-theme-penguin--kevin-fabreslidev-theme-penguin-htslidev-theme-modern-techslidev-theme-netlifyslidev-theme-nislslidev-theme-nxyzslidev-theme-openlyslidev-theme-orlandoslidev-theme-ovguslidev-theme-oxslidev-theme-papershareslidev-theme-hydra-confslidev-theme-imatechslidev-theme-iodigitalslidev-theme-jhqslidev-theme-lightboxslidev-theme-csscadeslidev-theme-dimsamslidev-theme-divriotsslidev-theme-flyingstudioslidev-theme-frankfurtslidev-theme-friendlyslidev-theme-platformaticslidev-theme-showyslidev-theme-dyte-vaibhavshnslidev-theme-easyslidev-theme-eaviseslidev-theme-eclipseslidev-theme-ehl2022slidev-theme-envekslidev-theme-excali-slideslidev-theme-excelsea
0.1.2

2 years ago

0.1.1

4 years ago

0.1.0

4 years ago