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#AD4138
  • activityBar.activeBorder#F5E2D0
  • activityBar.activeFocusBorder#f5f2e2
  • activityBar.background#070000
  • activityBar.border#323232
  • activityBar.dropBorder#e7c2a1ff
  • activityBar.foreground#F5E2D0
  • activityBar.inactiveForeground#AD4138
  • activityBarBadge.background#F5E2D0
  • activityBarBadge.foreground#270000
  • badge.background#F5E2D0
  • badge.foreground#270000
  • breadcrumb.activeSelectionForeground#991224
  • breadcrumb.background#C7AB9F
  • breadcrumb.focusForeground#671010
  • breadcrumb.foreground#270000
  • breadcrumbPicker.background#EAE7DC
  • button.background#660C18
  • button.foreground#F5E2D0
  • button.hoverBackground#991224
  • checkbox.background#991224
  • checkbox.border#170000
  • checkbox.foreground#F5E2D0
  • debugConsole.errorForeground#C86F6F
  • debugConsole.infoForeground#f5f2e2
  • debugConsole.sourceForeground#2FEDF7
  • debugConsole.warningForeground#F7D92F
  • debugConsoleInputIcon.foreground#ea6050
  • debugIcon.pauseForeground#2DE3EB
  • debugIcon.stepBackForeground#2DE3EB
  • debugIcon.stepIntoForeground#2DE3EB
  • debugIcon.stepOutForeground#2DE3EB
  • debugIcon.stepOverForeground#2DE3EB
  • debugIcon.stopForeground#CF7070
  • debugToolBar.background#170024
  • descriptionForeground#FFFD63
  • disabledForeground#EAE7DC
  • dropdown.background#f5f2e2
  • dropdown.border#991224
  • dropdown.foreground#120D05
  • dropdown.listBackground#f5f2e2
  • editor.background#f5f2e2
  • editor.findMatchBackground#ddddef
  • editor.findMatchBorder#670000a0
  • editor.findMatchHighlightBackground#0000f740
  • editor.findMatchHighlightBorder#505EFA
  • editor.foreground#120D05
  • editor.hoverHighlightBackground#0000e724
  • editor.inactiveSelectionBackground#e7000024
  • editor.lineHighlightBackground#EDE1E1
  • editor.lineHighlightBorder#E6B6B6
  • editor.rangeHighlightBackground#E1E1Ed30
  • editor.rangeHighlightBorder#B6E6B6
  • editor.selectionBackground#505EFA50
  • editor.selectionForeground#270000
  • editor.selectionHighlightBackground#f7c7d750
  • editor.selectionHighlightBorder#991224
  • editor.snippetFinalTabstopHighlightBackground#e7c2a1
  • editor.snippetFinalTabstopHighlightBorder#991224
  • editor.snippetTabstopHighlightBackground#F5E2D0
  • editor.snippetTabstopHighlightBorder#8f2422
  • editor.wordHighlightBackground#7878E530
  • editor.wordHighlightBorder#000021
  • editor.wordHighlightStrongBackground#5555E030
  • editor.wordHighlightStrongBorder#000039
  • editorBracketMatch.background#DCCAFA
  • editorBracketMatch.border#672121
  • editorCodeLens.foreground#413939
  • editorCursor.background#EAE7DC
  • editorCursor.foreground#170000
  • editorError.foreground#b80707
  • editorGhostText.background#ECE9D9
  • editorGhostText.foreground#64635C
  • editorGroup.border#b47010
  • editorGroup.dropBackground#fe602020
  • editorGroup.emptyBackground#762E2E
  • editorGroup.focusedEmptyBorder#370000
  • editorGroupHeader.noTabsBackground#AA3731
  • editorGroupHeader.tabsBackground#595050
  • editorGroupHeader.tabsBorder#070000
  • editorGutter.addedBackground#f9fc45
  • editorGutter.background#270301
  • editorGutter.deletedBackground#a76767
  • editorGutter.modifiedBackground#67a767
  • editorHoverWidget.background#EAE7DC
  • editorHoverWidget.border#270000
  • editorHoverWidget.foreground#170000
  • editorHoverWidget.statusBarBackground#FAF9F4
  • editorIndentGuide.activeBackground1#A73214
  • editorIndentGuide.background1#D7B6B0
  • editorInfo.foreground#009200
  • editorLineNumber.activeForeground#f7c9b9
  • editorLineNumber.foreground#c0c0af
  • editorLink.activeForeground#2222a6
  • editorMarkerNavigation.background#F5E2F0
  • editorOverviewRuler.addedForeground#c0c000
  • editorOverviewRuler.border#370000
  • editorOverviewRuler.bracketMatchForeground#6767fe
  • editorOverviewRuler.infoForeground#273794
  • editorOverviewRuler.modifiedForeground#179307
  • editorOverviewRuler.rangeHighlightForeground#000000c2
  • editorOverviewRuler.selectionHighlightForeground#000000c2
  • editorOverviewRuler.warningForeground#c28700
  • editorOverviewRuler.wordHighlightForeground#272700c2
  • editorPane.background#170000
  • editorRuler.foreground#070707
  • editorSuggestWidget.background#170000
  • editorSuggestWidget.border#170000
  • editorSuggestWidget.foreground#EAE7DC
  • editorSuggestWidget.selectedBackground#EEDB98
  • editorSuggestWidget.selectedForeground#270000
  • editorWarning.foreground#00578e
  • editorWhitespace.foreground#070034
  • editorWidget.background#47423B
  • editorWidget.border#170000
  • editorWidget.foreground#D4C3AE
  • editorWidget.resizeBorder#272004
  • errorForeground#ea6050
  • extensionBadge.remoteBackground#070707
  • extensionBadge.remoteForeground#AAA79C
  • extensionButton.prominentBackground#8C2A11
  • extensionButton.prominentForeground#EAE7DC
  • extensionButton.prominentHoverBackground#a68787
  • foreground#7f7f7f
  • gitDecoration.addedResourceForeground#A0F2AE
  • gitDecoration.conflictingResourceForeground#F73A25
  • gitDecoration.deletedResourceForeground#907070
  • gitDecoration.ignoredResourceForeground#a0a0b0
  • gitDecoration.modifiedResourceForeground#FFDE66
  • gitDecoration.submoduleResourceForeground#EAE7DC
  • gitDecoration.untrackedResourceForeground#00A8FC
  • icon.foreground#f7e7cd
  • input.background#370000
  • input.border#ea6050
  • input.foreground#f7e7cd
  • input.placeholderForeground#EFDFC6
  • inputOption.activeBackground#EAE7DC
  • inputOption.activeBorder#270000
  • inputOption.activeForeground#170000
  • keybindingLabel.background#D0EDF5
  • keybindingLabel.border#8C2A11
  • keybindingLabel.bottomBorder#f2a0b0
  • keybindingLabel.foreground#270000
  • list.activeSelectionBackground#52211C
  • list.activeSelectionForeground#2DE3EB
  • list.activeSelectionIconForeground#f2a0b0
  • list.deemphasizedForeground#143A6B
  • list.dropBackground#ea6050
  • list.errorForeground#f2a0b0
  • list.focusBackground#6B2B24
  • list.focusForeground#F76454
  • list.focusHighlightForeground#EAE7DC
  • list.highlightForeground#EAE7DC
  • list.hoverBackground#2363B8
  • list.hoverForeground#c4cedb
  • list.inactiveFocusBackground#544641
  • list.inactiveSelectionBackground#143A6B
  • list.inactiveSelectionForeground#d7d7d7
  • list.inactiveSelectionIconForeground#D4C3AE
  • list.invalidItemForeground#c0c0c0
  • list.warningForeground#dada75
  • menu.background#150000
  • menu.border#d7d7d7
  • menu.foreground#f5f2e2
  • menu.selectionBackground#f5f2e2
  • menu.selectionBorder#360000
  • menu.selectionForeground#270000
  • menu.separatorBackground#EDE1E1
  • menubar.selectionBackground#572323
  • menubar.selectionBorder#572323
  • menubar.selectionForeground#f5f5f2
  • minimap.findMatchHighlight#171717ef
  • notebook.cellBorderColor#E65747
  • notebook.cellEditorBackground#f5f2e2
  • notebook.cellHoverBackground#9e4036
  • notebook.cellToolbarSeparator#E65747
  • notebook.editorBackground#270000
  • notebook.focusedCellBackground#5E2620
  • notificationCenter.border#370000
  • notificationCenterHeader.background#ede1e1
  • notificationCenterHeader.foreground#270000
  • notificationLink.foreground#001183
  • notifications.background#E6E8FF
  • notifications.border#E65747
  • notifications.foreground#170000
  • notificationsErrorIcon.foreground#80251B
  • notificationsInfoIcon.foreground#3FCC82
  • notificationsWarningIcon.foreground#CCBA54
  • notificationToast.border#370000
  • outputView.background#f5f2e2
  • panel.background#262626
  • panel.border#E65747
  • panel.dropBorder#c74337
  • panelInput.border#c78f8f
  • panelTitle.activeBorder#270000
  • panelTitle.activeForeground#f7e2c1
  • panelTitle.border#CAC8BA
  • panelTitle.inactiveForeground#C8C8C8
  • peekView.border#170000
  • peekViewEditor.background#f7e2c1
  • peekViewEditor.matchHighlightBackground#f5f2e2
  • peekViewEditor.matchHighlightBorder#270000
  • peekViewEditorGutter.background#670202
  • peekViewResult.background#f9d4b3
  • peekViewResult.fileForeground#414141
  • peekViewResult.lineForeground#050505
  • peekViewResult.matchHighlightBackground#670202
  • peekViewResult.selectionBackground#c5c5b2
  • peekViewResult.selectionForeground#170000
  • peekViewTitle.background#e7c2a1
  • peekViewTitleDescription.foreground#170000
  • peekViewTitleLabel.foreground#670202
  • pickerGroup.border#383814
  • pickerGroup.foreground#170000
  • quickInput.background#120D05
  • quickInput.foreground#f5f2e2
  • quickInputList.focusBackground#120D05
  • quickInputList.focusForeground#f5f2e2
  • quickInputTitle.background#120D05
  • scrollbar.shadow#070707
  • scrollbarSlider.activeBackground#af8060
  • scrollbarSlider.background#7a5b5bc2
  • scrollbarSlider.hoverBackground#cfa080d0
  • selection.background#2363B8
  • settings.checkboxBackground#c5c2b2
  • settings.checkboxBorder#878787
  • settings.checkboxForeground#170000
  • settings.dropdownBackground#c5c2b2
  • settings.dropdownBorder#878787
  • settings.dropdownForeground#170000
  • settings.dropdownListBorder#878787
  • settings.headerForeground#c70000
  • settings.modifiedItemIndicator#EF3737
  • settings.numberInputBackground#c5c2b2
  • settings.numberInputBorder#878787
  • settings.numberInputForeground#170000
  • settings.textInputBackground#c5c2b2
  • settings.textInputBorder#878787
  • settings.textInputForeground#170000
  • sideBar.background#3B1717
  • sideBar.border#f7e2c1
  • sideBar.dropBackground#07070780
  • sideBar.foreground#f5f2fc
  • sideBarSectionHeader.background#762E2E
  • sideBarSectionHeader.border#EFDBBA
  • sideBarSectionHeader.foreground#EFDBBA
  • sideBarTitle.background#5D2525
  • sideBarTitle.foreground#e5e2d2
  • statusBar.background#220000
  • statusBar.border#150000
  • statusBar.debuggingBackground#cf7070
  • statusBar.debuggingBorder#e70000
  • statusBar.debuggingForeground#170000
  • statusBar.foreground#f5f2e2
  • statusBar.noFolderBackground#220000
  • statusBar.noFolderBorder#170000
  • statusBar.noFolderForeground#e5e2d2
  • statusBarItem.activeBackground#F5E2D0
  • statusBarItem.hoverBackground#c72424
  • statusBarItem.prominentBackground#c72424
  • statusBarItem.prominentForeground#f5f2e2
  • statusBarItem.prominentHoverBackground#d73636
  • statusBarItem.remoteBackground#220000
  • statusBarItem.remoteForeground#F5E2D0
  • tab.activeBackground#85362D
  • tab.activeBorder#372714
  • tab.activeBorderTop#372714
  • tab.activeForeground#f5f2e2
  • tab.border#270000
  • tab.hoverBackground#AB453A
  • tab.hoverBorder#d7c7b4
  • tab.inactiveBackground#52211c
  • tab.inactiveForeground#b5b3a7
  • tab.unfocusedActiveBackground#4D4546
  • tab.unfocusedActiveBorder#372714
  • tab.unfocusedActiveBorderTop#474545
  • tab.unfocusedActiveForeground#e5e2d2
  • tab.unfocusedHoverBackground#8C7E80
  • tab.unfocusedHoverBorder#473724
  • tab.unfocusedInactiveForeground#e5e2d2
  • terminal.background#170505
  • terminal.foreground#ffffff
  • textLink.activeForeground#944343
  • textLink.foreground#5765FA
  • titleBar.activeBackground#873636
  • titleBar.activeForeground#f5f2e2
  • titleBar.border#c7b7a4
  • titleBar.inactiveBackground#c7b7a4
  • titleBar.inactiveForeground#270000
  • welcomePage.background#170000
  • welcomePage.progress.background#d7c7b4
  • welcomePage.progress.foreground#d73636
  • welcomePage.tileBackground#F5E2D0
  • widget.shadow#070707

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#40752Ditalic
comment.block.preprocessor#386627
comment.documentation, comment.block.documentation#437A2F
invalid.illegal#A05E57
keyword.operator#6B6A63
keyword, storage#5143F0
storage.type, support.type#575650
constant.language, support.constant, variable.language#2D754E
variable, support.variable#170034bold
entity.name.function, support.function#5143F0bold
entity.name.type, entity.other.inherited-class, support.class#2D7536bold
entity.name.exception#790000
entity.name.sectionbold
constant.numeric, constant.character, constant#362E22
string#75412D
constant.character.escape#484848
string.regexp#8F9CC9
constant.other.symbol#AB6526
punctuation#070702
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#787878
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#5E7491bold
entity.name.tag#105A05bold
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#B14615italic
constant.character.entity, punctuation.definition.entity#874F1F
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#4F627Abold
meta.property-name, support.type.property-name#AA3731
meta.property-value, meta.property-value constant.other, support.constant.property-value#105A05
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#660000
markup.inserted#000000
meta.link#3F6ECC
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#4F627A
markup.list#3F6ECC
markup.bold, markup.italic#105A05
markup.inline.raw#AB3E14
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
CrimZen by Eric Siron - VS Code Theme