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.activeBackground#40D0FF14
  • activityBar.activeBorder#40D0FF
  • activityBar.activeFocusBorder#ffbb55
  • activityBar.background#182034
  • activityBar.border#110000cc
  • activityBar.dropBorder#dd3399
  • activityBar.foreground#40D0FF
  • activityBar.inactiveForeground#587a9c
  • activityBarBadge.background#184888
  • activityBarBadge.foreground#eeeeee
  • activityBarTop.activeBackground#11111100
  • activityBarTop.activeBorder#55bbff
  • activityBarTop.background#11111100
  • activityBarTop.dropBorder#e7e7e7
  • activityBarTop.foreground#e7e7e7
  • activityBarTop.inactiveForeground#587a9c
  • activityErrorBadge.background#80181099
  • activityErrorBadge.foreground#ffaaa0
  • activityWarningBadge.background#78601899
  • activityWarningBadge.foreground#f8da82
  • badge.background#184888
  • badge.foreground#eeeeee
  • breadcrumb.activeSelectionForeground#e1e1e6
  • breadcrumb.background#131B2D
  • breadcrumb.focusForeground#ffbb55
  • breadcrumb.foreground#587a9c
  • breadcrumbPicker.background#15121e
  • contrastBorder#100a00
  • debugExceptionWidget.background#281218
  • debugExceptionWidget.border#800818
  • debugToolBar.background#184888
  • debugView.exceptionLabelBackground#800000
  • debugView.exceptionLabelForeground#EEEEEE
  • dropdown.background#0B1528
  • dropdown.border#CCEEFF1C
  • dropdown.listBackground#161A26
  • editor.background#1D2025
  • editor.findMatchBackground#e89e6480
  • editor.findMatchHighlightBackground#e1e1e640
  • editor.findRangeHighlightBackground#44475a75
  • editor.foldBackground#000a2040
  • editor.foreground#eeffff
  • editor.hoverHighlightBackground#ffc40040
  • editor.lineHighlightBackground#00113322
  • editor.lineHighlightBorder#11000077
  • editor.rangeHighlightBackground#78d1e115
  • editor.selectionBackground#41414d
  • editor.selectionHighlightBackground#25213188
  • editor.snippetFinalTabstopHighlightBackground#161A26
  • editor.snippetFinalTabstopHighlightBorder#67e480
  • editor.snippetTabstopHighlightBackground#161A26
  • editor.snippetTabstopHighlightBorder#485e88
  • editor.wordHighlightBackground#617ea350
  • editor.wordHighlightStrongBackground#67e48050
  • editorCodeLens.foreground#485e88
  • editorError.background#FF444444
  • editorError.foreground#e96379
  • editorGroup.border#41414d
  • editorGroup.dropBackground#44475a70
  • editorGroupHeader.border#161A25
  • editorGroupHeader.noTabsBackground#1D2025
  • editorGroupHeader.tabsBackground#1D2025
  • editorGroupHeader.tabsBorder#11000070
  • editorGutter.addedBackground#67e48080
  • editorGutter.deletedBackground#e9637980
  • editorGutter.modifiedBackground#617ea380
  • editorHoverWidget.background#161A26
  • editorHoverWidget.border#4b6494
  • editorLineNumber.activeForeground#f0b058
  • editorLineNumber.foreground#4d709d
  • editorLink.activeForeground#55d777
  • editorMarkerNavigation.background#161A26
  • editorOverviewRuler.addedForeground#67e48080
  • editorOverviewRuler.border#110000cc
  • editorOverviewRuler.currentContentForeground#67e480
  • editorOverviewRuler.deletedForeground#e9637980
  • editorOverviewRuler.errorForeground#e9637980
  • editorOverviewRuler.incomingContentForeground#78d1e1
  • editorOverviewRuler.infoForeground#617ea380
  • editorOverviewRuler.modifiedForeground#617ea380
  • editorOverviewRuler.selectionHighlightForeground#e89e6477
  • editorOverviewRuler.warningForeground#e89e6480
  • editorOverviewRuler.wordHighlightForeground#617ea377
  • editorOverviewRuler.wordHighlightStrongForeground#67e48077
  • editorRuler.foreground#ffffff1a
  • editorStickyScroll.background#161A25
  • editorStickyScroll.border#00000000
  • editorStickyScroll.shadow#0c040280
  • editorSuggestWidget.background#161A26
  • editorSuggestWidget.foreground#e1e1e6
  • editorSuggestWidget.selectedBackground#41414d
  • editorWarning.foreground#617ea3
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#161A26
  • focusBorder#f0b050
  • foreground#c4c6cc
  • gitDecoration.addedResourceForeground#80C450
  • gitDecoration.conflictingResourceForeground#e4676b
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#708090
  • gitDecoration.modifiedResourceForeground#CCB070
  • gitDecoration.renamedResourceForeground#80C080
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#CCB070
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#70AA88
  • icon.foreground#9fd2ea
  • input.background#0B1528
  • input.border#CCEEFF1C
  • input.placeholderForeground#816f44
  • menu.background#161A26
  • menu.border#110000
  • menu.foreground#c2c2c2
  • menu.selectionBackground#00386c
  • menu.selectionBorder#f0b050aa
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#50505050
  • menubar.selectionBackground#5a5d5e50
  • menubar.selectionForeground#e1e1e6
  • panel.background#1D2025
  • panel.border#110000cc
  • panelSection.dropBackground#b0ff5555
  • panelTitle.activeBorder#55bbff
  • panelTitle.activeForeground#cccccc
  • panelTitle.inactiveForeground#587a9c
  • scrollbar.shadow#0c0402
  • selection.background#400000
  • settings.checkboxBackground#13111b
  • settings.checkboxBorder#15121e
  • settings.checkboxForeground#e1e1e6
  • settings.dropdownBackground#13111b
  • settings.dropdownBorder#15121e
  • settings.dropdownForeground#e1e1e6
  • settings.focusedRowBackground#ffbb55
  • settings.focusedRowBorder#ffbb55
  • settings.headerForeground#e1e1e6
  • settings.modifiedItemIndicator#e89e64
  • settings.numberInputBackground#13111b
  • settings.numberInputBorder#15121e
  • settings.numberInputForeground#e1e1e6
  • settings.textInputBackground#13111b
  • settings.textInputBorder#15121e
  • settings.textInputForeground#e1e1e6
  • sideBar.background#161A25
  • sideBar.border#110000cc
  • sideBar.dropBackground#b0ff5555
  • sideBar.foreground#aaaaaa
  • sideBarActivityBarTop.border#110000cc
  • sideBarSectionHeader.background#161A25
  • sideBarSectionHeader.border#114466
  • sideBarSectionHeader.foreground#b0b0b0
  • sideBarStickyScroll.background#161A25
  • sideBarStickyScroll.shadow#000000
  • sideBarTitle.background#161A25
  • sideBarTitle.foreground#e1e1e6
  • statusBar.background#182034
  • statusBar.border#50a0ff20
  • statusBar.debuggingBackground#161A26
  • statusBar.debuggingForeground#ADDD90
  • statusBar.focusBorder#ffbb55
  • statusBar.foreground#CCEEFF
  • statusBar.noFolderBackground#161A26
  • statusBar.noFolderForeground#e1e1e6
  • statusBarItem.errorBackground#88000044
  • statusBarItem.errorForeground#e84850
  • statusBarItem.focusBorder#ffbb55
  • statusBarItem.offlineHoverForeground#768390
  • statusBarItem.prominentBackground#e96379
  • statusBarItem.prominentHoverBackground#e89e64
  • statusBarItem.remoteBackground#184888
  • statusBarItem.remoteForeground#FFFFFF
  • statusBarItem.remoteHoverBackground#0000CC88
  • statusBarItem.remoteHoverForeground#CCFF00
  • tab.activeBackground#131B2D
  • tab.activeBorder#131B2D
  • tab.activeBorderTop#55bbff
  • tab.activeForeground#dddddd
  • tab.border#110000cc
  • tab.dragAndDropBorder#dd3399
  • tab.inactiveBackground#161A25
  • tab.inactiveForeground#587a9c
  • tab.lastPinnedBorder#006688
  • tab.unfocusedActiveBorder#131B2D
  • tab.unfocusedActiveBorderTop#55bbffbb
  • tab.unfocusedHoverBorder#ffbb55
  • tab.unfocusedInactiveForeground#587a9c
  • terminal.ansiBlack#201b2d
  • terminal.ansiBlue#22bbff
  • terminal.ansiBrightBlack#626483
  • terminal.ansiBrightBlue#4cc4ff
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#55bbff
  • terminal.ansiBrightMagenta#988bc7
  • terminal.ansiBrightRed#ed4556
  • terminal.ansiBrightWhite#f7f7fb
  • terminal.ansiBrightYellow#e7de79
  • terminal.ansiCyan#a1efe4
  • terminal.ansiGreen#90c488
  • terminal.ansiMagenta#988bc7
  • terminal.ansiRed#ff79c6
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#e7de79
  • terminal.background#1D2025
  • terminal.dropBackground#b0ff5555
  • terminal.foreground#cccccc
  • terminal.hoverHighlightBackground#ffc40040
  • terminal.selectionBackground#5a4b8145
  • terminal.tab.activeBorder#55bbff
  • terminalCursor.background#201b2d
  • terminalCursor.foreground#e1e1e6
  • titleBar.activeBackground#1c1d20
  • titleBar.activeForeground#c2c2c2
  • titleBar.border#110000cc
  • titleBar.inactiveBackground#3c3c4e
  • titleBar.inactiveForeground#587a9c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source#B2B5BB
