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#B58900
  • activityBar.background#DDD6C1
  • activityBar.border#D3AF86
  • activityBar.foreground#584C27
  • activityBar.inactiveForeground#586E75AA
  • activityBarBadge.background#B58900
  • activityBarBadge.foreground#FDF6E3
  • badge.background#B58900AA
  • badge.foreground#FDF6E3
  • button.background#AC9D57
  • button.foreground#FDF6E3
  • button.hoverBackground#97894E
  • button.secondaryBackground#D1CBB8
  • button.secondaryForeground#586E75
  • commandCenter.activeBackground#D1CBB8
  • commandCenter.activeForeground#584C27
  • commandCenter.background#DDD6C1
  • commandCenter.border#D3AF86
  • commandCenter.foreground#586E75
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • descriptionForeground#586E75
  • diffEditor.insertedTextBackground#85990026
  • diffEditor.removedTextBackground#DC322F1F
  • dropdown.background#EEE8D5
  • dropdown.border#D3AF86
  • dropdown.foreground#586E75
  • editor.background#FDF6E3
  • editor.findMatchBackground#B5890040
  • editor.findMatchHighlightBackground#B589001F
  • editor.foreground#657B83
  • editor.inactiveSelectionBackground#EEE8D580
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#EEE8D5
  • editor.selectionHighlightBackground#B589001A
  • editor.wordHighlightBackground#268BD21F
  • editor.wordHighlightStrongBackground#CB4B161F
  • editorBracketPairGuide.activeBackground1#586E7580
  • editorBracketPairGuide.activeBackground2#268BD266
  • editorBracketPairGuide.background1#D3CBB7
  • editorBracketPairGuide.background2#DDD6C1
  • editorCursor.foreground#657B83
  • editorError.foreground#DC322F
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.noTabsBackground#F7F0E0
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#CCC4B0
  • editorHoverWidget.border#B49471
  • editorIndentGuide.activeBackground1#586E7580
  • editorIndentGuide.background1#D3CBB7
  • editorInfo.foreground#268BD2
  • editorInlayHint.background#EEE8D5
  • editorInlayHint.foreground#93A1A1
  • editorInlayHint.parameterForeground#B58900
  • editorInlayHint.typeForeground#268BD2
  • editorLineNumber.activeForeground#567983
  • editorLineNumber.foreground#93A1A1
  • editorStickyScroll.background#F7F0E0
  • editorStickyScroll.border#DDD6C1
  • editorSuggestWidget.background#EEE8D5
  • editorSuggestWidget.border#D3AF86
  • editorSuggestWidget.foreground#586E75
  • editorSuggestWidget.highlightForeground#268BD2
  • editorSuggestWidget.selectedBackground#DFCA8866
  • editorWarning.foreground#B58900
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • editorWidget.border#D3AF86
  • errorForeground#DC322F
  • focusBorder#B49471
  • foreground#657B83
  • gitDecoration.addedResourceForeground#859900
  • gitDecoration.deletedResourceForeground#DC322F
  • gitDecoration.ignoredResourceForeground#93A1A1
  • gitDecoration.modifiedResourceForeground#B58900
  • gitDecoration.untrackedResourceForeground#2AA198
  • icon.foreground#657B83
  • input.background#DDD6C1
  • input.border#D3AF86
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.focusBackground#DFCA8866
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • minimap.selectionHighlight#EEE8D5
  • notebook.cellBorderColor#DDD6C1
  • notebook.cellEditorBackground#F7F0E0
  • notebook.focusedCellBorder#D3AF86
  • notificationCenterHeader.background#D9D2C2
  • notifications.background#EEE8D5
  • notifications.foreground#586E75
  • panel.background#F7F0E0
  • panel.border#DDD6C1
  • panelTitle.activeBorder#B58900
  • panelTitle.activeForeground#586E75
  • panelTitle.inactiveForeground#93A1A1
  • peekView.border#B58900
  • peekViewEditor.background#FFFBF2
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • ports.iconRunningProcessForeground#2AA19899
  • progressBar.background#B58900
  • quickInput.background#EEE8D5
  • quickInput.foreground#586E75
  • quickInputTitle.background#D9D2C2
  • selection.background#878B9180
  • sideBar.background#EEE8D5
  • sideBar.border#DDD6C1
  • sideBar.foreground#586E75
  • sideBarSectionHeader.background#E7E1D0
  • sideBarSectionHeader.foreground#586E75
  • sideBarTitle.foreground#586E75
  • statusBar.background#EEE8D5
  • statusBar.border#DDD6C1
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#586E75
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.hoverBackground#DDD6C199
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.remoteBackground#AC9D57
  • tab.activeBackground#FDF6E3
  • tab.activeBorderTop#B58900
  • tab.activeForeground#586E75
  • tab.activeModifiedBorder#CB4B16
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268BD2
  • terminal.ansiBrightBlack#002B36
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93A1A1
  • terminal.ansiBrightGreen#586E75
  • terminal.ansiBrightMagenta#6C71C4
  • terminal.ansiBrightRed#CB4B16
  • terminal.ansiBrightWhite#FDF6E3
  • terminal.ansiBrightYellow#657B83
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#D33682
  • terminal.ansiRed#DC322F
  • terminal.ansiWhite#EEE8D5
  • terminal.ansiYellow#B58900
  • terminal.background#FDF6E3
  • terminal.border#DDD6C1
  • terminal.foreground#657B83
  • terminal.selectionBackground#EEE8D5
  • terminal.tab.activeBorder#B58900
  • terminalCursor.foreground#657B83
  • testing.iconErrored#CB4B16
  • testing.iconFailed#DC322F
  • testing.iconPassed#859900
  • testing.iconQueued#B58900
  • testing.iconRunning#268BD2
  • testing.iconSkipped#93A1A1
  • textLink.foreground#268BD2
  • titleBar.activeBackground#EEE8D5
  • titleBar.activeForeground#586E75
  • titleBar.border#DDD6C1
  • titleBar.inactiveBackground#E7E1D0
  • titleBar.inactiveForeground#93A1A1
  • walkThrough.embeddedEditorBackground#00000014
  • widget.shadow#002B361A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#657B83
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown#657B83
comment#93A1A1italic
string#2AA198
support.type.property-name.json, support.type.property-name.json.comments#859900
string.regexp#DC322F
constant.numeric#D33682
variable.language, variable.other#268BD2
keyword#859900
storage#586E75bold
storage.type#033496italic
entity.name.class, entity.name.type, entity.name.scope-resolution#CB4B16underline
entity.name.function, support.function#268BD2
constant.language, meta.preprocessor#B58900
support.function.construct, keyword.other.new#CB4B16
constant.character, constant.other#CB4B16
entity.other.inherited-class#6C71C4
variable.parameter#FD971Fitalic
entity.name.tag#268BD2
punctuation.definition.tag, entity.other.attribute-name#93A1A1
invalid#DC322F
meta.diff, meta.diff.header#268BD2italic
markup.deleted#DC322F
markup.changed#CB4B16
markup.inserted#859900
markup.list#B58900
markup.bold, markup.italic#D33682
markup.inline.raw#2AA198
markup.heading, markup.heading.setext#268BD2bold
entity.name.type.namespace#CB4B16
Solarized (Abydos) by fallenwood - VS Code Theme