Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@uiw/codemirror-themes

Package Overview
Dependencies
Maintainers
2
Versions
98
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@uiw/codemirror-themes

Themes for CodeMirror.

  • 4.15.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
264K
decreased by-1.94%
Maintainers
2
Weekly downloads
 
Created

What is @uiw/codemirror-themes?

@uiw/codemirror-themes is an npm package that provides a collection of themes for CodeMirror, a versatile text editor implemented in JavaScript for the browser. This package allows developers to easily apply different visual styles to their CodeMirror instances, enhancing the user interface and user experience of code editors embedded in web applications.

What are @uiw/codemirror-themes's main functionalities?

Applying a Theme

This code sample demonstrates how to apply the 'oneDark' theme from the @uiw/codemirror-themes package to a CodeMirror editor instance. The theme is included in the editor's extensions during the creation of the EditorState.

const { EditorView } = require('@codemirror/view');
const { basicSetup } = require('@codemirror/basic-setup');
const { EditorState } = require('@codemirror/state');
const { oneDark } = require('@uiw/codemirror-themes');

const state = EditorState.create({
  doc: 'Hello, CodeMirror!',
  extensions: [basicSetup, oneDark]
});

const view = new EditorView({
  state,
  parent: document.body
});

Switching Themes Dynamically

This code sample shows how to switch themes dynamically in a CodeMirror editor instance. Initially, the 'oneDark' theme is applied, and a function 'switchTheme' is provided to change the theme to 'dracula' or any other theme from the @uiw/codemirror-themes package.

const { EditorView } = require('@codemirror/view');
const { basicSetup } = require('@codemirror/basic-setup');
const { EditorState } = require('@codemirror/state');
const { oneDark, dracula } = require('@uiw/codemirror-themes');

let currentTheme = oneDark;

const state = EditorState.create({
  doc: 'Hello, CodeMirror!',
  extensions: [basicSetup, currentTheme]
});

const view = new EditorView({
  state,
  parent: document.body
});

function switchTheme(newTheme) {
  view.dispatch({
    effects: EditorView.reconfigure.of([basicSetup, newTheme])
  });
}

// Example usage: switchTheme(dracula);
0

Keywords

FAQs

Package last updated on 18 Nov 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc