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#55BBFF11
  • activityBar.activeBorder#55BBFF
  • activityBar.activeFocusBorder#FFBB55
  • activityBar.background#222227
  • activityBar.border#120A0ACC
  • activityBar.dropBorder#DD3399
  • activityBar.foreground#55BBFF
  • activityBar.inactiveForeground#587A9C
  • activityBarBadge.background#344CAC
  • 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#344CAC
  • badge.foreground#EEEEEE
  • breadcrumb.activeSelectionForeground#e1e1e6
  • breadcrumb.background#1B1D24
  • breadcrumb.focusForeground#FFBB55
  • breadcrumb.foreground#587A9C
  • breadcrumbPicker.background#15121e
  • contrastBorder#100A00
  • debugExceptionWidget.background#281218
  • debugExceptionWidget.border#800818
  • debugView.exceptionLabelBackground#800000
  • debugView.exceptionLabelForeground#EEEEEE
  • editor.background#222227
  • 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#1C202A
  • editor.snippetFinalTabstopHighlightBorder#67e480
  • editor.snippetTabstopHighlightBackground#1C202A
  • editor.snippetTabstopHighlightBorder#485E88
  • editor.wordHighlightBackground#617ea350
  • editor.wordHighlightStrongBackground#67e48050
  • editorCodeLens.foreground#485E88
  • editorError.foreground#e96379
  • editorGroup.border#44444444
  • editorGroup.dropBackground#44475a70
  • editorGroupHeader.border#110000
  • editorGroupHeader.noTabsBackground#222227
  • editorGroupHeader.tabsBackground#222227
  • editorGroupHeader.tabsBorder#120A0ACC
  • editorGutter.addedBackground#67e48080
  • editorGutter.deletedBackground#e9637980
  • editorGutter.modifiedBackground#617ea380
  • editorHoverWidget.background#1C202A
  • editorHoverWidget.border#4b6494
  • editorLineNumber.activeForeground#F0B058
  • editorLineNumber.foreground#4D709D
  • editorLink.activeForeground#55D777
  • editorMarkerNavigation.background#1C202A
  • editorOverviewRuler.addedForeground#67e48080
  • editorOverviewRuler.border#120A0ACC
  • 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#1B1D24
  • editorStickyScroll.border#00000000
  • editorStickyScroll.shadow#0C040280
  • editorSuggestWidget.background#1C202A
  • editorSuggestWidget.foreground#e1e1e6
  • editorSuggestWidget.selectedBackground#41414d
  • editorWarning.foreground#617ea3
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#1C202A
  • focusBorder#F0B050
  • foreground#C4C6CC
  • icon.foreground#88AACC
  • input.background#333333
  • input.border#140000
  • input.placeholderForeground#816f44
  • menu.background#1C202A
  • 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#1E212D
  • panel.border#120A0ACC
  • panelSection.dropBackground#B0FF5555
  • panelTitle.activeBorder#55BBFF
  • panelTitle.activeForeground#CCCCCC
  • panelTitle.inactiveForeground#587A9C
  • scrollbar.shadow#0C0402FF
  • 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#1B1D24
  • sideBar.border#120A0A88
  • sideBar.dropBackground#B0FF5555
  • sideBar.foreground#AAAAAA
  • sideBarActivityBarTop.border#120A0ACC
  • sideBarSectionHeader.background#1B1D24
  • sideBarSectionHeader.border#114466
  • sideBarSectionHeader.foreground#B0B0B0
  • sideBarStickyScroll.background#1B1D24
  • sideBarStickyScroll.shadow#000000
  • sideBarTitle.background#1B1D24
  • sideBarTitle.foreground#e1e1e6
  • statusBar.background#203458
  • statusBar.border#50A0FF20
  • statusBar.debuggingBackground#1C202A
  • statusBar.debuggingForeground#AAEE88
  • statusBar.focusBorder#FFBB55
  • statusBar.foreground#CEE8FC
  • statusBar.noFolderBackground#1C202A
  • statusBar.noFolderForeground#e1e1e6
  • statusBarItem.errorBackground#88000044
  • statusBarItem.errorForeground#E84850
  • statusBarItem.focusBorder#FFBB55
  • statusBarItem.offlineHoverForeground#768390
  • statusBarItem.prominentBackground#e96379
  • statusBarItem.prominentHoverBackground#e89e64
  • statusBarItem.remoteBackground#344CAC
  • statusBarItem.remoteForeground#EEEEEE
  • statusBarItem.remoteHoverBackground#6C1848
  • statusBarItem.remoteHoverForeground#DDFF66
  • tab.activeBackground#1B1D24
  • tab.activeBorder#1B1D24
  • tab.activeBorderTop#55BBFF
  • tab.activeForeground#DDDDDD
  • tab.border#120A0ACC
  • tab.dragAndDropBorder#DD3399
  • tab.inactiveBackground#201F1F
  • tab.inactiveForeground#888888
  • tab.lastPinnedBorder#006688
  • tab.unfocusedActiveBorder#1B1D24
  • 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#1E212D
  • 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#120A0ACC
  • 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
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
oort-cloud-reverie by W3Dojo - VS Code Theme