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.activeBorder#82aaff
  • activityBar.background#1e2030
  • activityBar.border#1b1d2b
  • activityBar.foreground#c8d3f5
  • activityBar.inactiveForeground#828bb8
  • activityBarBadge.background#82aaff
  • activityBarBadge.foreground#1e2030
  • badge.background#82aaff
  • badge.foreground#1e2030
  • button.background#3e68d7
  • button.foreground#c8d3f5
  • button.hoverBackground#82aaff
  • button.secondaryBackground#545c7e
  • button.secondaryForeground#c8d3f5
  • button.secondaryHoverBackground#737aa2
  • diffEditor.insertedTextBackground#4fd6be20
  • diffEditor.removedTextBackground#ff757f20
  • dropdown.background#1e2030
  • dropdown.border#272d43
  • dropdown.foreground#c8d3f5
  • editor.background#222436
  • editor.findMatchBackground#3e68d780
  • editor.findMatchHighlightBackground#3e68d740
  • editor.foreground#c8d3f5
  • editor.lineHighlightBackground#2f334d90
  • editor.selectionBackground#2d3f76
  • editor.selectionHighlightBackground#2d3f7680
  • editor.wordHighlightBackground#2d3f7680
  • editor.wordHighlightStrongBackground#2d3f7680
  • editorBracketHighlight.foreground1#c8d3f5
  • editorBracketHighlight.foreground2#c8d3f5
  • editorBracketHighlight.foreground3#c8d3f5
  • editorBracketHighlight.foreground4#c8d3f5
  • editorBracketHighlight.foreground5#c8d3f5
  • editorBracketHighlight.foreground6#c8d3f5
  • editorBracketHighlight.unexpectedBracket.foreground#ff757f
  • editorCursor.foreground#c8d3f5
  • editorError.foreground#ff757f
  • editorGroup.border#1e2030
  • editorGroupHeader.tabsBackground#1e2030
  • editorGutter.addedBackground#c3e88d
  • editorGutter.deletedBackground#ff757f
  • editorGutter.modifiedBackground#82aaff
  • editorHoverWidget.background#1e2030
  • editorHoverWidget.border#272d43
  • editorIndentGuide.activeBackground1#3b4261
  • editorIndentGuide.background1#3b426150
  • editorLineNumber.activeForeground#737aa2
  • editorLineNumber.foreground#3b4261
  • editorLink.activeForeground#82aaff
  • editorOverviewRuler.border#1e2030
  • editorSuggestWidget.background#1e2030
  • editorSuggestWidget.border#272d43
  • editorSuggestWidget.foreground#c8d3f5
  • editorSuggestWidget.highlightForeground#82aaff
  • editorSuggestWidget.selectedBackground#2d3f76
  • editorWarning.foreground#ffc777
  • editorWhitespace.foreground#3b4261
  • editorWidget.background#1e2030
  • editorWidget.border#272d43
  • errorForeground#ff757f
  • focusBorder#272d43
  • foreground#c8d3f5
  • input.background#1e2030
  • input.border#272d43
  • input.foreground#c8d3f5
  • input.placeholderForeground#828bb8
  • inputValidation.errorBackground#ff757f50
  • inputValidation.errorBorder#ff757f
  • inputValidation.infoBackground#82aaff50
  • inputValidation.infoBorder#82aaff
  • inputValidation.warningBackground#ffc77750
  • inputValidation.warningBorder#ffc777
  • list.activeSelectionBackground#2d3f76
  • list.activeSelectionForeground#c8d3f5
  • list.dropBackground#2d3f7680
  • list.errorForeground#ff757f
  • list.focusBackground#2d3f76
  • list.focusForeground#c8d3f5
  • list.highlightForeground#82aaff
  • list.hoverBackground#2d3f7640
  • list.hoverForeground#c8d3f5
  • list.inactiveSelectionBackground#2d3f7680
  • list.inactiveSelectionForeground#c8d3f5
  • list.warningForeground#ffc777
  • panel.background#1e2030
  • panel.border#272d43
  • panelTitle.activeBorder#82aaff
  • panelTitle.activeForeground#c8d3f5
  • panelTitle.inactiveForeground#828bb8
  • peekView.border#82aaff
  • peekViewEditor.background#1e203080
  • peekViewEditor.matchHighlightBackground#3e68d780
  • peekViewResult.background#1e2030
  • peekViewResult.fileForeground#c8d3f5
  • peekViewResult.lineForeground#828bb8
  • peekViewResult.matchHighlightBackground#3e68d780
  • peekViewResult.selectionBackground#2d3f76
  • peekViewResult.selectionForeground#c8d3f5
  • peekViewTitle.background#1e2030
  • peekViewTitleDescription.foreground#828bb8
  • peekViewTitleLabel.foreground#c8d3f5
  • pickerGroup.border#272d43
  • pickerGroup.foreground#82aaff
  • progressBar.background#82aaff
  • scrollbar.shadow#1e2030
  • scrollbarSlider.activeBackground#3e68d7aa
  • scrollbarSlider.background#3b426180
  • scrollbarSlider.hoverBackground#3b4261aa
  • selection.background#2d3f7680
  • settings.headerForeground#82aaff
  • settings.modifiedItemIndicator#82aaff
  • sideBar.background#1e2030
  • sideBar.border#1b1d2b
  • sideBar.foreground#828bb8
  • sideBarSectionHeader.background#1e2030
  • sideBarSectionHeader.border#1e2030
  • sideBarSectionHeader.foreground#c8d3f5
  • sideBarTitle.foreground#c8d3f5
  • statusBar.background#1b1d2b
  • statusBar.border#1b1d2b
  • statusBar.debuggingBackground#ff966c
  • statusBar.debuggingForeground#1b1d2b
  • statusBar.foreground#828bb8
  • statusBar.noFolderBackground#1b1d2b
  • statusBar.noFolderForeground#828bb8
  • statusBarItem.activeBackground#545c7e
  • statusBarItem.hoverBackground#2f354d
  • statusBarItem.remoteBackground#82aaff
  • statusBarItem.remoteForeground#1b1d2b
  • tab.activeBackground#222436
  • tab.activeBorder#82aaff
  • tab.activeBorderTop#82aaff
  • tab.activeForeground#c8d3f5
  • tab.border#1e2030
  • tab.hoverBackground#222436
  • tab.inactiveBackground#1e2030
  • tab.inactiveForeground#828bb8
  • tab.unfocusedActiveBorder#272d43
  • tab.unfocusedActiveBorderTop#272d43
  • tab.unfocusedActiveForeground#828bb8
  • tab.unfocusedHoverBackground#222436
  • terminal.ansiBlack#1b1d2b
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#828bb8
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#86e1fc
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c099ff
  • terminal.ansiBrightRed#ff757f
  • terminal.ansiBrightWhite#c8d3f5
  • terminal.ansiBrightYellow#ffc777
  • terminal.ansiCyan#86e1fc
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c099ff
  • terminal.ansiRed#ff757f
  • terminal.ansiWhite#c8d3f5
  • terminal.ansiYellow#ffc777
  • terminal.background#222436
  • terminal.foreground#c8d3f5
  • textBlockQuote.background#1e2030
  • textBlockQuote.border#82aaff
  • textCodeBlock.background#1e2030
  • textLink.activeForeground#86e1fc
  • textLink.foreground#82aaff
  • textPreformat.foreground#82aaff
  • textSeparator.foreground#545c7e
  • titleBar.activeBackground#1b1d2b
  • titleBar.activeForeground#c8d3f5
  • titleBar.inactiveBackground#1b1d2b
  • titleBar.inactiveForeground#828bb8
  • widget.shadow#1b1d2b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#636da6italic
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, constant.language.boolean, constant.language.null, constant.language.undefined#ff9e64
variable.language.this.js, variable.language.this.ts, variable.language.super.js, variable.language.super.ts#ff757f
variable.other.object.property.js, variable.other.object.property.ts, variable.other.property.js, variable.other.property.ts, meta.object-literal.key.js, meta.object-literal.key.ts, support.variable.property.js, support.variable.property.ts#86e1fc
support.class.builtin.js, support.class.builtin.ts, support.type.object.console.js, support.type.object.console.ts, support.constant.math.js, support.constant.math.ts, support.class.promise.js, support.class.promise.ts#ff9e64
variable.other.readwrite.js, variable.other.readwrite.ts, variable.parameter.js, variable.parameter.ts#c099ff
entity.name.function, variable.function#82aaff
entity, entity.name#c8d3f5
variable.parameter.function#c8d3f5
entity.name.tag, meta.tag.sgml, declaration.tag#c099ff
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#4fd6be
string.quoted.double.html, string.quoted.single.html, string.quoted.double.xml, string.quoted.single.xml, punctuation.definition.string.begin.html, punctuation.definition.string.end.html, punctuation.definition.string.begin.xml, punctuation.definition.string.end.xml#c3e88d
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml, punctuation.definition.tag.xml, punctuation.separator.key-value.html, punctuation.definition.tag.html, meta.tag.punctuation.definition.tag.html, meta.tag.block.any.html, meta.tag.inline.any.html#65bcff
keyword.other.doctype.html#ff9e64
text.html, text.xml, text.html.basic, source.html, meta.tag, meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.any.html#c8d3f5
text.html.title, meta.section.html.head.title, entity.name.tag.title.html ~ text, entity.name.tag.title.html + text, meta.tag.inline.any.html.title#82aaffbold
meta.tag.inline.any.html.title entity.name.tag.title#c099ff
entity.name.tag.title.html punctuation.definition.tag#65bcff
entity.name.tag.script, entity.name.tag.style, entity.name.tag.meta#c099ffitalic
text.html.markdown punctuation.definition.tag#65bcff
text.html.derivative#c8d3f5
punctuation, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.section.bracket.begin.bracket.square, punctuation.section.bracket.end.bracket.square, punctuation.section.parameters.begin.bracket.round, punctuation.section.parameters.end.bracket.round, punctuation.section.arguments.begin.bracket.round, punctuation.section.arguments.end.bracket.round, punctuation.terminator, punctuation.separator, punctuation.accessor, meta.brace, punctuation.definition.block, punctuation.definition.bracket, punctuation.definition.parameters, punctuation.section.block.begin.bracket.curly.class.cpp, punctuation.section.block.end.bracket.curly.class.cpp, punctuation.section.parameters.begin.bracket.round.cpp, punctuation.section.parameters.end.bracket.round.cpp, punctuation.section.arguments.begin.bracket.round.cpp, punctuation.section.arguments.end.bracket.round.cpp, punctuation.definition.parameters.cpp#c8d3f5
keyword#65bcff
keyword.control.directive, meta.preprocessor, punctuation.definition.directive#86e1fc
storage.type.js, storage.type.ts, storage.modifier.js, storage.modifier.ts, keyword.operator.new.js, keyword.operator.new.ts, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.ts, keyword.operator.expression.delete.js, keyword.operator.expression.delete.ts, keyword.operator.expression.void.js, keyword.operator.expression.void.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.export.js, keyword.control.export.ts, keyword.control.default.js, keyword.control.default.ts, keyword.control.from.js, keyword.control.from.ts, keyword.control.as.js, keyword.control.as.ts#fca7eaitalic
entity.name.type, entity.name.class, support.type, support.class, entity.name.namespace#65bcff
entity.name.namespace.cpp#86e1fc
support.type.primitive, keyword.type, storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, entity.name.function.definition.special.constructor.cpp, entity.name.function.constructor.cpp, entity.name.function.definition.special.member.destructor.cpp, entity.name.function.destructor.cpp#65bcff
namespace, entity.name.namespace, support.other.namespace, entity.name.scope-resolution#c8d3f5
variable.other.object, variable.other.property, variable.other.member, support.variable.property#4fd6be
entity.name.class.python, entity.name.type.class.python, support.type.python, support.class.python#65bcff
variable.parameter.function.language.python, variable.parameter.function.python, meta.function.parameters.python#e0af68italic
variable.parameter.function-call.python, meta.function-call.arguments.python variable.parameter.function-call.python, meta.function-call.arguments.python keyword.operator.assignment.python#ff9e64
entity.name.namespace.python#c8d3f5
variable.language.special.self.python#ff757fitalic
variable.other.property.python, meta.attribute.python#4fd6be
support.type.built-in.c++, support.type.sys-types.c, support.type.stdint.c#65bcff
support.constant, support.variable#c8d3f5
variable.other.object.c++, variable.other.global.c++, variable.other.readwrite.c++, variable.other.property.c++, variable.other.member.c++#4fd6be
entity.name.function.stream.c++, support.function.stream.c++, support.type.stream.c++, entity.name.function.stream, support.function.stream, support.type.stream#ff757f
storage.type.namespace.directive.cpp, keyword.other.namespace.directive.cpp#65bcff
keyword.other.access-control, storage.type.modifier.access.control.public.cpp, storage.type.modifier.access.control.protected.cpp, storage.type.modifier.access.control.private.cpp, storage.type.modifier.access.public.cpp, storage.type.modifier.access.protected.cpp, storage.type.modifier.access.private.cpp, keyword.other.using.directive.cpp, keyword.other.using.declaration.cpp, keyword.other.operator.cpp, keyword.control, keyword.control.if.cpp, keyword.control.else.cpp, keyword.control.return.cpp, keyword.control.switch.cpp, keyword.control.case.cpp, keyword.control.default.cpp, keyword.control.while.cpp, keyword.control.for.cpp, keyword.control.do.cpp, keyword.other.default.destructor.cpp, keyword.other.default.constructor.cpp, keyword.other.default.function.cpp#c099ff
storage.modifier.specifier.functional.post-parameters.override.cpp, storage.modifier.specifier.functional.post-parameters.final.cpp#fca7ea
storage.modifier#65bcff
storage, storage.type#65bcff
storage.modifier.package, storage.modifier.import, storage.type.java#c8d3f5
string, punctuation.definition.string, string punctuation.section.embedded source#c3e88d
support, support.function, support.function.any-method, support.variable, support.constant, support.constant.cpp, variable.other.readwrite.global.cpp, variable.other.readwrite.static.cpp, variable.other.readwrite.member.cpp, entity.name.function.defaultLibrary#65bcff
support.type#65bcff
meta.property-name#82aaff
variable, variable.other#c8d3f5
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.other.attribute-name.tag.css, entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less#65bcff
support.type.property-name.css, support.type.property-name.scss, meta.property-name.css, meta.property-name.scss#4fd6be
support.constant.property-value.css, support.constant.property-value.scss, meta.property-value.css, meta.property-value.scss, constant.numeric.css, constant.numeric.scss, keyword.other.unit.css, keyword.other.unit.scss#ff9e64
punctuation.section.embedded.begin.python, punctuation.section.embedded.end.python, constant.character.format.placeholder.other.python#ff9e64
support.type.property-name.json, entity.name.tag.yaml, entity.name.section.yaml#65bcff
meta.module-reference#82aaff
heading.1.markdown, markup.heading.1, markup.heading.1.markdown, markup.heading.heading-1, markup.heading.heading-1.markdown, markup.heading.setext.1, markup.heading.setext.1.markdown, entity.name.section.1, markup.heading.1 entity.name.section, markup.heading.1.markdown entity.name.section, heading.1.markdown entity.name.section, heading.1.markdown punctuation.definition.heading, markup.heading.1 punctuation.definition.heading, markup.heading.1.markdown punctuation.definition.heading#82aaffbold
heading.2.markdown, markup.heading.2, markup.heading.2.markdown, markup.heading.heading-2, markup.heading.heading-2.markdown, markup.heading.setext.2, markup.heading.setext.2.markdown, entity.name.section.2, markup.heading.2 entity.name.section, markup.heading.2.markdown entity.name.section, heading.2.markdown entity.name.section, heading.2.markdown punctuation.definition.heading, markup.heading.2 punctuation.definition.heading, markup.heading.2.markdown punctuation.definition.heading#ffc777bold
heading.3.markdown, markup.heading.3, markup.heading.3.markdown, markup.heading.heading-3, markup.heading.heading-3.markdown, entity.name.section.3, markup.heading.3 entity.name.section, markup.heading.3.markdown entity.name.section, heading.3.markdown entity.name.section, heading.3.markdown punctuation.definition.heading, markup.heading.3 punctuation.definition.heading, markup.heading.3.markdown punctuation.definition.heading#c3e88dbold
heading.4.markdown, markup.heading.4, markup.heading.4.markdown, markup.heading.heading-4, markup.heading.heading-4.markdown, entity.name.section.4, markup.heading.4 entity.name.section, markup.heading.4.markdown entity.name.section, heading.4.markdown entity.name.section, heading.4.markdown punctuation.definition.heading, markup.heading.4 punctuation.definition.heading, markup.heading.4.markdown punctuation.definition.heading#fca7eabold
heading.5.markdown, markup.heading.5, markup.heading.5.markdown, markup.heading.heading-5, markup.heading.heading-5.markdown, entity.name.section.5, markup.heading.5 entity.name.section, markup.heading.5.markdown entity.name.section, heading.5.markdown entity.name.section, heading.5.markdown punctuation.definition.heading, markup.heading.5 punctuation.definition.heading, markup.heading.5.markdown punctuation.definition.heading#ff757fbold
heading.6.markdown, markup.heading.6, markup.heading.6.markdown, markup.heading.heading-6, markup.heading.heading-6.markdown, entity.name.section.6, markup.heading.6 entity.name.section, markup.heading.6.markdown entity.name.section, heading.6.markdown entity.name.section, heading.6.markdown punctuation.definition.heading, markup.heading.6 punctuation.definition.heading, markup.heading.6.markdown punctuation.definition.heading#c099ffbold
markup.quote#ffc777
markup.italic#c3e88ditalic
markup.bold#fca7eabold
markup.list, markup.list.unnumbered, markup.list.numbered, punctuation.definition.list.markdown#ffc777
markup.link, markup.link.label, markup.link.text, punctuation.definition.link.markdown, punctuation.definition.metadata.markdown#ffc777
markup.raw.inline, markup.raw.inline.markdown, markup.inline.raw, punctuation.definition.raw.markdown, string.other.link.title.markdown, string.other.link.description.markdown#ffc777
markup.raw, markup.raw.block, markup.fenced_code.block, markup.fenced_code.block.markdown, punctuation.definition.fenced.markdown, variable.parameter.markdown, markup.fenced_code.block.markdown string, markup.fenced_code.block.markdown punctuation.definition.string#c3e88d
markup.underline.link, markup.underline.link.image#86e1fc
punctuation.definition.list.begin.markdown, punctuation.definition.list.end.markdown, punctuation.separator.list.markdown#ffc777
punctuation.definition.quote.begin.markdown#ffc777
meta.separator.markdown, punctuation.definition.hr.markdown#545c7e
markup.table, punctuation.definition.table.markdown, punctuation.separator.table.markdown#89ddff
markup.table.header, markup.table.header.markdown#82aaffbold
punctuation.definition.checkbox.markdown#89ddff
markup.list.checked.markdown, punctuation.definition.checkbox.checked.markdown#c3e88d
markup.list.unchecked.markdown, punctuation.definition.checkbox.unchecked.markdown#ff757f
entity.name.tag.reference.markdown, punctuation.definition.footnote.markdown#c099ff
markup.math.markdown, punctuation.definition.math.markdown#b4f9f8
Lazy Themes by Uday Thakur - VS Code Theme