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#DDD6C1
  • activityBar.foreground#584c27
  • activityBarBadge.background#B58900
  • badge.background#B58900AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#EEE8D5
  • dropdown.border#D3AF86
  • editor.background#fdf6e3
  • editor.findMatchBackground#e0b8cf
  • editor.findMatchBorder#ffffff00
  • editor.findMatchHighlightBackground#f2ef85e0
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#e0b8cf4d
  • editor.findRangeHighlightBorder#ff0000
  • editor.foreground#586e75
  • editor.lineHighlightBackground#00000010
  • editor.selectionBackground#e0b8cf
  • editor.selectionForeground#000000
  • editor.selectionHighlightBackground#ffffff00
  • editor.selectionHighlightBorder#ffffff00
  • editor.wordHighlightBackground#f4f195e6
  • editor.wordHighlightBorder#ffffff00
  • editor.wordHighlightStrongBackground#ebeb47cc
  • editor.wordHighlightStrongBorder#ff0000
  • editorBracketMatch.background#f0ee76db
  • editorBracketMatch.border#ffffff00
  • editorCursor.background#f655b3
  • editorCursor.foreground#ff0095
  • editorError.background#ff000014
  • editorError.border#ffffff00
  • editorError.foreground#ffffff00
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#CCC4B0
  • editorIndentGuide.activeBackground#081E2580
  • editorIndentGuide.background#586E7580
  • editorInfo.background#ffff0033
  • editorInfo.border#ffffff00
  • editorInfo.foreground#ffffff00
  • editorLightBulb.foreground#ccbb00
  • editorLightBulbAutoFix.foreground#0088cc
  • editorLineNumber.activeForeground#000000
  • editorLineNumber.foreground#d7d1c1
  • editorUnnecessaryCode.border#ffffff00
  • editorUnnecessaryCode.opacity#00000090
  • editorWarning.background#ff80001f
  • editorWarning.border#ffffff00
  • editorWarning.foreground#ffffff00
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#D3AF86
  • gitDecoration.modifiedResourceForeground#bf408a
  • gitDecoration.untrackedResourceForeground#ff0095
  • input.background#DDD6C1
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • minimap.selectionHighlight#EEE8D5
  • notebook.cellEditorBackground#F7F0E0
  • panel.border#DDD6C1
  • peekView.border#B58900
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#2AA19899
  • progressBar.background#B58900
  • quickInputList.focusBackground#DFCA8866
  • scrollbarSlider.activeBackground#ac9d57
  • scrollbarSlider.background#ede4c7
  • scrollbarSlider.hoverBackground#c4b881
  • selection.background#878b9180
  • sideBar.background#EEE8D5
  • sideBarTitle.foreground#586E75
  • statusBar.background#EEE8D5
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#586E75
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • statusBarItem.remoteBackground#AC9D57
  • tab.activeBackground#FDF6E3
  • tab.activeModifiedBorder#cb4b16
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • tab.lastPinnedBorder#FDF6E3
  • terminal.ansiBlack#171b24
  • terminal.ansiBlue#6dcbfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#73d0ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#d5ff80
  • terminal.ansiBrightMagenta#dfbfff
  • terminal.ansiBrightRed#f28779
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffd173
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#87d96c
  • terminal.ansiMagenta#dabafa
  • terminal.ansiRed#ed8274
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#facc6e
  • terminal.background#1f2430
  • terminal.foreground#cccac2
  • titleBar.activeBackground#EEE8D5
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#586e75
keyword.control.import#37606c99bold
keyword.control.from#37606c99bold
variable.other.readwrite.aliasbold
constant.language.import-export-all#ff0055
meta.import.js#586e75
meta.definition.function#ff0095bold
meta.definition.method#ff0095bold
entity.name.type.alias#ff0095bold
storage.type.function#f655b3
storage.type.type#f655b3
entity.name.function.decorator#b87a9d
meta.function.decorator#b87a9d
storage.type.function.arrow.js#37606c99
storage.type.class#f655b3
meta.class.python#ff0095bold
support.function.magic.python#ff0095bold
entity.name.function.python#ff0095bold
storage.type.function.python#f655b3
variable.parameter.function-call.python#37606c99
storage.modifier#f655b3
storage.type.interface#f655b3
entity.name.type.interface.tsx#ff0095bold
entity.name.type.interface.ts#ff0095bold
keyword.control.export#f655b3
keyword.control.default#ff0095
meta.type.annotation.tsx#37606c99
support.type.primitive.tsxbold
meta.field.declaration.tsx#f655b3
meta.definition.variable#bf408a
entity.name.tag#8f3d6dbold
punctuation.definition.tag.begin.tsx#8f3d6dbold
punctuation.definition.tag.begin.html#8f3d6dbold
punctuation.definition.tag.end.tsx#8f3d6dbold
punctuation.definition.tag.end.html#8f3d6dbold
entity.other.attribute-name#b87a9e
string.quoted.double.html#7a5269
string.quoted.double.tsx#7a5269
punctuation.definition.block#ff0055
variable.parameter.js#bf408a
variable.other.constant.object.jsnormal
keyword.control.flow#586e75bold
keyword.control.loop#586e75bold
keyword.control.conditional#586e75bold
keyword.control.switch#586e75bold
keyword.operator.logical#586e75bold
keyword.operator.ternary#586e75bold
comment.line#339991
comment.line.number-sign#339991
comment.block#1fada2
comment.block.documentation.js#cc66a2
string.quoted.double#54c20a
string.quoted.single#54c20a
punctuation.definition.string.template#ff0055
punctuation.definition.template-expression#ff0055
meta.template.expression#89eb47
string.template#54c20a
string.interpolated#54c20a
constant.character.format.placeholder.other.python#ff0055
meta.fstring.python#54c20a
storage.type.string.python#ff0055
meta.brace.round#37606c99
punctuation.accessor#37606c99
punctuation.separator.key-value#37606c99
keyword.operator.assignment#37606c99
keyword.operator.comparison#37606c99
punctuation.definition.string.begin#37606c99
punctuation.definition.string.end#37606c99
meta.brace.square.js#37606c99
keyword.operator.rest.js#37606c99
keyword.operator.spread.js#37606c99
meta.object-literal.key#54c20a
meta.definition.property#54c20a
mollbe Theme by Benjamin Mollenhauer - VS Code Theme