Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
@uiw/codemirror-themes
Advanced tools
@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.
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);
Themes for CodeMirror.
npm install @uiw/codemirror-themes --save
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { createTheme } from '@uiw/codemirror-themes';
import { javascript } from '@codemirror/lang-javascript';
import { tags as t } from '@lezer/highlight';
const myTheme = createTheme({
theme: 'light',
settings: {
background: '#ffffff',
foreground: '#75baff',
caret: '#5d00ff',
selection: '#036dd626',
selectionMatch: '#036dd626',
lineHighlight: '#8a91991a',
gutterBackground: '#fff',
gutterForeground: '#8a919966',
},
styles: [
{ tag: t.comment, color: '#787b8099' },
{ tag: t.variableName, color: '#0080ff' },
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
{ tag: t.number, color: '#5c6166' },
{ tag: t.bool, color: '#5c6166' },
{ tag: t.null, color: '#5c6166' },
{ tag: t.keyword, color: '#5c6166' },
{ tag: t.operator, color: '#5c6166' },
{ tag: t.className, color: '#5c6166' },
{ tag: t.definition(t.typeName), color: '#5c6166' },
{ tag: t.typeName, color: '#5c6166' },
{ tag: t.angleBracket, color: '#5c6166' },
{ tag: t.tagName, color: '#5c6166' },
{ tag: t.attributeName, color: '#5c6166' },
],
});
const state = EditorState.create({
doc: 'my source code',
extensions: [myTheme, javascript({ jsx: true })],
});
const view = new EditorView({
parent: document.querySelector('#editor'),
state,
});
import CodeMirror from '@uiw/react-codemirror';
import { createTheme } from '@uiw/codemirror-themes';
import { javascript } from '@codemirror/lang-javascript';
import { tags as t } from '@lezer/highlight';
const myTheme = createTheme({
theme: 'light',
settings: {
background: '#ffffff',
foreground: '#75baff',
caret: '#5d00ff',
selection: '#036dd626',
selectionMatch: '#036dd626',
lineHighlight: '#8a91991a',
gutterBackground: '#fff',
gutterForeground: '#8a919966',
},
styles: [
{ tag: t.comment, color: '#787b8099' },
{ tag: t.variableName, color: '#0080ff' },
{ tag: [t.string, t.special(t.brace)], color: '#5c6166' },
{ tag: t.number, color: '#5c6166' },
{ tag: t.bool, color: '#5c6166' },
{ tag: t.null, color: '#5c6166' },
{ tag: t.keyword, color: '#5c6166' },
{ tag: t.operator, color: '#5c6166' },
{ tag: t.className, color: '#5c6166' },
{ tag: t.definition(t.typeName), color: '#5c6166' },
{ tag: t.typeName, color: '#5c6166' },
{ tag: t.angleBracket, color: '#5c6166' },
{ tag: t.tagName, color: '#5c6166' },
{ tag: t.attributeName, color: '#5c6166' },
],
});
function App() {
return (
<CodeMirror
value="console.log('hello world!');"
height="200px"
theme={myTheme}
extensions={[javascript({ jsx: true })]}
onChange={(value, viewUpdate) => {
console.log('value:', value);
}}
/>
);
}
export default App;
abcdef
android studio
atom one
bbedit
bespin
darcula
dracula
duotone
eclipse
github
okaidia
sublime
vscode
xcode
import { Extension } from '@codemirror/state';
import { TagStyle } from '@codemirror/language';
export interface CreateThemeOptions {
/**
* Theme inheritance. Determines which styles CodeMirror will apply by default.
*/
theme: Theme;
/**
* Settings to customize the look of the editor, like background, gutter, selection and others.
*/
settings: Settings;
/**
* Syntax highlighting styles.
*/
styles: TagStyle[];
}
declare type Theme = 'light' | 'dark';
export interface Settings {
/** Editor background. */
background: string;
/** Default text color. */
foreground: string;
/** Caret color. */
caret?: string;
/** Selection background. */
selection?: string;
/** Selection match background. */
selectionMatch?: string;
/** Background of highlighted lines. */
lineHighlight?: string;
/** Gutter background. */
gutterBackground?: string;
/** Text color inside gutter. */
gutterForeground?: string;
/** Text active color inside gutter. */
gutterActiveForeground?: string;
/** Gutter right border color. */
gutterBorder?: string;
/** set editor font */
fontFamily?: string;
}
declare const createTheme: ({ dark, settings, styles }: CreateThemeOptions) => Extension;
export default createTheme;
As always, thanks to our amazing contributors!
Made with github-action-contributors.
Licensed under the MIT License.
FAQs
Themes for CodeMirror.
The npm package @uiw/codemirror-themes receives a total of 213,229 weekly downloads. As such, @uiw/codemirror-themes popularity was classified as popular.
We found that @uiw/codemirror-themes demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.