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.activeBackground#b59e7a65
  • activityBar.activeBorder#B59E7A
  • activityBar.background#042327
  • activityBar.border#0c141f
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#B59E7A
  • activityBarBadge.foreground#000
  • button.background#b59e7aa4
  • button.hoverBackground#B59E7A
  • checkbox.border#B59E7A
  • contrastBorder#B59E7A
  • debugExceptionWidget.border#B59E7A
  • debugToolBar.border#B59E7A
  • dropdown.background#2A343E
  • dropdown.border#B59E7A
  • dropdown.listBackground#042327
  • editor.background#042327
  • editor.findMatchHighlightBackground#63878a8e
  • editor.foreground#bdb395
  • editor.lineHighlightBackground#FFFFFF00
  • editor.lineHighlightBorder#ffffff00
  • editor.rangeHighlightBackground#ffffff3d
  • editor.selectionBackground#ffffff3d
  • editor.selectionForeground#FFFFFF
  • editor.selectionHighlightBackground#63878a8e
  • editorBracketHighlight.foreground1#B59E7A
  • editorBracketHighlight.foreground2#B59E7A
  • editorBracketHighlight.foreground3#B59E7A
  • editorBracketHighlight.foreground4#B59E7A
  • editorBracketHighlight.foreground5#B59E7A
  • editorBracketHighlight.foreground6#B59E7A
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#B59E7A00
  • editorBracketMatch.border#B59E7A
  • editorCursor.background#000
  • editorCursor.foreground#86E08F
  • editorGroup.border#B59E7A
  • editorGroup.dropBackground#63878a1a
  • editorGroupHeader.tabsBackground#042327
  • editorLineNumber.activeForeground#b59E7A
  • editorLineNumber.foreground#b59e7a65
  • editorSuggestWidget.background#042327
  • editorSuggestWidget.foreground#ccc
  • editorSuggestWidget.highlightForeground#bdb395
  • editorSuggestWidget.selectedBackground#b59e7a65
  • focusBorder#FFFFFF00
  • input.background#2A343E
  • input.border#B59E7A
  • list.activeSelectionBackground#B59E7A
  • list.dropBackground#63878a1a
  • list.focusBackground#b59e7aa4
  • list.highlightForeground#bdb395
  • list.hoverBackground#b59e7a65
  • list.inactiveSelectionBackground#b59e7aa4
  • menu.border#B59E7A
  • menu.foreground#ccc
  • menu.selectionBackground#b59e7a65
  • panel.border#B59E7A
  • panel.dropBackground#63878a1a
  • panelSection.dropBackground#63878a1a
  • panelTitle.activeForeground#bdb395
  • panelTitle.inactiveForeground#ccc
  • peekView.border#B59E7A
  • peekViewEditor.background#0c141f
  • peekViewEditor.matchHighlightBackground#63878a8e
  • peekViewResult.background#0c141f
  • peekViewResult.selectionBackground#B59E7A
  • quickInput.list.focusBackground#b59e7aa4
  • quickInputList.focusBackground#b59e7aa4
  • scrollbarSlider.background#b59e7aa4
  • scrollbarSlider.hoverBackground#B59E7A
  • sideBar.background#042327
  • sideBar.dropBackground#63878a1a
  • sideBar.foreground#CCC
  • sideBarSectionHeader.background#B59E7A
  • sideBarSectionHeader.foreground#000000
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#B59E7A
  • statusBar.border#B59E7A
  • statusBar.debuggingBorder#B59E7A
  • statusBar.foreground#000
  • statusBar.noFolderBackground#B59E7A
  • tab.activeBackground#63878a1a
  • tab.activeForeground#FFF
  • tab.border#B59E7A
  • tab.hoverBackground#b59e7aa4
  • tab.inactiveBackground#042327
  • tab.inactiveForeground#CCC
  • tab.unfocusedActiveBackground#b59e7a65
  • tab.unfocusedActiveForeground#cccccc94
  • titleBar.activeBackground#052c31
  • titleBar.border#B59E7A
  • titleBar.inactiveBackground#0c141f
  • window.activeBorder#B59E7A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.other, keyword.control, storage.type.class.js, keyword.control.module.js, storage.type.extends.js, variable.language.this.js, keyword.control.switch.js, keyword.control.loop.js, keyword.control.conditional.js, keyword.control.flow.js, keyword.operator.accessor.js, keyword.other.important.css, keyword.control.at-rule.media.scss, entity.name.tag.reference.scss, meta.class.python, storage.type.function.python, keyword.control.flow.python, storage.type.function.js, keyword.control.export.ts, keyword.control.flow.ts, keyword.control.from.ts, keyword.control.import.ts, storage.type.class.ts, keyword.control.loop.ts, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.other.special-method.ruby, keyword.control.def.ruby, markup.heading, keyword.other.import.java, keyword.other.package.java, storage.modifier.java, storage.modifier.extends.java, storage.modifier.implements.java, storage.modifier.cs, storage.modifier.js, storage.modifier.dart, keyword.declaration.dart, keyword.package.go, keyword.import.go, keyword.fsharp, variable.parameter.function-call.python#9DE3C0—
