Charson Theme
Publisher: Richson SimbabureThemes in package: 2
Beautiful dark themes with inline diagnostics, semantic highlighting, and modern UI - Charson Dark & Charson Ember
Color themes
VS Code preview
Full workbench mockup using this variant's colors and tokenColors.
Loading...
colors
Workbench UI color keys from the theme JSON colors map.
- activityBar.background#00212be6
- activityBar.border#07364266
- activityBar.foreground#268bd2
- activityBar.inactiveForeground#586e75
- activityBarBadge.background#268bd2
- activityBarBadge.foreground#fdf6e3
- badge.background#268bd2
- badge.foreground#fdf6e3
- breadcrumb.activeSelectionForeground#93a1a1
- breadcrumb.focusForeground#93a1a1
- breadcrumb.foreground#586e75
- breadcrumbPicker.background#00212b
- button.background#268bd2
- button.foreground#fdf6e3
- button.hoverBackground#2aa198
- button.secondaryBackground#073642
- button.secondaryForeground#93a1a1
- button.secondaryHoverBackground#586e75
- debugIcon.breakpointDisabledForeground#586e75
- debugIcon.breakpointForeground#dc322f
- debugIcon.breakpointUnverifiedForeground#b58900
- debugIcon.continueForeground#859900
- debugIcon.disconnectForeground#dc322f
- debugIcon.pauseForeground#268bd2
- debugIcon.restartForeground#859900
- debugIcon.startForeground#859900
- debugIcon.stepBackForeground#268bd2
- debugIcon.stepIntoForeground#268bd2
- debugIcon.stepOutForeground#268bd2
- debugIcon.stepOverForeground#268bd2
- debugIcon.stopForeground#dc322f
- debugToolBar.background#00212b
- descriptionForeground#586e75
- diffEditor.insertedLineBackground#85990022
- diffEditor.insertedTextBackground#85990022
- diffEditor.removedLineBackground#dc322f22
- diffEditor.removedTextBackground#dc322f22
- dropdown.background#002b36
- dropdown.border#073642
- dropdown.foreground#93a1a1
- dropdown.listBackground#00212b
- editor.background#002b36
- editor.findMatchBackground#b5890066
- editor.findMatchHighlightBackground#b5890033
- editor.foreground#93a1a1
- editor.hoverHighlightBackground#07364299
- editor.inactiveSelectionBackground#073642aa
- editor.lineHighlightBackground#05303d
- editor.selectionBackground#073642
- editor.wordHighlightBackground#07364299
- editor.wordHighlightStrongBackground#07364299
- editorBracketHighlight.foreground1#268bd2
- editorBracketHighlight.foreground2#859900
- editorBracketHighlight.foreground3#cb4b16
- editorBracketHighlight.foreground4#6c71c4
- editorBracketHighlight.foreground5#2aa198
- editorBracketHighlight.foreground6#b58900
- editorBracketMatch.background#dc322f33
- editorBracketMatch.border#dc322f
- editorCursor.foreground#d33682
- editorError.foreground#c0404080
- editorGroup.border#073642
- editorGroupHeader.noTabsBackground#00212b
- editorGroupHeader.tabsBackground#00212b
- editorGutter.addedBackground#859900
- editorGutter.deletedBackground#dc322f
- editorGutter.modifiedBackground#268bd2
- editorHint.foreground#2aa198
- editorHoverWidget.background#00212b
- editorHoverWidget.border#073642
- editorIndentGuide.activeBackground1#268bd2
- editorIndentGuide.activeBackground2#2aa198
- editorIndentGuide.activeBackground3#6c71c4
- editorIndentGuide.background1#073642
- editorIndentGuide.background2#07364280
- editorIndentGuide.background3#07364260
- editorInfo.foreground#268bd2
- editorLightBulb.foreground#859900
- editorLightBulbAutoFix.foreground#268bd2
- editorLineNumber.activeForeground#cb4b16
- editorLineNumber.foreground#665c00
- editorSuggestWidget.background#00212b
- editorSuggestWidget.border#073642
- editorSuggestWidget.highlightForeground#268bd2
- editorSuggestWidget.selectedBackground#073642
- editorWarning.foreground#b58900
- editorWhitespace.foreground#073642
- editorWidget.background#00212b
- editorWidget.border#073642
- errorForeground#dc322f
- focusBorder#268bd2
- foreground#93a1a1
- gitDecoration.addedResourceForeground#859900
- gitDecoration.conflictingResourceForeground#b58900
- gitDecoration.deletedResourceForeground#dc322f
- gitDecoration.ignoredResourceForeground#586e75
- gitDecoration.modifiedResourceForeground#268bd2
- gitDecoration.stageDeletedResourceForeground#dc322f
- gitDecoration.stageModifiedResourceForeground#b58900
- gitDecoration.untrackedResourceForeground#859900
- input.background#002b36
- input.border#073642
- input.foreground#93a1a1
- input.placeholderForeground#586e75
- inputOption.activeBackground#268bd233
- inputOption.activeBorder#268bd2
- inputOption.activeForeground#93a1a1
- inputValidation.errorBackground#dc322f33
- inputValidation.errorBorder#dc322f
- inputValidation.infoBackground#268bd233
- inputValidation.infoBorder#268bd2
- inputValidation.warningBackground#b5890033
- inputValidation.warningBorder#b58900
- list.activeSelectionBackground#073642
- list.activeSelectionForeground#93a1a1
- list.focusBackground#073642
- list.focusForeground#93a1a1
- list.highlightForeground#268bd2
- list.hoverBackground#073642
- list.hoverForeground#93a1a1
- list.inactiveSelectionBackground#073642aa
- list.inactiveSelectionForeground#93a1a1
- menu.background#00212b
- menu.foreground#93a1a1
- menu.selectionBackground#073642
- menu.selectionForeground#93a1a1
- menu.separatorBackground#073642
- menubar.selectionBackground#073642
- menubar.selectionForeground#93a1a1
- minimap.errorHighlight#dc322f
- minimap.findMatchHighlight#268bd2
- minimap.selectionHighlight#073642
- minimap.warningHighlight#b58900
- minimapGutter.addedBackground#859900
- minimapGutter.deletedBackground#dc322f
- minimapGutter.modifiedBackground#268bd2
- notificationCenter.border#073642
- notificationCenterHeader.background#00212b
- notificationCenterHeader.foreground#93a1a1
- notifications.background#00212b
- notifications.border#073642
- notifications.foreground#93a1a1
- notificationsErrorIcon.foreground#dc322f
- notificationsInfoIcon.foreground#268bd2
- notificationsWarningIcon.foreground#b58900
- notificationToast.border#073642
- panel.background#002b36
- panel.border#073642
- panelTitle.activeBorder#268bd2
- panelTitle.activeForeground#93a1a1
- panelTitle.inactiveForeground#586e75
- peekView.border#268bd2
- peekViewEditor.background#00212b
- peekViewEditor.matchHighlightBackground#b5890033
- peekViewResult.background#002b36
- peekViewResult.fileForeground#93a1a1
- peekViewResult.lineForeground#586e75
- peekViewResult.matchHighlightBackground#b5890033
- peekViewResult.selectionBackground#073642
- peekViewResult.selectionForeground#93a1a1
- peekViewTitle.background#00212b
- peekViewTitleDescription.foreground#586e75
- peekViewTitleLabel.foreground#93a1a1
- progressBar.background#268bd2
- quickInput.background#00212b
- quickInput.foreground#93a1a1
- quickInputList.focusBackground#073642
- quickInputList.focusForeground#93a1a1
- quickInputTitle.background#00212b
- scrollbar.shadow#00000033
- scrollbarSlider.activeBackground#839496
- scrollbarSlider.background#07364280
- scrollbarSlider.hoverBackground#586e75
- sideBar.background#00212b
- sideBar.border#073642
- sideBar.foreground#93a1a1
- sideBarSectionHeader.background#00212b
- sideBarSectionHeader.foreground#93a1a1
- sideBarTitle.foreground#93a1a1
- statusBar.background#00212b
- statusBar.border#073642
- statusBar.debuggingBackground#dc322f
- statusBar.debuggingForeground#fdf6e3
- statusBar.foreground#586e75
- statusBar.noFolderBackground#00212b
- statusBar.noFolderForeground#586e75
- statusBarItem.activeBackground#073642
- statusBarItem.hoverBackground#073642
- statusBarItem.prominentBackground#073642
- statusBarItem.prominentHoverBackground#073642
- statusBarItem.remoteBackground#268bd2
- statusBarItem.remoteForeground#fdf6e3
- symbolIcon.arrayForeground#cb4b16
- symbolIcon.booleanForeground#cb4b16
- symbolIcon.classForeground#b58900
- symbolIcon.colorForeground#2aa198
- symbolIcon.constantForeground#6c71c4
- symbolIcon.constructorForeground#cb4b16
- symbolIcon.enumeratorForeground#6c71c4
- symbolIcon.enumeratorMemberForeground#2aa198
- symbolIcon.eventForeground#cb4b16
- symbolIcon.fieldForeground#2aa198
- symbolIcon.fileForeground#93a1a1
- symbolIcon.folderForeground#b58900
- symbolIcon.functionForeground#268bd2
- symbolIcon.interfaceForeground#b58900
- symbolIcon.keyForeground#2aa198
- symbolIcon.keywordForeground#859900
- symbolIcon.methodForeground#268bd2
- symbolIcon.moduleForeground#6c71c4
- symbolIcon.namespaceForeground#6c71c4
- symbolIcon.nullForeground#cb4b16
- symbolIcon.numberForeground#6c71c4
- symbolIcon.objectForeground#2aa198
- symbolIcon.operatorForeground#859900
- symbolIcon.packageForeground#6c71c4
- symbolIcon.propertyForeground#2aa198
- symbolIcon.referenceForeground#b58900
- symbolIcon.snippetForeground#2aa198
- symbolIcon.stringForeground#b58900
- symbolIcon.structForeground#cb4b16
- symbolIcon.textForeground#93a1a1
- symbolIcon.typeParameterForeground#b58900
- symbolIcon.unitForeground#6c71c4
- symbolIcon.variableForeground#93a1a1
- tab.activeBackground#002b36
- tab.activeBorder#268bd2
- tab.activeBorderTop#268bd2
- tab.activeForeground#93a1a1
- tab.border#00212b
- tab.hoverBackground#073642
- tab.hoverForeground#93a1a1
- tab.inactiveBackground#00212b
- tab.inactiveForeground#586e75
- terminal.ansiBlack#073642
- terminal.ansiBlue#268bd2
- terminal.ansiBrightBlack#586e75
- terminal.ansiBrightBlue#268bd2
- terminal.ansiBrightCyan#2aa198
- terminal.ansiBrightGreen#859900
- terminal.ansiBrightMagenta#6c71c4
- terminal.ansiBrightRed#cb4b16
- terminal.ansiBrightWhite#fdf6e3
- terminal.ansiBrightYellow#b58900
- terminal.ansiCyan#2aa198
- terminal.ansiGreen#859900
- terminal.ansiMagenta#d33682
- terminal.ansiRed#dc322f
- terminal.ansiWhite#eee8d5
- terminal.ansiYellow#b58900
- terminal.background#002b36
- terminal.foreground#93a1a1
- terminal.selectionBackground#073642
- terminalCursor.foreground#d33682
- titleBar.activeBackground#00212b
- titleBar.activeForeground#93a1a1
- titleBar.border#073642
- titleBar.inactiveBackground#00212b
- titleBar.inactiveForeground#586e75
- tree.indentGuidesStroke#073642
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| Default text | #93a1a1 | — |
| comment, punctuation.definition.comment | #586e75 | italic |
| string, string.quoted, string.template, punctuation.definition.string | #b58900 | — |
| string.quoted.docstring, string.documentation | #2aa198 | — |
| string.template meta.embedded, punctuation.definition.template-expression, meta.template.expression | #cb4b16 | — |
| constant.numeric | #6c71c4 | — |
| constant.language, constant.character, constant.other | #cb4b16 | — |
| constant.language.boolean, constant.language.null, constant.language.undefined | #cb4b16 | — |
| variable, variable.other | #93a1a1 | — |
| variable.language, variable.language.this, variable.language.self | #cb4b16 | italic |
| variable.other.property, variable.other.object.property | #2aa198 | — |
| variable.other.constant | #93a1a1 | — |
| variable.parameter, meta.function.parameters variable, meta.parameters variable | #839496 | italic |
| keyword | #6c71c4 | bold |
| keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop | #6c71c4 | bold |
| keyword.control.return | #6c71c4 | bold |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.as | #6c71c4 | bold |
| keyword.operator | #859900 | — |
| keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational | #859900 | — |
| keyword.operator.assignment | #859900 | — |
| keyword.operator.new | #859900 | italic |
| storage | #859900 | — |
| storage.type, storage.type.function, storage.type.class | #6c71c4 | bold italic |
| storage.modifier | #859900 | italic |
| entity.name.function, meta.function entity.name.function | #cb4b16 | bold |
| meta.function-call, support.function, meta.function-call entity.name.function | #cb4b16 | bold |
| meta.method-call entity.name.function, entity.name.function.member | #cb4b16 | — |
| support.function.builtin, support.function.console | #cb4b16 | — |
| entity.name.type, support.type | #268bd2 | italic |
| support.type.primitive, storage.type.primitive | #268bd2 | italic |
| entity.name.class, support.class, entity.other.inherited-class | #268bd2 | italic |
| entity.name.type.interface | #268bd2 | italic |
| meta.type.annotation entity.name.type, meta.type entity.name.type | #268bd2 | italic |
| entity.name.tag | #b58900 | — |
| punctuation.definition.tag | #cb4b16 | — |
| entity.other.attribute-name | #268bd2 | — |
| support.class.component, entity.name.tag support.class.component | #b58900 | — |
| meta.object-literal.key, support.type.property-name, string.unquoted | #2aa198 | — |
| support.type.property-name.json | #2aa198 | — |
| meta.brace.curly, meta.brace.round, meta.brace.square, punctuation.section | #839496 | — |
| punctuation.definition.block | #839496 | — |
| punctuation.separator, punctuation.accessor, meta.delimiter | #859900 | — |
| punctuation.terminator | #93a1a1 | — |
| string.regexp | #2aa198 | — |
| constant.character.escape | #cb4b16 | — |
| entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #b58900 | — |
| support.type.property-name.css, meta.property-name.css | #2aa198 | — |
| support.constant.property-value.css, meta.property-value.css | #93a1a1 | — |
| keyword.other.unit.css, constant.numeric.css | #6c71c4 | — |
| constant.other.color.css, support.constant.color.css | #d33682 | — |
| entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css | #cb4b16 | — |
| markup.heading, entity.name.section | #cb4b16 | bold |
| markup.heading.1, heading.1.markdown entity.name | #d33682 | bold |
| markup.heading.2, heading.2.markdown entity.name | #6c71c4 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.underline, markup.underline.link | #268bd2 | underline |
| markup.quote | #2aa198 | italic |
| markup.inline.raw, markup.fenced_code.block, markup.raw.inline | #b58900 | — |
| markup.list, beginning.punctuation.definition.list | #268bd2 | — |
| invalid | #dc322f | — |
| invalid.deprecated | #d33682 | — |
| markup.inserted, diff.inserted | #859900 | — |
| markup.deleted, diff.deleted | #dc322f | — |
| markup.changed, diff.changed | #b58900 | — |
| entity.name.function.decorator.python, meta.function.decorator.python | #cb4b16 | — |
| variable.parameter.function.language.special.self.python | #cb4b16 | italic |
| variable.other.readwrite.ts, variable.other.readwrite.tsx | #b58900 | — |
| storage.type.type.ts, storage.type.type.tsx, storage.type.interface.ts, storage.type.interface.tsx | #859900 | italic |
| keyword.control.return.ts, keyword.control.return.tsx, keyword.control.return.js, keyword.control.return.jsx | #859900 | italic |
| keyword.control.js, keyword.control.ts, keyword.control.jsx, keyword.control.tsx | #859900 | italic |
| variable.other.readwrite.js, variable.other.readwrite.jsx | #b58900 | — |
| entity.name.function.macro.rust, meta.macro.rust | #cb4b16 | — |
| entity.name.package.go | #6c71c4 | — |
| variable.other.normal.shell, variable.other.positional.shell | #2aa198 | — |
| entity.name.tag.yaml | #2aa198 | — |
| support.type.property-name.toml | #2aa198 | — |
| entity.name.section.toml | #268bd2 | — |
| punctuation.definition.tag.begin.html.vue, punctuation.definition.tag.end.html.vue | #cb4b16 | — |
| markup.hint, editorHint | #2aa198 | — |
| markup.info, editorInfo | #268bd2 | — |
| markup.warning, editorWarning | #b58900 | — |
| markup.error, editorError | #dc322f | — |