comment, punctuation.definition.comment#447090
comment.block.documentation entity.name.tag#446622
comment.block.documentation punctuation.definition.tag#603080
punctuation#B2B5BB
punctuation.separator.scope-resolution, punctuation.separator.dot-access, punctuation.separator.pointer-access, storage.type.function.arrow#409CFC
punctuation.separator.dot-access#409CFCbold
string.quoted, punctuation.definition.string#CC8866
constant.numeric#96C088
constant.language.true, constant.language.false, constant.language.boolean#E46699
constant.null, constant.language.null#CC5544italic
storage#409CFC
keyword#409CFC
keyword.operator, punctuation.separator.question-mark, punctuation.accessor#409CFC
variable#40C2E0
entity.name.variable#88C4E8
entity.name.type, variable.other.object, source.cpp variable.other.object.access.cpp#B2AAE4
entity.name.function, entity.name.function.call, entity.name.type.class, entity.name.type.namespace, variable.other.object#D0AF80
source.cmake#C4C4C4
source.cmake string.unquoted#CC7755
source.cmake string.quoted#C5A888
support.function.cmake, entity.name.function.cmake#60B0EE
source.cmake support.type, support.type.targetProperty.cmake, support.type.provideInfo, support.function.commandProperty.cmake#96C088
source.cmake keyword#AAA0DD
source.json#44AAFF
support.type.property-name.json#44AAFF
string.quoted.double.json, string.quoted.double.json punctuation.definition.string#BB9955
constant.numeric.json#bb5c7c