binding.fsharp, support.function, meta.function-call, entity.name.function, support.function.misc.scss, meta.method.declaration.ts, entity.name.function.method.js#ebe9e9—
constant.numeric#ffffff—
meta.brace, punctuation, punctuation.bracket, punctuation.section, punctuation.separator, punctuation.comma.dart, punctuation.terminator, punctuation.definition, punctuation.parenthesis, meta.delimiter.comma.js, meta.brace.curly.litobj.js, punctuation.definition.tag, puncatuation.other.comma.go, punctuation.section.embedded, punctuation.definition.string, punctuation.definition.tag.jsx, punctuation.definition.tag.end, punctuation.definition.markdown, punctuation.terminator.rule.css, punctuation.definition.block.ts, punctuation.definition.tag.html, punctuation.section.class.end.js, punctuation.definition.tag.begin, punctuation.squarebracket.open.cs, punctuation.separator.dict.python, punctuation.section.function.scss, punctuation.section.class.begin.js, punctuation.section.array.end.ruby, punctuation.separator.key-value.js, meta.method-call.with-arguments.js, punctuation.section.scope.end.ruby, punctuation.squarebracket.close.cs, punctuation.separator.key-value.css, punctuation.definition.constant.css, punctuation.section.array.begin.ruby, punctuation.section.scope.begin.ruby, punctuation.definition.string.end.js, punctuation.definition.parameters.ruby, punctuation.definition.string.begin.js, punctuation.section.class.begin.python, storage.modifier.array.bracket.square.c, punctuation.separator.parameters.python, punctuation.section.group.end.powershell, punctuation.definition.parameters.end.ts, punctuation.section.braces.end.powershell, punctuation.section.function.begin.python, punctuation.definition.parameters.begin.ts, punctuation.section.bracket.end.powershell, punctuation.section.group.begin.powershell, punctuation.section.braces.begin.powershell, punctuation.definition.parameters.end.python, punctuation.definition.typeparameters.end.cs, punctuation.section.bracket.begin.powershell, punctuation.definition.arguments.begin.python, punctuation.definition.parameters.begin.python, punctuation.definition.typeparameters.begin.cs, punctuation.section.block.begin.bracket.curly.c, punctuation.definition.map.begin.bracket.round.scss, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.parameters.end.bracket.round.java, punctuation.section.property-list.begin.bracket.curly.css, punctuation.definition.parameters.begin.bracket.round.java#867368—
keyword.operator, meta.decorator.ts, entity.name.type.ts, punctuation.dot.dart, keyword.symbol.fsharp, punctuation.accessor.ts, punctuation.accessor.cs, keyword.operator.logical, meta.tag.inline.any.html, punctuation.separator.java, keyword.operator.comparison, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.ternary.js, keyword.operator.other.ruby, keyword.operator.logical.js, punctuation.other.period.go, keyword.operator.increment.ts, keyword.operator.increment.js, storage.type.function.arrow.js, storage.type.function.arrow.ts, keyword.operator.relational.js, keyword.operator.relational.ts, keyword.operator.arithmetic.js, keyword.operator.assignment.js, storage.type.function.arrow.tsx, keyword.operator.logical.python, punctuation.separator.period.java, punctuation.separator.method.ruby, keyword.operator.assignment.python, keyword.operator.arithmetic.python, keyword.operator.increment-decrement.java#74dfc4—
invalid.illegal#FF0000—
meta.function, storage.type.function, string meta.method-call, string variable.other, variable.other.object, meta.function-call, support.function#bdb395—
comment, punctuation.definition.comment#31B72C—
keyword.control, keyword.operator.logical, keyword.operator.new#CCC—
variable.name, entity.name.variable.parameter#A5B5BC—
storage.type, keyword.type, meta.return-type#9DE3C0—
string#2ca198—
variable.parameter, entity.name.variable#CBE0F5—
constant.language#70c5bf—
kalm by KarlMogensen - VS Code Theme