Skip to main content
Coding Theme

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#0a2b1e
  • activityBar.border#1e6645
  • activityBar.foreground#e6e1c4
  • activityBar.inactiveForeground#7daf9c
  • activityBarBadge.background#41b644
  • activityBarBadge.foreground#0a2b1e
  • badge.background#41b644
  • badge.foreground#0a2b1e
  • breadcrumb.activeSelectionForeground#e6e1c4
  • breadcrumb.focusForeground#e6e1c4
  • breadcrumb.foreground#7daf9c
  • breadcrumbPicker.background#0f3326
  • button.background#1e6645
  • button.foreground#e6e1c4
  • button.hoverBackground#2d7a53
  • descriptionForeground#7daf9c
  • diffEditor.insertedLineBackground#41b64415
  • diffEditor.insertedTextBackground#41b64420
  • diffEditor.removedLineBackground#C4622D15
  • diffEditor.removedTextBackground#C4622D20
  • disabledForeground#7daf9c
  • dropdown.background#0f3326
  • dropdown.border#1e6645
  • dropdown.foreground#e6e1c4
  • editor.background#0f3326
  • editor.findMatchBackground#efcb4360
  • editor.findMatchHighlightBackground#efcb4330
  • editor.findRangeHighlightBackground#efcb4315
  • editor.foreground#e6e1c4
  • editor.hoverHighlightBackground#1a5540
  • editor.lineHighlightBackground#00000000
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#e6e1c435
  • editor.selectionHighlightBackground#e6e1c420
  • editor.wordHighlightBackground#0092d125
  • editor.wordHighlightStrongBackground#0092d145
  • editorBracketHighlight.foreground1#bbd7c1
  • editorBracketHighlight.foreground2#6FC1D2
  • editorBracketHighlight.foreground3#efcb43
  • editorBracketHighlight.foreground4#E8956D
  • editorBracketHighlight.foreground5#B6B8FE
  • editorBracketHighlight.foreground6#4ECBA8
  • editorBracketHighlight.unexpectedBracket.foreground#C4622D
  • editorBracketMatch.background#e6e1c418
  • editorBracketMatch.border#efcb43
  • editorBracketPairGuide.activeBackground1#bbd7c130
  • editorBracketPairGuide.activeBackground2#6FC1D230
  • editorBracketPairGuide.activeBackground3#efcb4330
  • editorBracketPairGuide.activeBackground4#E8956D30
  • editorBracketPairGuide.activeBackground5#B6B8FE30
  • editorBracketPairGuide.activeBackground6#4ECBA830
  • editorBracketPairGuide.background1#00000000
  • editorBracketPairGuide.background2#00000000
  • editorBracketPairGuide.background3#00000000
  • editorBracketPairGuide.background4#00000000
  • editorBracketPairGuide.background5#00000000
  • editorBracketPairGuide.background6#00000000
  • editorCursor.foreground#e6e1c4
  • editorError.foreground#e8784f
  • editorGroup.border#1e6645
  • editorGroupHeader.tabsBackground#0a2b1e
  • editorGutter.addedBackground#41b644
  • editorGutter.deletedBackground#C4622D
  • editorGutter.modifiedBackground#efcb43
  • editorHint.foreground#7daf9c
  • editorIndentGuide.activeBackground1#2d7a53
  • editorIndentGuide.background1#1e6645
  • editorInfo.foreground#6FC1D2
  • editorLineNumber.activeForeground#7daf9c
  • editorLineNumber.foreground#2d7a53
  • editorRuler.foreground#1e6645
  • editorWarning.foreground#efcb43
  • editorWhitespace.foreground#2d7a5360
  • errorForeground#C4622D
  • focusBorder#41b644
  • foreground#e6e1c4
  • gitDecoration.addedResourceForeground#41b644
  • gitDecoration.conflictingResourceForeground#E0A1FF
  • gitDecoration.deletedResourceForeground#C4622D
  • gitDecoration.ignoredResourceForeground#2d7a53
  • gitDecoration.modifiedResourceForeground#efcb43
  • gitDecoration.stageModifiedResourceForeground#efac32
  • gitDecoration.untrackedResourceForeground#6FC1D2
  • icon.foreground#7daf9c
  • input.background#0f3326
  • input.border#1e6645
  • input.foreground#e6e1c4
  • input.placeholderForeground#7daf9c
  • inputOption.activeBorder#41b644
  • inputValidation.errorBackground#7f000080
  • inputValidation.errorBorder#C4622D
  • list.activeSelectionBackground#2d7a53
  • list.activeSelectionForeground#e6e1c4
  • list.focusBackground#2d7a53
  • list.highlightForeground#efcb43
  • list.hoverBackground#1a5540
  • list.hoverForeground#e6e1c4
  • list.inactiveSelectionBackground#1e6645
  • list.inactiveSelectionForeground#e6e1c4
  • menu.background#0f3326
  • menu.foreground#e6e1c4
  • menu.selectionBackground#2d7a53
  • menu.selectionForeground#e6e1c4
  • menu.separatorBackground#1e6645
  • menubar.selectionBackground#1a5540
  • notifications.background#0f3326
  • notifications.border#1e6645
  • notifications.foreground#e6e1c4
  • panel.background#0f3326
  • panel.border#1e6645
  • panelTitle.activeBorder#41b644
  • panelTitle.activeForeground#e6e1c4
  • panelTitle.inactiveForeground#7daf9c
  • peekView.border#1e6645
  • peekViewEditor.background#0f3326
  • peekViewResult.background#0a2b1e
  • peekViewTitle.background#0a2b1e
  • peekViewTitleDescription.foreground#7daf9c
  • peekViewTitleLabel.foreground#e6e1c4
  • scrollbarSlider.activeBackground#2d7a5380
  • scrollbarSlider.background#2d7a5340
  • scrollbarSlider.hoverBackground#2d7a5360
  • selection.background#e6e1c435
  • sideBar.background#0a2b1e
  • sideBar.border#1e6645
  • sideBar.foreground#bbd7c1
  • sideBarSectionHeader.background#0a2b1e
  • sideBarSectionHeader.foreground#7daf9c
  • sideBarTitle.foreground#e6e1c4
  • statusBar.background#0a2b1e
  • statusBar.border#1e6645
  • statusBar.debuggingBackground#C4622D
  • statusBar.debuggingForeground#e6e1c4
  • statusBar.foreground#7daf9c
  • statusBar.noFolderBackground#0a2b1e
  • statusBarItem.hoverBackground#1a5540
  • statusBarItem.remoteBackground#1e6645
  • statusBarItem.remoteForeground#e6e1c4
  • tab.activeBackground#0f3326
  • tab.activeBorderTop#41b644
  • tab.activeForeground#e6e1c4
  • tab.border#1e6645
  • tab.hoverBackground#1a5540
  • tab.inactiveBackground#0a2b1e
  • tab.inactiveForeground#7daf9c
  • terminal.ansiBlack#0a2b1e
  • terminal.ansiBlue#0092d1
  • terminal.ansiBrightBlack#2d7a53
  • terminal.ansiBrightBlue#33b5e8
  • terminal.ansiBrightCyan#9ad8e4
  • terminal.ansiBrightGreen#6dc96e
  • terminal.ansiBrightMagenta#d4d5ff
  • terminal.ansiBrightRed#e8784f
  • terminal.ansiBrightWhite#e6e1c4
  • terminal.ansiBrightYellow#f5db7a
  • terminal.ansiCyan#6FC1D2
  • terminal.ansiGreen#41b644
  • terminal.ansiMagenta#B6B8FE
  • terminal.ansiRed#C4622D
  • terminal.ansiWhite#bbd7c1
  • terminal.ansiYellow#efcb43
  • terminal.background#0f3326
  • terminal.foreground#e6e1c4
  • terminal.selectionBackground#e6e1c430
  • terminalCursor.foreground#e6e1c4
  • textLink.activeForeground#9ad8e4
  • textLink.foreground#6FC1D2
  • titleBar.activeBackground#0a2b1e
  • titleBar.activeForeground#bbd7c1
  • titleBar.border#1e6645
  • titleBar.inactiveBackground#0a2b1e
  • titleBar.inactiveForeground#7daf9c
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#e6e1c4
keyword.operator -keyword.operator.dereference#bbd7c1
comment#efcb43
constant.character.entity#66ccff
constant.numeric#9B8FE0
string.quoted.double#E8956D
string.quoted.single#E8956D
constant.language#0092d1
meta.class.identifier, entity.name.type.class, support.class#6FC1D2
entity.other.inherited-class#6FC1D2
storage.type#0092d1
variable, punctuation.definition.variable#6c99bb
keyword#0092d1
keyword.other#0092d1
meta.method.identifier, meta.method-call, meta.method.declaration#4ECBA8
meta.function.decorator entity.name.function.decorator, meta.function.decorator support.type, punctuation.definition.decorator#B6B8FE
meta.function entity.name.function#41b644
meta.function-call, support.function.name#41b644
meta.function-call.arguments, variable.parameter#e6e1c4
support.function#41b645
support.function.builtin#E0A1FF
support.function.magic#41b644
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string#6FC1D2
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#efac32
text.html.basic meta.tag#efac32
text.html.basic entity.name.tag#efac32
text.html.basic entity.name.tag.script#41b645
text.html.basic entity.other.attribute-name#6c99bb
text.html.basic string.quoted.double.html#E8956D
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#6c99bb
text.html.basic source.php.embedded string.unquoted.heredoc.php#E8956D
storage.modifier#0092d1
keyword.other.phpdoc.php#7AB648
support.constant.core.php#a5c261
support.constant.std.php#a5c261
keyword.other.include.php, meta.include.php#41b645
keyword.storage.php#6969FA
text.html.basic source.php.embedded support.function.construct#0092d1
text.html.basic source.php.embedded variable.other.property.php#6FC1D2
string.quoted.double.php#E8956D
string.quoted.single.php#E8956D
variable.other.global.php#6c99bb
variable.other.global.safer.php#6c99bb
source.php keyword.operator.logical#bbd7c1
entity.name.tag.css
source.css entity.other.attribute-name.id
entity.other.attribute-name.class
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class
source.css meta.property-name#6c99bb
support.constant.property-value#41b645
constant.other.color.rgb-value#d9d762
keyword.other.unit.css#0092d1
source.css keyword.other.important, source.scss keyword.other.important#C4622D
constant.numeric.css#0092d1
support.constant.font-name#41b645
punctuation.section.property-list.css
punctuation.section.function.css#41b645
support.function.misc.css#41b645
variable.parameter.misc.css, variable.parameter.url.css, variable.parameter.url.scss, variable.parameter.misc.scss#bbd7c1
source.scss meta.at-rule keyword.control.at-rule#6DBFAA
source.scss constant.numeric#0092d2
source.scss entity.name.tag#6FC1D2
source.scss meta.property-name#6c99bb
support.constant.color.w3c-standard-color-name#d9d762
source.scss entity.other.attribute-name.attribute#6DBFAA
source.js variable.language.js, source.js meta.function.js support.class.js#6FC1D2
source.js meta.class.instance.constructor keyword.operator.new.js#0092d1
source.js support#41b645
source.js entity.name.type#41b645
meta meta meta meta meta meta meta.structure.dictionary.value string#efcb43
meta meta meta meta meta meta.structure.dictionary.value string#B6B8FE
meta meta meta meta meta.structure.dictionary.value string#6FC1D2
meta meta meta meta.structure.dictionary.value string#efac32
meta meta meta.structure.dictionary.value string#a5c261
meta meta.structure.dictionary.value string#e6e1c4
string.regexp#efac32
meta.type.annotation entity.name.type, meta.type.parameters entity.name.type, meta.return.type entity.name.type, support.type#6FC1D2
entity.name.type.interface#6FC1D2italic
entity.name.type.alias#6FC1D2
entity.name.type.enum#6FC1D2
variable.other.enummember#a5c261
meta.type.parameters variable.type, entity.name.type.type-parameter#E0A1FF
keyword.operator.expression.typeof, keyword.operator.expression.keyof, keyword.operator.expression.instanceof, keyword.operator.expression.in, keyword.operator.expression.as, keyword.operator.expression.infer, keyword.operator.expression.is, storage.modifier.readonly#0092d1
meta.type.annotation punctuation.separator.key-value#7daf9c
meta.type.annotation keyword.operator.arrow#bbd7c1
entity.name.type.module#6c99bb
meta.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator#B6B8FE
meta.object-binding-pattern-variable variable.object.property#6c99bb
keyword.control.import, keyword.control.export, keyword.control.from#0092d1
support.class.component#6FC1D2
entity.name.tag.jsx, entity.name.tag.tsx#efac32
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#6c99bb
punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx#7daf9c
string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#E8956D
meta.function.parameters.annotation entity.name.type, meta.annotation entity.name.type#6FC1D2
support.function.magic.python#E0A1FF
variable.language.special.self.python, variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python#6FC1D2italic
meta.fstring.python constant.character.format.placeholder.other.python#efcb43
meta.fstring.python punctuation.definition.arguments#efcb43
constant.language.python#0092d1
keyword.control.flow.match.python, keyword.control.flow.case.python#0092d1
keyword.operator.walrus.python#bbd7c1
entity.name.function.decorator.python, meta.function.decorator.python#B6B8FE
entity.name.type.class.python#6FC1D2
markup.heading, markup.heading entity.name.section#efcb43bold
markup.bold#e6e1c4bold
markup.italic#e6e1c4italic
markup.inline.raw, markup.inline.raw.string#a5c261
markup.fenced_code.block, markup.raw.block#a5c261
punctuation.definition.raw.markdown, punctuation.definition.markdown#2d7a53
string.other.link, markup.underline.link#6FC1D2
markup.underline.link.markdown#0092d1
markup.quote#7daf9citalic
beginning.punctuation.definition.list.markdown, punctuation.definition.list.begin.markdown#efac32
meta.separator.markdown#2d7a53
entity.name.tag.yaml#6c99bb
string.unquoted.plain.out.yaml, string.unquoted.block.yaml#E8956D
string.quoted.single.yaml, string.quoted.double.yaml#E8956D
entity.name.type.anchor.yaml, punctuation.definition.anchor.yaml#E0A1FF
variable.other.alias.yaml, punctuation.definition.alias.yaml#B6B8FE
punctuation.definition.block.sequence.item.yaml#efac32
constant.language.boolean.yaml, constant.language.null.yaml, constant.numeric.yaml#0092d1
keyword.control.flow.yaml, storage.type.tag-handle.yaml, entity.other.document.begin.yaml#7daf9c
comment.line.shebang#7daf9citalic
support.function.builtin.shell, entity.name.command.shell#41b644
support.function.builtin.bash, storage.modifier.shell#41b644
string.other.option.shell, constant.other.option.shell, variable.other.option.shell#a5c261
variable.other.normal.shell, variable.other.special.shell, variable.other.positional.shell, punctuation.definition.variable.shell#6c99bb
meta.string.unquoted.shell variable, meta.string-contents.quoted.double.shell variable#6c99bb
variable.language.special.wildcard.shell#6FC1D2
keyword.control.shell#0092d1
keyword.operator.pipe.shell, keyword.operator.redirect.shell, keyword.operator.logical.shell#bbd7c1
keyword.operator.heredoc.shell, keyword.operator.herestring.shell#efac32
punctuation.definition.subshell.shell, meta.subshell.shell punctuation#efac32
string.quoted.double.shell#E8956D
string.quoted.single.shell#E8956D
entity.name.function.shell#41b644
keyword.other.special-method.dockerfile, entity.name.tag.dockerfile, support.function.dockerfile#0092d1bold
string.other.dockerfile#6FC1D2
variable.other.dockerfile#6c99bb
string.quoted.double.dockerfile, string.quoted.single.dockerfile#E8956D
storage.modifier.lifetime.rust, entity.name.lifetime.rust, punctuation.definition.lifetime.rust#E0A1FFitalic
support.function.macro.rust, entity.name.function.macro.rust, meta.macro.rust entity.name.function#efac32
entity.name.type.trait.rust#6FC1D2italic
keyword.other.rust, storage.modifier.visibility.rust#0092d1
entity.name.type.struct.rust, entity.name.type.rust#6FC1D2
entity.name.type.enum.rust, meta.enum.rust entity.name.type#a5c261
keyword.other.unsafe.rust#C4622Dbold
meta.attribute.rust, punctuation.definition.attribute.rust, entity.name.attribute.rust#B6B8FE
entity.name.section.toml, punctuation.definition.table.toml#efcb43
support.type.property-name.toml, keyword.other.key.toml#6c99bb
string.quoted.double.toml, string.quoted.single.toml#E8956D
constant.numeric.toml#9B8FE0
constant.language.boolean.toml#0092d1
constant.other.datetime.toml#7daf9c
Chalkboard VSC by Boon & Moil - VS Code Theme