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#0f1c24
  • activityBar.border#1a3d3520
  • activityBar.foreground#66f0ffaa
  • activityBar.inactiveForeground#7c9cd850
  • activityBarBadge.background#48d8a0
  • activityBarBadge.foreground#0a1218
  • badge.background#48d8a0
  • badge.foreground#0a1218
  • breadcrumb.activeSelectionForeground#78c8e8
  • breadcrumb.focusForeground#a0bcc0
  • breadcrumb.foreground#7c9cd8a0
  • breadcrumbPicker.background#0c1519
  • button.background#4a7a6e
  • button.foreground#a0bcc0
  • button.hoverBackground#5a8a7e
  • button.secondaryBackground#0f1c24
  • button.secondaryForeground#a0bcc0
  • button.secondaryHoverBackground#1a2830
  • charts.blue#78c8e8
  • charts.foreground#a0bcc0
  • charts.green#48d8a0
  • charts.lines#7c9cd860
  • charts.orange#d8a060
  • charts.purple#c488d8
  • charts.red#d87878
  • charts.yellow#c8c088
  • debugConsole.errorForeground#d87878
  • debugConsole.infoForeground#78c8e8
  • debugConsole.warningForeground#d8a060
  • debugIcon.breakpointForeground#d87878
  • debugIcon.startForeground#48d8a0
  • debugToolBar.background#0f1c24
  • descriptionForeground#7c9cd8
  • diffEditor.insertedLineBackground#0cf38810
  • diffEditor.insertedTextBackground#0cf38815
  • diffEditor.removedLineBackground#d8787810
  • diffEditor.removedTextBackground#d8787815
  • disabledForeground#7c9cd850
  • dropdown.background#0c1519
  • dropdown.border#48d8a060
  • dropdown.foreground#a0bcc0
  • dropdown.listBackground#0a1218
  • editor.background#0a1218
  • editor.findMatchBackground#ff904450
  • editor.findMatchBorder#ff904480
  • editor.findMatchHighlightBackground#ff904425
  • editor.foreground#b0ccd0
  • editor.hoverHighlightBackground#66f0ff10
  • editor.inactiveSelectionBackground#4a7a6e20
  • editor.lineHighlightBackground#0f2029
  • editor.lineHighlightBorder#66f0ff30
  • editor.linkedEditingBackground#66f0ff15
  • editor.rangeHighlightBackground#4a7a6e15
  • editor.selectionBackground#4a7a6e40
  • editor.selectionHighlightBackground#4a7a6e25
  • editor.wordHighlightBackground#66f0ff18
  • editor.wordHighlightStrongBackground#0cf38818
  • editorBracketHighlight.foreground1#d87878
  • editorBracketHighlight.foreground2#d8a878
  • editorBracketHighlight.foreground3#c8c088
  • editorBracketHighlight.foreground4#7cc098
  • editorBracketHighlight.foreground5#78c8e8
  • editorBracketHighlight.foreground6#c488d8
  • editorBracketMatch.background#4a7a6e30
  • editorBracketMatch.border#66f0ff60
  • editorCursor.foreground#48d8a0
  • editorError.foreground#d87878
  • editorGroup.border#1e4a4030
  • editorGroupHeader.noTabsBackground#0c1519
  • editorGroupHeader.tabsBackground#0c1519
  • editorGutter.addedBackground#0cf38880
  • editorGutter.background#0b1319
  • editorGutter.deletedBackground#d8787880
  • editorGutter.modifiedBackground#66f0ff80
  • editorHoverWidget.background#0c1519
  • editorHoverWidget.border#1e4a4040
  • editorIndentGuide.activeBackground1#d87878a0
  • editorIndentGuide.activeBackground2#d8a878a0
  • editorIndentGuide.activeBackground3#c8c088a0
  • editorIndentGuide.activeBackground4#7cc098a0
  • editorIndentGuide.activeBackground5#78c8e8a0
  • editorIndentGuide.activeBackground6#c488d8a0
  • editorIndentGuide.background1#d8787840
  • editorIndentGuide.background2#d8a87840
  • editorIndentGuide.background3#c8c08840
  • editorIndentGuide.background4#7cc09840
  • editorIndentGuide.background5#78c8e840
  • editorIndentGuide.background6#c488d840
  • editorInfo.foreground#78c8e8
  • editorLineNumber.activeForeground#b0ccd0
  • editorLineNumber.foreground#7c9cd860
  • editorOverviewRuler.addedForeground#0cf38880
  • editorOverviewRuler.border#1e4a4030
  • editorOverviewRuler.deletedForeground#d8787880
  • editorOverviewRuler.errorForeground#d87878
  • editorOverviewRuler.findMatchForeground#ff904480
  • editorOverviewRuler.infoForeground#78c8e8
  • editorOverviewRuler.modifiedForeground#66f0ff80
  • editorOverviewRuler.warningForeground#d8a060
  • editorSuggestWidget.background#0c1519
  • editorSuggestWidget.border#1e4a4040
  • editorSuggestWidget.focusHighlightForeground#48d8a0
  • editorSuggestWidget.foreground#a0bcc0
  • editorSuggestWidget.highlightForeground#48d8a0
  • editorSuggestWidget.selectedBackground#4a7a6e40
  • editorWarning.foreground#d8a060
  • editorWhitespace.foreground#7c9cd820
  • editorWidget.background#0c1519
  • editorWidget.border#1e4a4040
  • editorWidget.foreground#a0bcc0
  • errorForeground#d87878
  • focusBorder#78c8e880
  • foreground#a0bcc0
  • gitDecoration.addedResourceForeground#48d8a0
  • gitDecoration.conflictingResourceForeground#d8a060
  • gitDecoration.deletedResourceForeground#d87878
  • gitDecoration.ignoredResourceForeground#7c9cd880
  • gitDecoration.modifiedResourceForeground#78c8e8
  • gitDecoration.renamedResourceForeground#8cc8c4
  • gitDecoration.stageDeletedResourceForeground#d87878c0
  • gitDecoration.stageModifiedResourceForeground#78c8e8c0
  • gitDecoration.untrackedResourceForeground#7cc098
  • icon.foreground#66f0ffaa
  • input.background#0a1218
  • input.border#48d8a060
  • input.foreground#a0bcc0
  • input.placeholderForeground#7c9cd860
  • inputOption.activeBackground#0cf38820
  • inputOption.activeBorder#0cf38880
  • inputOption.activeForeground#a0bcc0
  • inputValidation.errorBackground#d8787830
  • inputValidation.errorBorder#d87878
  • inputValidation.infoBackground#66f0ff20
  • inputValidation.infoBorder#78c8e8
  • inputValidation.warningBackground#ff904430
  • inputValidation.warningBorder#d8a060
  • keybindingLabel.background#0f1c2480
  • keybindingLabel.border#1e4a4040
  • keybindingLabel.bottomBorder#1e4a4060
  • keybindingLabel.foreground#a0bcc0
  • list.activeSelectionBackground#4a7a6e40
  • list.activeSelectionForeground#a0bcc0
  • list.dropBackground#4a7a6e20
  • list.errorForeground#d87878
  • list.focusBackground#4a7a6e30
  • list.focusForeground#a0bcc0
  • list.highlightForeground#48d8a0
  • list.hoverBackground#0f1c24
  • list.hoverForeground#a0bcc0
  • list.inactiveSelectionBackground#4a7a6e25
  • list.inactiveSelectionForeground#a0bcc0
  • list.warningForeground#d8a060
  • merge.currentContentBackground#0cf38815
  • merge.currentHeaderBackground#0cf38830
  • merge.incomingContentBackground#66f0ff15
  • merge.incomingHeaderBackground#66f0ff30
  • minimap.errorHighlight#d87878
  • minimap.findMatchHighlight#ff904480
  • minimap.selectionHighlight#4a7a6e60
  • minimap.warningHighlight#d8a060
  • minimapGutter.addedBackground#0cf38880
  • minimapGutter.deletedBackground#d8787880
  • minimapGutter.modifiedBackground#66f0ff80
  • minimapSlider.activeBackground#7c9cd835
  • minimapSlider.background#7c9cd815
  • minimapSlider.hoverBackground#7c9cd825
  • notificationCenter.border#1e4a4040
  • notificationCenterHeader.background#0f1c24
  • notificationCenterHeader.foreground#a0bcc0
  • notifications.background#0c1519
  • notifications.border#1e4a4040
  • notifications.foreground#a0bcc0
  • notificationsErrorIcon.foreground#d87878
  • notificationsInfoIcon.foreground#78c8e8
  • notificationsWarningIcon.foreground#d8a060
  • panel.background#0c1519
  • panel.border#1e4a4030
  • panelTitle.activeBorder#48d8a0
  • panelTitle.activeForeground#a0bcc0
  • panelTitle.inactiveForeground#7c9cd880
  • peekView.border#4a7a6e
  • peekViewEditor.background#0b1319
  • peekViewEditor.matchHighlightBackground#ff904440
  • peekViewResult.background#0c1519
  • peekViewResult.fileForeground#a0bcc0
  • peekViewResult.lineForeground#7c9cd8
  • peekViewResult.matchHighlightBackground#ff904440
  • peekViewResult.selectionBackground#4a7a6e40
  • peekViewResult.selectionForeground#a0bcc0
  • peekViewTitle.background#0f1c24
  • peekViewTitleDescription.foreground#7c9cd8
  • peekViewTitleLabel.foreground#a0bcc0
  • progressBar.background#78c8e8
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#7c9cd860
  • scrollbarSlider.background#7c9cd820
  • scrollbarSlider.hoverBackground#7c9cd840
  • selection.background#4a7a6e50
  • sideBar.background#0c1519
  • sideBar.border#1e4a4030
  • sideBar.foreground#a0bcc0c0
  • sideBarSectionHeader.background#0f1c24
  • sideBarSectionHeader.border#1e4a4030
  • sideBarSectionHeader.foreground#7c9cd8
  • sideBarTitle.foreground#a0bcc0
  • statusBar.background#111f1c
  • statusBar.border#5ac16c30
  • statusBar.debuggingBackground#ff904480
  • statusBar.debuggingForeground#a0bcc0
  • statusBar.foreground#a0bcc0c0
  • statusBar.noFolderBackground#111f1c
  • statusBar.noFolderForeground#a0bcc0c0
  • statusBarItem.errorBackground#d8787880
  • statusBarItem.errorForeground#a0bcc0
  • statusBarItem.hoverBackground#4a7a6e40
  • statusBarItem.prominentBackground#4a7a6e60
  • statusBarItem.prominentHoverBackground#4a7a6e80
  • statusBarItem.remoteBackground#4a7a6e80
  • statusBarItem.remoteForeground#a0bcc0
  • statusBarItem.warningBackground#ff904460
  • statusBarItem.warningForeground#a0bcc0
  • tab.activeBackground#0e1a20
  • tab.activeBorder#48d8a0
  • tab.activeBorderTop#00000000
  • tab.activeForeground#a0bcc0
  • tab.border#00000000
  • tab.hoverBackground#0f1c24
  • tab.inactiveBackground#0c1519
  • tab.inactiveForeground#7c9cd880
  • tab.unfocusedActiveBackground#0c1519
  • tab.unfocusedActiveForeground#a0bcc0a0
  • terminal.ansiBlack#0a1218
  • terminal.ansiBlue#7c9cd8
  • terminal.ansiBrightBlack#4a7890
  • terminal.ansiBrightBlue#78c8e8
  • terminal.ansiBrightCyan#78c8e8
  • terminal.ansiBrightGreen#48d8a0
  • terminal.ansiBrightMagenta#c098d0
  • terminal.ansiBrightRed#c88888
  • terminal.ansiBrightWhite#c8dce0
  • terminal.ansiBrightYellow#c8c088
  • terminal.ansiCyan#8cc8c4
  • terminal.ansiGreen#7cc098
  • terminal.ansiMagenta#c488d8
  • terminal.ansiRed#d87878
  • terminal.ansiWhite#a0bcc0
  • terminal.ansiYellow#c8c088
  • terminal.background#0a1218
  • terminal.foreground#a0bcc0
  • terminal.selectionBackground#4a7a6e40
  • terminalCursor.foreground#48d8a0
  • testing.iconErrored#d8a060
  • testing.iconFailed#d87878
  • testing.iconPassed#48d8a0
  • testing.iconSkipped#7c9cd860
  • textPreformat.foreground#78d4c8
  • titleBar.activeBackground#111f1c
  • titleBar.activeForeground#a0bcc0c0
  • titleBar.border#4b82e925
  • titleBar.inactiveBackground#0c1519
  • titleBar.inactiveForeground#7c9cd860
  • walkThrough.embeddedEditorBackground#0b1319
  • welcomePage.tileBackground#0c1519
  • welcomePage.tileBorder#1e4a4030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation, punctuation.section.embedded, meta.function-call, punctuation.definition.constant.hashkey, keyword.operator.assignment.ruby, entity.name.function.call.cpp, entity.name.function.member.cpp, variable.other.object.property, variable.other.property, meta.brace.round.ts, meta.brace.square.ts, keyword.operator.type.ts, keyword.operator.type.annotation.ts, meta.function-call.ts, keyword.operator.assignment.ts, keyword.operator.relational.ts, keyword.operator.increment.ts, keyword.operator.bitwise.shift.ts, keyword.operator.bitwise.ts, punctuation.separator.key-value.ts, keyword.operator.assignment.js, keyword.operator.relational.js, keyword.operator.increment.js, keyword.operator.bitwise.shift.js, keyword.operator.bitwise.js, variable.other.object.property.js, support.variable.property.js, meta.brace.round.js, meta.brace.square.js, keyword.generator.asterisk.js, keyword.operator.combinator.css, meta.property-name.css, punctuation.definition.constant.css, punctuation.separator.key-value.mapping.yaml, string.unquoted.plain.out.yaml, source.sql, constant.other.table-name.sql, meta.function.call.rust, keyword.operator.key-value.rust, keyword.operator.assignment.c, keyword.operator.comparison.c, keyword.operator.increment.c#b0ccd0—
