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#181818FF
  • activityBar.background#0E0E0EFF
  • activityBar.border#00000000
  • activityBar.foreground#CECECEFF
  • activityBar.inactiveForeground#8E8E8EFF
  • activityBarBadge.background#DD7D4DFF
  • activityBarBadge.foreground#CECECEFF
  • badge.background#DD7D4DFF
  • badge.foreground#CECECEFF
  • breadcrumb.activeSelectionForeground#CECECEFF
  • breadcrumb.background#2E3E8EFF
  • breadcrumb.focusForeground#EEEEEEFF
  • breadcrumb.foreground#CECECEFF
  • button.background#4E7EDEFF
  • button.foreground#CECECEFF
  • button.hoverBackground#6E9EEEFF
  • button.secondaryBackground#2E3E8EFF
  • button.secondaryForeground#CECECEFF
  • button.secondaryHoverBackground#3E5EAEFF
  • checkbox.background#0E0E0EFF
  • checkbox.border#2E3E8EFF
  • checkbox.foreground#CECECEFF
  • debugExceptionWidget.background#0E0E0EFF
  • debugExceptionWidget.border#CECECEFF
  • debugToolBar.background#0E0E0EFF
  • debugToolBar.border#CECECEFF
  • diffEditor.border#8E8E8EFF
  • diffEditor.insertedTextBackground#7FFF7F1F
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#FF00001F
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#0E0E0EFF
  • dropdown.border#2E3E8EFF
  • dropdown.foreground#CECECEFF
  • editor.background#1E1E1EFF
  • editor.findMatchBackground#9D6DED7F
  • editor.findMatchBorder#EEEEEEFF
  • editor.findMatchHighlightBackground#9D6DED7F
  • editor.findMatchHighlightBorder#00000000
  • editor.findRangeHighlightBackground#EEEEEE1F
  • editor.findRangeHighlightBorder#00000000
  • editor.foldBackground#ffffff04
  • editor.foreground#CECECEFF
  • editor.hoverHighlightBackground#EEEEEE1F
  • editor.inactiveSelectionBackground#EEEEEE1F
  • editor.lineHighlightBackground#ffffff08
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#EEEEEE1F
  • editor.rangeHighlightBorder#EEEEEE1F
  • editor.selectionBackground#6E9EEE7F
  • editor.selectionHighlightBackground#EEEEEE1F
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#EEEEEE1F
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#EEEEEE1F
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketMatch.background#6E9EEE7F
  • editorBracketMatch.border#00000000
  • editorCodeLens.foreground#8E8E8EFF
  • editorCursor.background#3F3F3FFF
  • editorCursor.foreground#EEEEEEFF
  • editorError.background#FF00001F
  • editorError.border#00000000
  • editorError.foreground#FF00004f
  • editorGroup.border#8E8E8EFF
  • editorGroup.emptyBackground#1E1E1EFF
  • editorGroupHeader.border#CECECEFF
  • editorGroupHeader.tabsBackground#0E0E0EFF
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#7FBF7FFF
  • editorGutter.background#181818FF
  • editorGutter.commentRangeForeground#8E8E8EFF
  • editorGutter.deletedBackground#DF7F7FFF
  • editorGutter.foldingControlForeground#8E8E8EFF
  • editorGutter.modifiedBackground#DFCF7FFF
  • editorHoverWidget.background#0E0E0EFF
  • editorHoverWidget.border#00000000
  • editorHoverWidget.foreground#CECECEFF
  • editorIndentGuide.activeBackground1#8E8E8EFF
  • editorIndentGuide.background1#3E3E3EFF
  • editorInfo.background#7FFF7F1F
  • editorInfo.border#00000000
  • editorInfo.foreground#7FFF7F4f
  • editorLineNumber.activeForeground#CECECEFF
  • editorLineNumber.foreground#8E8E8EFF
  • editorLink.activeForeground#8F8FFF
  • editorMarkerNavigation.background#0E0E0EFF
  • editorMarkerNavigationError.background#FF0000FF
  • editorMarkerNavigationInfo.background#FFBF00FF
  • editorMarkerNavigationWarning.background#FF7F00FF
  • editorOverviewRuler.background#1E1E1EFF
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.findMatchForeground#9D6DED7F
  • editorRuler.foreground#3E3E3EFF
  • editorSuggestWidget.background#0E0E0EFF
  • editorSuggestWidget.border#00000000
  • editorSuggestWidget.foreground#CECECEFF
  • editorSuggestWidget.highlightForeground#9D6DEDFF
  • editorSuggestWidget.selectedBackground#3D2D8DFF
  • editorWarning.background#FF7F001F
  • editorWarning.border#00000000
  • editorWarning.foreground#ff7f004f
  • editorWhitespace.foreground#EEEEEE1F
  • editorWidget.background#0E0E0EFF
  • editorWidget.foreground#CECECEFF
  • editorWidget.resizeBorder#2E3E8EFF
  • focusBorder#9D6DEDFF
  • foreground#CECECEFF
  • gitDecoration.addedResourceForeground#7fbf7f
  • gitDecoration.conflictingResourceForeground#7FBFFFFF
  • gitDecoration.deletedResourceForeground#DF7F7FFF
  • gitDecoration.ignoredResourceForeground#8E8E8EFF
  • gitDecoration.modifiedResourceForeground#DFCF7FFF
  • gitDecoration.stageDeletedResourceForeground#DF7F7FFF
  • gitDecoration.stageModifiedResourceForeground#DFCF7FFF
  • gitDecoration.submoduleResourceForeground#BF7FBFFF
  • gitDecoration.untrackedResourceForeground#BF7FBFFF
  • icon.foreground#CECECEFF
  • input.background#0E0E0EFF
  • input.border#2E3E8EFF
  • input.foreground#CECECEFF
  • input.placeholderForeground#8E8E8EFF
  • inputOption.activeBackground#3E5EAEFF
  • inputOption.activeBorder#00000000
  • inputOption.activeForeground#CECECEFF
  • list.activeSelectionBackground#3E3E3EFF
  • list.activeSelectionForeground#CECECEFF
  • list.dropBackground#3D2D8DFF
  • list.focusBackground#00000000
  • list.focusForeground#CECECEFF
  • list.highlightForeground#9D6DEDFF
  • list.hoverBackground#3D2D8DFF
  • list.hoverForeground#CECECEFF
  • list.inactiveSelectionBackground#3E3E3EFF
  • list.inactiveSelectionForeground#CECECEFF
  • listFilterWidget.background#0E0E0EFF
  • listFilterWidget.noMatchesOutline#FF0000
  • listFilterWidget.outline#4E7EDEFF
  • menu.background#0E0E0EFF
  • menu.border#0E0E0EFF
  • menu.foreground#CECECEFF
  • menu.selectionBackground#5D3DADFF
  • menu.selectionBorder#00000000
  • menu.selectionForeground#CECECEFF
  • menu.separatorBackground#8E8E8EFF
  • menubar.selectionBackground#0E0E0EFF
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#CECECEFF
  • merge.commonContentBackground#EEEEEE2F
  • merge.commonHeaderBackground#EEEEEE4F
  • merge.currentContentBackground#7FFF7F2f
  • merge.currentHeaderBackground#7FFF7F4f
  • merge.incomingContentBackground#ff7f002f
  • merge.incomingHeaderBackground#ff7f004f
  • minimap.background#1E1E1EFF
  • minimap.errorHighlight#FF00004f
  • minimap.findMatchHighlight#EEEEEE1F
  • minimap.selectionHighlight#EEEEEE2F
  • minimap.warningHighlight#ff7f004f
  • minimapGutter.addedBackground#7FBF7FFF
  • minimapGutter.deletedBackground#DF7F7FFF
  • minimapGutter.modifiedBackground#DFCF7FFF
  • notificationCenter.border#00000000
  • notificationCenterHeader.background#0E0E0EFF
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#0E0E0EFF
  • notifications.border#8E8E8EFF
  • notifications.foreground#CECECEFF
  • notificationsErrorIcon.foreground#FF0000
  • notificationsInfoIcon.foreground#7FFF7F
  • notificationsWarningIcon.foreground#cca700
  • notificationToast.border#00000000
  • panel.background#181818FF
  • panel.border#CECECEFF
  • panelSection.border#8E8E8EFF
  • panelTitle.activeBorder#CECECEFF
  • panelTitle.activeForeground#CECECEFF
  • panelTitle.inactiveForeground#8E8E8EFF
  • peekView.border#CECECEFF
  • peekViewEditor.background#1E1E1EFF
  • peekViewEditor.matchHighlightBackground#7FFF7F4f
  • peekViewEditor.matchHighlightBorder#00000000
  • peekViewEditorGutter.background#181818FF
  • peekViewResult.background#181818FF
  • peekViewResult.fileForeground#CECECEFF
  • peekViewResult.lineForeground#CECECEFF
  • peekViewResult.matchHighlightBackground#7FFF7F4f
  • peekViewResult.selectionBackground#7e9ede7f
  • peekViewResult.selectionForeground#CECECEFF
  • peekViewTitle.background#0E0E0EFF
  • peekViewTitleDescription.foreground#8E8E8EFF
  • peekViewTitleLabel.foreground#CECECEFF
  • pickerGroup.border#8E8E8EFF
  • pickerGroup.foreground#4E7EDEFF
  • progressBar.background#4E7EDEFF
  • scrollbar.shadow#EEEEEE1F
  • scrollbarSlider.activeBackground#EEEEEE4F
  • scrollbarSlider.background#EEEEEE1F
  • scrollbarSlider.hoverBackground#EEEEEE2F
  • selection.background#EEEEEE2F
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#CECECEFF
  • sideBar.background#181818FF
  • sideBar.border#CECECEFF
  • sideBar.dropBackground#3D2D8DFF
  • sideBar.foreground#CECECEFF
  • sideBarSectionHeader.background#0E0E0EFF
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#4E7EDEFF
  • sideBarTitle.foreground#4E7EDEFF
  • statusBar.background#0E0E0EFF
  • statusBar.border#CECECEFF
  • statusBar.debuggingBackground#FFBF00
  • statusBar.debuggingBorder#CECECEFF
  • statusBar.debuggingForeground#0E0E0EFF
  • statusBar.foreground#CECECEFF
  • statusBar.noFolderBackground#0E0E0EFF
  • statusBar.noFolderBorder#CECECEFF
  • statusBar.noFolderForeground#CECECEFF
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#0E0E0EFF
  • statusBarItem.remoteBackground#4E7EDEFF
  • statusBarItem.remoteForeground#CECECEFF
  • tab.activeBackground#2E3E8EFF
  • tab.activeBorder#00000000
  • tab.activeBorderTop#CECECEFF
  • tab.activeForeground#CECECEFF
  • tab.border#00000000
  • tab.hoverBackground#5D3DADFF
  • tab.hoverBorder#00000000
  • tab.hoverForeground#a56363
  • tab.inactiveBackground#181818FF
  • tab.inactiveForeground#CECECEFF
  • terminal.ansiBlack#3F3F3F
  • terminal.ansiBlue#2F7FFF
  • terminal.ansiBrightBlack#8F8F8F
  • terminal.ansiBrightBlue#6FBFFF
  • terminal.ansiBrightCyan#4FCFCF
  • terminal.ansiBrightGreen#5FCF5F
  • terminal.ansiBrightMagenta#FF8FFF
  • terminal.ansiBrightRed#FF9F9F
  • terminal.ansiBrightWhite#EFEFEF
  • terminal.ansiBrightYellow#CFBF4F
  • terminal.ansiCyan#2F8F8F
  • terminal.ansiGreen#5F8F5FFF
  • terminal.ansiMagenta#CF4FCF
  • terminal.ansiRed#EF4F4F
  • terminal.ansiWhite#CFCFCF
  • terminal.ansiYellow#AF7F1F
  • terminal.background#1E1E1EFF
  • terminal.border#8E8E8EFF
  • terminal.foreground#cccccc
  • terminal.selectionBackground#EEEEEE2F
  • terminalCursor.background#EEEEEE1F
  • terminalCursor.foreground#CECECEFF
  • textLink.foreground#4E7EDEFF
  • titleBar.activeBackground#0E0E0EFF
  • titleBar.activeForeground#CECECEFF
  • titleBar.border#00000000
  • titleBar.inactiveBackground#181818FF
  • titleBar.inactiveForeground#CECECEFF
  • tree.indentGuidesStroke#8E8E8EFF
  • walkThrough.embeddedEditorBackground#0E0E0EFF
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, ### generic, keyword.operator, punctuation, storage.type.function.arrow, ### powershell, variable.other.readwrite.powershell, ### python, constant.character.format.placeholder.other.python, meta.function-call.arguments.python#CFCFCF
comment, comment.block, comment.documentation, constant.string.documentation, punctuation.definition.comment#8F8F8F
keyword, keyword.control, keyword.operator.wordlike, storage.modifier, storage.type.function, punctuation.definition.variable, ### powershell, storage.type.powershell, ### kotlin, #### var val, source.kotlin storage.type.kotlin#FF8FFF
constant.character.escape, entity.name.type.annotation, meta.declaration.annotation, meta.template, punctuation.definition.annotation, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.substatement.begin, punctuation.section.embedded.substatement.end, keyword.operator.documentation, keyword.other.documentation, storage.type.annotation#AFAFFF
entity.name.function, support.function, variable.other.member, meta.function-call#6FBFFF
property, variable.other.property#4FCFCF
variable.language#4FCFCFbold
constant#4FCFCFbold underline
variable.parameter, variable.other.property, support.type.property-name, support.variable.automatic, ### kotlin, #### annotation's named parameter, meta.declaration.annotation.kotlin constant.other.key.kotlin, ### python, variable.parameter.function.language.python#5FCF5F
entity.name.class, entity.name.type, entity.other.inherited-class, support.class, storage.type, ### powershell, meta.group.simple.subexpression.powershell storage.type.powershell, meta.scriptblock.powershell storage.type.powershell, ### python, meta.attribute.python, meta.item-access.arguments.python#CFBF4F
### kotlin, source.kotlin meta.class.kotlin#CFBF4Fbold
string, constant.numeric, constant.language, punctuation.definition.string.begin, punctuation.definition.string.end#EFAF5F
invalid.illegal, invalid.unimplemented#FF9F9F
CKT Dark by CKT - VS Code Theme