Skip to main content
Coding Theme

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#07211E
  • activityBar.border#0b3934
  • activityBar.foreground#EDC291
  • activityBarBadge.background#EDC291
  • activityBarBadge.foreground#0b3934
  • activityBarTop.foreground#EDC291
  • badge.background#EDC291
  • badge.foreground#0b3934
  • breadcrumb.focusForeground#EDC291
  • breadcrumb.foreground#EDC291
  • button.background#0b3934
  • button.border#0b3934
  • button.foreground#ffffff
  • button.hoverBackground#07211E
  • button.secondaryBackground#082D29
  • button.secondaryForeground#EDC291
  • button.separator#EDC291
  • checkbox.background#07211E
  • checkbox.border#0b3934
  • commandCenter.activeBackground#072623
  • commandCenter.activeBorder#0b3934
  • commandCenter.background#07211E
  • commandCenter.border#0b3934
  • commandCenter.inactiveBorder#0b3934
  • debugConsole.errorForeground#ff3a3a
  • debugConsole.infoForeground#EDC291
  • debugConsole.sourceForeground#A2D5E0
  • debugConsole.warningForeground#ffce3a
  • debugIcon.breakpointForeground#ff3a3a
  • debugIcon.pauseForeground#1e96ff
  • debugIcon.restartForeground#6CCD5B
  • debugIcon.stepBackForeground#1e96ff
  • debugIcon.stepIntoForeground#1e96ff
  • debugIcon.stepOutForeground#1e96ff
  • debugIcon.stepOverForeground#1e96ff
  • debugIcon.stopForeground#ff3a3a
  • debugToolBar.background#07211E
  • debugView.stateLabelBackground#08302C
  • descriptionForeground#EDC29199
  • dropdown.background#07211E
  • dropdown.border#0b3934
  • dropdown.foreground#EDC291
  • editor.background#072623
  • editor.findMatchBackground#045677
  • editor.findMatchHighlightBackground#6FC8AD30
  • editor.findMatchHighlightBorder#6FC8AD20
  • editor.findRangeHighlightBackground#0A3D3873
  • editor.foreground#EDC291
  • editor.hoverHighlightBackground#034661d0
  • editor.lineHighlightBackground#0A3D38
  • editor.rangeHighlightBackground#0A3D38f0
  • editor.selectionBackground#033c52
  • editor.selectionHighlightBorder#0F5147
  • editor.stackFrameHighlightBackground#EDC2913e
  • editor.wordHighlightBackground#03466110
  • editor.wordHighlightBorder#04648B
  • editorBracketHighlight.foreground1#9AE399
  • editorBracketHighlight.foreground2#A2D5E0
  • editorBracketHighlight.foreground3#6FC8AD
  • editorBracketHighlight.foreground4#D0ABF7
  • editorCommentsWidget.rangeActiveBackground#0F5147
  • editorCommentsWidget.replyInputBackground#072623
  • editorCursor.foreground#EDC291
  • editorError.foreground#ff3a3a
  • editorGroup.border#0b3934
  • editorGroup.dropBackground#1050993f
  • editorGroupHeader.tabsBackground#07211E
  • editorGroupHeader.tabsBorder#0b3934
  • editorIndentGuide.background1#EDC29138
  • editorInlayHint.foreground#EDC291c5
  • editorLineNumber.activeForeground#EDC291
  • editorLineNumber.foreground#EDC29170
  • editorLink.activeForeground#1e96ff
  • editorRuler.foreground#0A3D38
  • editorStickyScrollHover.background#0A3D38
  • editorSuggestWidget.border#0b3934
  • editorSuggestWidget.focusHighlightForeground#1e96ff
  • editorSuggestWidget.highlightForeground#1e96ff
  • editorWidget.background#082D29
  • editorWidget.border#0b3934
  • editorWidget.foreground#EDC291
  • errorForeground#ff3a3a
  • extensionButton.background#0b3934
  • extensionButton.foreground#EDC291
  • extensionButton.hoverBackground#07211E
  • extensionButton.separator#EDC291
  • focusBorder#0b3934
  • foreground#EDC291
  • git.blame.editorDecorationForeground#9AE399a0
  • gitDecoration.modifiedResourceForeground#A2D5E0
  • gitlens.gutterBackgroundColor#07262600
  • gitlens.gutterForegroundColor#EDC291
  • gitlens.trailingLineForegroundColor#9AE399a0
  • icon.foreground#EDC291
  • input.background#082D29
  • input.border#0b3934
  • input.foreground#EDC291
  • keybindingLabel.background#0A3D38
  • keybindingLabel.border#0b3934
  • keybindingLabel.bottomBorder#0b3934
  • keybindingLabel.foreground#EDC291
  • list.activeSelectionBackground#0A3D38
  • list.activeSelectionForeground#EDC291
  • list.dropBackground#1050993f
  • list.errorForeground#ff3a3a
  • list.hoverBackground#0A3D38
  • list.hoverForeground#EDC291
  • list.inactiveSelectionBackground#0A3D38
  • list.inactiveSelectionForeground#EDC291
  • menu.background#082D29
  • menu.foreground#EDC291
  • menu.selectionBackground#0A3D38
  • menu.selectionForeground#EDC291
  • multiDiffEditor.headerBackground#07211E
  • notifications.background#07211E
  • notifications.border#0b3934
  • panel.background#07211E
  • panel.border#0b3934
  • panelInput.border#0b3934
  • panelSection.dropBackground#1050993f
  • panelTitle.activeForeground#EDC291
  • panelTitle.inactiveForeground#EDC291
  • peekView.border#0b3934
  • peekViewEditor.background#082D29
  • peekViewResult.background#07211E
  • peekViewResult.fileForeground#EDC291
  • peekViewResult.lineForeground#EDC291
  • peekViewResult.matchHighlightBackground#0B413C
  • peekViewResult.selectionBackground#0b3934
  • peekViewResult.selectionForeground#EDC291
  • peekViewTitle.background#07211E
  • peekViewTitleLabel.foreground#EDC291
  • quickInput.background#07211E
  • quickInput.foreground#EDC291
  • quickInputList.focusBackground#0A3D38
  • quickInputList.focusIconForeground#EDC291
  • sash.hoverBorder#EDC291
  • scrollbar.shadow#0b3934
  • scrollbarSlider.activeBackground#EDC291B0
  • scrollbarSlider.background#EDC29160
  • scrollbarSlider.hoverBackground#EDC29190
  • selection.background#034661
  • settings.focusedRowBorder#0b3934
  • settings.headerBorder#EDC291
  • settings.headerForeground#EDC291
  • sideBar.background#07211E
  • sideBar.border#0b3934
  • sideBar.dropBackground#1050993f
  • sideBar.foreground#EDC291
  • sideBarSectionHeader.background#07211E
  • sideBarSectionHeader.border#0b3934
  • statusBar.background#07211E
  • statusBar.border#0b3934
  • statusBar.debuggingBackground#ac1f0d
  • statusBar.debuggingForeground#EDC291
  • statusBar.foreground#EDC291
  • statusBar.noFolderBackground#07211E
  • statusBarItem.remoteBackground#07211E
  • statusBarItem.remoteForeground#EDC291
  • statusBarItem.remoteHoverBackground#EDC291
  • statusBarItem.remoteHoverForeground#07211E
  • tab.activeBorder#072623
  • tab.activeBorderTop#EDC291
  • tab.activeForeground#EDC291
  • tab.activeModifiedBorder#1e96ff
  • tab.border#0b3934
  • tab.hoverBackground#082D29
  • tab.inactiveBackground#07211E
  • tab.inactiveModifiedBorder#1e96ff
  • tab.lastPinnedBorder#0b3934
  • terminal.dropBackground#1050993f
  • terminal.foreground#EDC291
  • terminalStickyScrollHover.background#0A3D38
  • textLink.activeForeground#1e96ff
  • textLink.foreground#1e96ff
  • titleBar.activeBackground#07211E
  • titleBar.activeForeground#EDC291
  • titleBar.border#0b3934
  • titleBar.inactiveBackground#07211E
  • titleBar.inactiveForeground#EDC29192
  • tree.indentGuidesStroke#EDC291

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6CCD5B
string, punctuation.definition.string, string.quoted.single.python#6FC8AD
constant.character.escape, support.other.escape.special#D0ABF7bold
constant.numeric, constant.language.json.comments#6FC8AD
constant.language.boolean.yaml, constant.language.null.yamlbold
entity.name.type.enum, variable.other.enummember#A2D5E0
entity.name.namespace
entity.name.type, support.type, storage.type#A2D5E0
keyword.controlbold
storage.type.struct#A2D5E0
entity.name.type.class, support.class#A2D5E0
entity.name.type.interface#A2D5E0
entity.name.function, support.function, entity.name.function.member
entity.name.function.macro#D0ABF7
variable.other.readwrite, entity.name.variable, variable.other.constant, support.constant
variable.parameter
variable.parameter, variable.other.parameter
variable.other.event
keyword.function, keyword.control, keyword.var, keyword.type, keyword.package, keyword.interface#9AE399
punctuation.definition.decorator.python, entity.name.function.decorator.python, meta.function.decorator.python#D0ABF7
constant.language.python, keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical.python, storage.type.class.python, storage.type.function.async.python, storage.type.function.lambda.python, storage.type.function.python#9AE399
variable.parameter.function-call.python#EDC291
constant.language.boolean.false.js, constant.language.boolean.false.jsx, constant.language.boolean.false.ts, constant.language.boolean.false.tsx, constant.language.boolean.true.js, constant.language.boolean.true.jsx, constant.language.boolean.true.ts, constant.language.boolean.true.tsx, constant.language.null.js, constant.language.null.jsx, constant.language.null.ts, constant.language.null.tsx, constant.language.undefined.js, constant.language.undefined.jsx, constant.language.undefined.ts, constant.language.undefined.tsx, keyword.control.as.js, keyword.control.as.jsx, keyword.control.as.ts, keyword.control.as.tsx, keyword.control.conditional.js, keyword.control.conditional.jsx, keyword.control.conditional.ts, keyword.control.conditional.tsx, keyword.control.export.js, keyword.control.export.jsx, keyword.control.export.ts, keyword.control.export.tsx, keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.from.js, keyword.control.from.jsx, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.import.js, keyword.control.import.jsx, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.loop.js, keyword.control.loop.jsx, keyword.control.loop.ts, keyword.control.loop.tsx, keyword.control.switch.js, keyword.control.switch.jsx, keyword.control.switch.ts, keyword.control.switch.tsx, keyword.control.trycatch.js, keyword.control.trycatch.jsx, keyword.control.trycatch.ts, keyword.control.trycatch.tsx, keyword.operator.expression.delete.js, keyword.operator.expression.delete.jsx, keyword.operator.expression.delete.ts, keyword.operator.expression.delete.tsx, keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx, keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.jsx, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx, keyword.operator.expression.is.js, keyword.operator.expression.is.jsx, keyword.operator.expression.is.ts, keyword.operator.expression.is.tsx, keyword.operator.expression.keyof.js, keyword.operator.expression.keyof.jsx, keyword.operator.expression.keyof.ts, keyword.operator.expression.keyof.tsx, keyword.operator.expression.of.js, keyword.operator.expression.of.jsx, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx, keyword.operator.expression.typeof.js, keyword.operator.expression.typeof.jsx, keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.tsx, keyword.operator.new.js, keyword.operator.new.jsx, keyword.operator.new.ts, keyword.operator.new.tsx, storage.modifier.async.js, storage.modifier.async.jsx, storage.modifier.async.ts, storage.modifier.async.tsx, storage.modifier.js, storage.modifier.jsx, storage.modifier.ts, storage.modifier.tsx, storage.type.class.js, storage.type.class.jsx, storage.type.class.ts, storage.type.class.tsx, storage.type.enum.js, storage.type.enum.jsx, storage.type.enum.ts, storage.type.enum.tsx, storage.type.function.js, storage.type.function.jsx, storage.type.function.ts, storage.type.function.tsx, storage.type.interface.js, storage.type.interface.jsx, storage.type.interface.ts, storage.type.interface.tsx, storage.type.js, storage.type.jsx, storage.type.namespace.js, storage.type.namespace.jsx, storage.type.namespace.ts, storage.type.namespace.tsx, storage.type.ts, storage.type.tsx, storage.type.type.js, storage.type.type.jsx, storage.type.type.ts, storage.type.type.tsx, variable.language.super.js, variable.language.super.jsx, variable.language.super.ts, variable.language.super.tsx, variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsx#9AE399
entity.name.tag.html#9AE399
entity.name.tag.js.jsx, entity.name.tag.tsx#9AE399
meta.template.expression.tsx, meta.template.expression.jsx#D0ABF7
meta.embedded.line.tsx, meta.embedded.line.jsx#EDC291
keyword.operator.ternary.js.jsx, keyword.operator.ternary.tsx, keyword.operator.ternary.js, keyword.operator.ternary.tsbold
variable.language.this.js, variable.language.this.jsx, variable.language.this.ts, variable.language.this.tsxunderline
variable.language.super.js, variable.language.super.jsx, variable.language.super.ts, variable.language.super.tsxunderline
keyword.other.debugger.js, keyword.other.debugger.jsx, keyword.other.debugger.ts, keyword.other.debugger.tsx#fe6f6fbold
keyword.control.gobold
markup.heading#9AE399bold
markup.fenced_code.block#A2D5E0
markup.underline.link#1e96ff
markup.italicitalic
markup.boldbold
markup.strikethroughstrikethrough
markup.underlineunderline
markup.quote#6FC8ADitalic
keyword.control.rust, keyword.operator.question.rustbold
keyword.other.rust, keyword.other.fn.rust, keyword.other.crate.rust#9AE399
storage.type.rust, storage.modifier.mut.rust#9AE399
constant.language.bool.rust#9AE399
meta.attribute.rust#D0ABF7
meta.diff.header, meta.diff.index#A2D5E0
meta.diff.range.unified#D0ABF7
punctuation.definition.deleted.diff, markup.deleted.diff, meta.diff.header.from-file#FF4A1C
punctuation.definition.inserted.diff, markup.inserted.diff, meta.diff.header.to-file#82FF74