punctuation.definition.comment, comment#6a8a80italic
comment.line.keyword.yard, comment.line.keyword.punctuation.yard, comment.line.punctuation.yard#c8a880italic bold
support.function.kernel.ruby, keyword.other, keyword.operator, keyword.control, keyword.other.special-method, punctuation.separator.key-value, variable.language, storage.type.variable, storage.modifier, storage.type.built-in.primitive.c, storage.type.built-in.primitive.cpp, storage.type.primitive.cpp, punctuation.separator.pointer-access.cpp, punctuation.definition.heading.markdown, punctuation.definition.constant.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown, storage.type.function.arrow.ts, storage.type.function.ts, storage.type.interface.ts, storage.type.enum.ts, support.constant.media.css, support.constant.property-value.css, support.constant.font-name.css, entity.name.type.primitive.rust, entity.name.type.numeric.rust#d87878—
variable.parameter, constant.other.symbol.hashkey.parameter.function, variable.other, comment.line.parameter.yard, entity.other.attribute-name.html, constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, constant.other.database-name.sql#d8a878italic
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#78d4c8
punctuation.definition.string.begin, punctuation.definition.string.end, string#7cc098—
meta.embedded.line—
string.regexp, punctuation.section.regexp#acc088
constant.numeric, keyword.other.unit.em.css, keyword.other.unit.percentage.css, keyword.other.unit.rem.css, keyword.other.unit.px.css#c8c088—
support.class, meta.class, entity.name.type.class.ruby, entity.other.inherited-class.ruby, entity.name.type.module, meta.module.ruby, variable.other.constant, comment.line.type.yard, entity.name.scope-resolution.cpp, entity.name.scope-resolution.template.call.cpp, entity.name.scope-resolution.parameter.cpp, entity.name.scope-resolution.function.call.cpp, markup.heading, constant.other.reference.link.markdown, string.other.link.title.markdown, meta.selector.css, entity.name.namespace.rust, entity.name.type.enum.ts, variable.other.readwrite.alias.ts#7c9cd8
constant.other.symbol.ruby, constant.language.symbol, constant.other.symbol.hashkey.ruby, markup.underline.link.markdown, meta.link.inline.markdown, support.type.property-name.json, meta.object-literal.key.ts, meta.object-literal.key.js, entity.name.tag.html, punctuation.separator.key-value.css, punctuation.terminator.rule.css, entity.name.tag.yaml, constant.other.symbol.hashkey.parameter.function.rbs#8cc8c4
variable.other.readwrite.class, variable.other.readwrite.instance, punctuation.definition.variable, variable.other.readwrite.global, variable.other.property#b8c8c8
constant.language, variable.language.this#d47898bold
variable, markup.bold, punctuation.definition.bold.markdown, variable.object.property.ts, variable.other.constant.object.ts, variable.other.constant.js, variable.other.constant.object.js#74b0c8
storage.type.ts, support.type.primitive.ts, storage.type.class.ts, storage.type.class.js, storage.type.function.js, storage.type.js, storage.type.function.arrow.js, constant.language.null.js, support.type.builtin.rbs#d87878bold
meta.definition.method, meta.function.method.with-arguments.ruby, meta.function.method.without-arguments.ruby#c488d8—
meta.function-call#b0ccd0—
meta.attribute.rust#c488d8italic
meta.diff, meta.diff.header, punctuation.definition.to-file.diff, punctuation.definition.from-file.diff, punctuation.definition.range.diff#8cc8c4italic
markup.deleted, punctuation.definition.deleted.diff#d87878
markup.changed#d8a878
markup.inserted, punctuation.definition.inserted.diff#7cc098—
entity.name.function.python, meta.function.python#c488d8—
entity.name.function.decorator.python, meta.function.decorator.python, punctuation.definition.decorator.python#c488d8italic
entity.name.type.class.python, entity.other.inherited-class.python#7c9cd8—
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python#d47898bold
support.function.builtin.python, support.function.magic.python, support.variable.magic.python#d87878—
support.type.python, meta.function.parameters.python meta.function-call.arguments.python#7c9cd8
meta.fstring.python, constant.character.format.placeholder.other.python#78c8e8—
string.quoted.docstring.multi.python, string.quoted.docstring.single.python#6a8a80italic
entity.name.tag.html, entity.name.tag.structure.any.html, entity.name.tag.block.any.html, entity.name.tag.inline.any.html, entity.name.tag.other.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#d87878—
entity.other.attribute-name.html, entity.other.attribute-name.id.html, entity.other.attribute-name.class.html#d8a878italic
string.quoted.double.html, string.quoted.single.html, meta.attribute.href.html string, meta.attribute.src.html string#7cc098—
meta.tag.metadata.doctype.html, entity.name.tag.doctype.html, entity.other.attribute-name.html punctuation.definition#d87878—
constant.character.entity.html, punctuation.definition.entity.html#c8c088—
entity.name.tag.script.html, entity.name.tag.style.html#d87878—
Cyber Deep Sea by egamasa - VS Code Theme