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#e9eaec
  • activityBar.activeBorder#4065e7
  • activityBar.activeFocusBorder#e9eaec
  • activityBar.background#e9eaec
  • activityBar.border#e9eaec
  • activityBar.dropBorder#4064e75f
  • activityBar.foreground#4065e7
  • activityBar.inactiveForeground#2800609a
  • activityBarBadge.background#4065e7
  • activityBarBadge.foreground#fcfcfc
  • badge.background#4065e7
  • badge.foreground#fcfcfc
  • banner.background#e9eaec
  • banner.foreground#280060
  • banner.iconForeground#280060
  • breadcrumb.activeSelectionForeground#4065e7
  • breadcrumb.background#e9eaec
  • breadcrumb.focusForeground#4065e7
  • breadcrumb.foreground#4064e788
  • breadcrumbPicker.background#e9eaec
  • button.background#69A9F2
  • button.border#69A9F2
  • button.foreground#fcfcfc
  • button.hoverBackground#3189ED
  • button.secondaryBackground#69A9F2
  • button.secondaryForeground#fcfcfc
  • button.secondaryHoverBackground#3189ED
  • button.separator#fcfcfc
  • checkbox.background#e9eaec
  • checkbox.border#d8d8d8
  • checkbox.foreground#4065e7
  • checkbox.selectBackground#e9eaec
  • checkbox.selectBorder#d8d8d800
  • contrastActiveBorder#e9eaec00
  • contrastBorder#e9eaec00
  • debugConsole.errorForeground#ff0000
  • debugConsole.infoForeground#4065e7
  • debugConsole.sourceForeground#1FB4FF
  • debugConsole.warningForeground#BFAB25
  • debugConsoleInputIcon.foreground#4065e7
  • debugExceptionWidget.background#e9eaec
  • debugExceptionWidget.border#e2e2e2
  • debugIcon.breakpointCurrentStackframeForeground#CC2936
  • debugIcon.breakpointDisabledForeground#cc29378e
  • debugIcon.breakpointForeground#CC2936
  • debugIcon.breakpointStackframeForeground#cc2937d8
  • debugIcon.breakpointUnverifiedForeground#ff0000
  • debugIcon.continueForeground#0fbaa6
  • debugIcon.disconnectForeground#CC2936
  • debugIcon.pauseForeground#BFAB25
  • debugIcon.restartForeground#149068
  • debugIcon.startForeground#4065e7
  • debugIcon.stepBackForeground#280060
  • debugIcon.stepIntoForeground#4064e7cd
  • debugIcon.stepOutForeground#4064e7cd
  • debugIcon.stepOverForeground#4064e7cd
  • debugIcon.stopForeground#CC2936
  • debugToolBar.background#e9eaec
  • debugToolBar.border#e2e2e2
  • descriptionForeground#4065e7
  • diffEditor.border#e2e2e2
  • diffEditor.diagonalFill#991E2969
  • diffEditor.insertedLineBackground#0fbaa633
  • diffEditor.insertedTextBackground#38e4ae33
  • diffEditor.insertedTextBorder#38E4AE33
  • diffEditor.removedLineBackground#CC293633
  • diffEditor.removedTextBackground#ff000033
  • diffEditor.removedTextBorder#ff000033
  • diffEditorGutter.insertedLineBackground#0fbaa633
  • diffEditorGutter.removedLineBackground#CC293633
  • diffEditorOverview.insertedForeground#0fbaa633
  • diffEditorOverview.removedForeground#CC293633
  • dropdown.background#e9eaec
  • dropdown.border#e2e2e2
  • dropdown.foreground#280060
  • dropdown.listBackground#e9eaec
  • editor.background#f2f2f2
  • editor.findMatchBackground#0fbaa669
  • editor.findMatchBorder#0fbaa669
  • editor.findMatchHighlightBackground#4064e73a
  • editor.findMatchHighlightBorder#4064e73a
  • editor.foreground#280060
  • editor.hoverHighlightBackground#4064e719
  • editor.inactiveSelectionBackground#d8e7fa50
  • editor.lineHighlightBackground#e9eaec
  • editor.lineHighlightBorder#e9eaec
  • editor.selectionBackground#4064e729
  • editor.selectionForeground#280060
  • editor.selectionHighlightBackground#0fbaa669
  • editor.selectionHighlightBorder#0fbaa6
  • editor.wordHighlightBackground#4064e75e
  • editor.wordHighlightBorder#4064e76b
  • editorBracketHighlight.foreground1#4065e7
  • editorBracketHighlight.foreground2#ff8700
  • editorBracketHighlight.foreground3#be0aff
  • editorBracketHighlight.foreground4#ffc43d
  • editorBracketHighlight.foreground5#01295f
  • editorBracketHighlight.foreground6#0ead69
  • editorBracketHighlight.unexpectedBracket.foreground#ff0000
  • editorBracketMatch.background#d8e7fa
  • editorBracketMatch.border#4065e7
  • editorCodeLens.foreground#4065e7
  • editorCursor.background#ff000000
  • editorCursor.foreground#4065e7
  • editorError.background#e8133751
  • editorError.border#e81338
  • editorError.foreground#280060
  • editorGhostText.background#e9eaec
  • editorGhostText.border#e2e2e2
  • editorGhostText.foreground#e2e2e2
  • editorGroup.border#e9eaec
  • editorGroup.dropBackground#d8e7fa
  • editorGroup.dropIntoPromptBackground#d8e7fa
  • editorGroup.dropIntoPromptBorder#e2e2e2
  • editorGroup.dropIntoPromptForeground#280060
  • editorGroup.emptyBackground#e9eaec
  • editorGroup.focusedEmptyBorder#e2e2e2
  • editorGroupHeader.border#e9eaec
  • editorGroupHeader.noTabsBackground#e9eaec
  • editorGroupHeader.tabsBackground#e9eaec
  • editorGroupHeader.tabsBorder#e9eaec
  • editorGutter.addedBackground#149068
  • editorGutter.background#f2f2f2
  • editorGutter.commentGlyphForeground#fec5bb
  • editorGutter.commentRangeForeground#767676
  • editorGutter.deletedBackground#e81338
  • editorGutter.foldingControlForeground#4065e7
  • editorGutter.modifiedBackground#007f5f
  • editorHint.border#4065e7
  • editorHint.foreground#4065e7
  • editorHoverWidget.background#e9eaec
  • editorIndentGuide.activeBackground1#d8d8d8
  • editorIndentGuide.background1#d8d8d850
  • editorInfo.background#e9eaec50
  • editorInfo.border#e2e2e2
  • editorInfo.foreground#4065e7
  • editorLightBulb.foreground#BFAB25
  • editorLineNumber.activeForeground#280060
  • editorLineNumber.foreground#28006043
  • editorRuler.foreground#d8d8d8
  • editorSuggestWidget.background#e9eaec
  • editorSuggestWidget.border#d8d8d8
  • editorSuggestWidget.foreground#280060
  • editorSuggestWidget.highlightForeground#4065e7
  • editorWarning.background#BFAB2569
  • editorWarning.border#BFAB2500
  • editorWhitespace.foreground#4065e7
  • editorWidget.background#e9eaec
  • editorWidget.border#e2e2e2
  • editorWidget.foreground#280060
  • editorWidget.resizeBorder#e2e2e2
  • errorForeground#ff0000
  • focusBorder#e2e2e2
  • foreground#280060
  • gitDecoration.addedResourceForeground#64bd6a
  • gitDecoration.conflictingResourceForeground#FAA300
  • gitDecoration.deletedResourceForeground#ff0000
  • gitDecoration.ignoredResourceForeground#beb2bd
  • gitDecoration.modifiedResourceForeground#81a946
  • gitDecoration.renamedResourceForeground#6622CC
  • gitDecoration.stageDeletedResourceForeground#DF367C
  • gitDecoration.stageModifiedResourceForeground#869674
  • gitDecoration.submoduleResourceForeground#63a999
  • gitDecoration.untrackedResourceForeground#AF3B6E
  • icon.foreground#280060
  • input.background#e2e2e2
  • input.border#d8d8d8
  • input.foreground#280060
  • input.placeholderForeground#280060
  • inputOption.activeBackground#e9eaec
  • inputOption.activeBorder#e2e2e2
  • inputOption.activeForeground#280060
  • inputOption.hoverBackground#d8e7fa
  • list.activeSelectionBackground#d8e7fa
  • list.activeSelectionForeground#280060
  • list.activeSelectionIconForeground#280060
  • list.dropBackground#4065e769
  • list.hoverBackground#e8e6fc
  • list.hoverForeground#280060
  • list.inactiveSelectionBackground#d8e7fa92
  • list.inactiveSelectionForeground#280060
  • menu.background#e9eaec
  • menu.border#d8d8d8
  • menu.foreground#280060
  • menu.selectionBackground#d8e7fa
  • menu.selectionBorder#d8e7fa
  • menu.selectionForeground#280060
  • menu.separatorBackground#e2e2e2
  • menubar.selectionBackground#d8e7fa
  • menubar.selectionBorder#d8e7fa
  • menubar.selectionForeground#280060
  • minimap.background#e9eaec69
  • minimap.errorHighlight#CC2936
  • minimap.findMatchHighlight#d8e7fa50
  • minimap.foregroundOpacity#280060
  • minimap.selectionHighlight#d8e7fa50
  • minimap.selectionOccurrenceHighlight#4065e760
  • minimap.warningHighlight#BFAB25
  • minimapGutter.addedBackground#149068
  • minimapGutter.deletedBackground#CC2936
  • minimapGutter.modifiedBackground#4065e7
  • minimapSlider.activeBackground#4065e760
  • minimapSlider.background#d8e7fa69
  • minimapSlider.hoverBackground#4065e769
  • notebook.cellBorderColor#e2e2e2
  • notebook.cellEditorBackground#f2f2f2
  • notebook.cellHoverBackground#d8e7fa
  • notebook.editorBackground#f2f2f269
  • notebook.focusedCellBackground#d8e7fa69
  • notebook.focusedCellBorder#4065e7
  • notebook.focusedEditorBorder#4065e7
  • notebook.inactiveFocusedCellBorder#4065e769
  • notebook.inactiveSelectedCellBorder#4065e769
  • notebook.outputContainerBackgroundColor#e9eaec
  • notebook.outputContainerBorderColor#e2e2e2
  • notebook.selectedCellBackground#d8e7fa
  • notebook.selectedCellBorder#4065e7
  • notebookScrollbarSlider.activeBackground#4065e7
  • notebookScrollbarSlider.background#4065e769
  • notebookScrollbarSlider.hoverBackground#4064e7db
  • notebookStatusErrorIcon.foreground#CC2936
  • notebookStatusRunningIcon.foreground#4065e7
  • notebookStatusSuccessIcon.foreground#006466
  • notificationCenter.border#e2e2e2
  • notificationCenterHeader.background#e9eaec
  • notificationCenterHeader.foreground#4065e7
  • notificationLink.foreground#4065e7
  • notifications.background#e9eaec
  • notifications.border#e2e2e2
  • notifications.foreground#280060
  • notificationsErrorIcon.foreground#CC2936
  • notificationsInfoIcon.foreground#4065e7
  • notificationsWarningIcon.foreground#BFAB25
  • panel.background#e9eaec
  • panel.border#e2e2e2
  • panel.dropBorder#e2e2e2
  • panelInput.border#e2e2e2
  • panelSection.border#e9eaec
  • panelSection.dropBackground#d8e7fa
  • panelSectionHeader.background#e9eaec
  • panelSectionHeader.border#e2e2e2
  • panelSectionHeader.foreground#4065e7
  • panelTitle.activeBorder#4065e7
  • panelTitle.activeForeground#4065e7
  • panelTitle.inactiveForeground#4064e771
  • problemsErrorIcon.foreground#CC2936
  • problemsInfoIcon.foreground#4065e7
  • problemsWarningIcon.foreground#BFAB25
  • progressBar.background#4065e7
  • scrollbar.shadow#e2e2e2
  • scrollbarSlider.activeBackground#4065e7
  • scrollbarSlider.background#4065e769
  • scrollbarSlider.hoverBackground#4064e7db
  • search.resultsInfoForeground#149068
  • searchEditor.findMatchBackground#14906869
  • searchEditor.findMatchBorder#149068
  • selection.background#d8e7fa
  • settings.checkboxBackground#e9eaec
  • settings.checkboxBorder#e2e2e2
  • settings.checkboxForeground#4065e7
  • settings.dropdownBackground#e9eaec
  • settings.dropdownBorder#e2e2e2
  • settings.dropdownForeground#280060
  • settings.dropdownListBorder#e2e2e2
  • settings.focusedRowBackground#d8e7fa
  • settings.focusedRowBorder#d8e7fa
  • settings.headerBorder#e2e2e2
  • settings.headerForeground#4065e7
  • settings.modifiedItemIndicator#007f5f
  • settings.numberInputBackground#e9eaec
  • settings.numberInputBorder#e2e2e2
  • settings.numberInputForeground#280060
  • settings.rowHoverBackground#d8e7fa
  • settings.sashBorder#4065e7
  • settings.settingsHeaderHoverForeground#4065e7
  • settings.textInputBackground#e9eaec
  • settings.textInputBorder#e2e2e2
  • settings.textInputForeground#280060
  • sideBar.background#e9eaec
  • sideBar.border#e9eaec
  • sideBar.dropBackground#4064e75f
  • sideBar.foreground#280060
  • sideBarSectionHeader.background#e9eaec
  • sideBarSectionHeader.border#e2e2e2
  • sideBarSectionHeader.foreground#4065e7
  • sideBarTitle.foreground#4065e7
  • sideBySideEditor.horizontalBorder#e2e2e2
  • sideBySideEditor.verticalBorder#e2e2e2
  • statusBar.background#e9eaec
  • statusBar.border#e2e2e2
  • statusBar.debuggingBackground#4065e7
  • statusBar.debuggingBorder#e2e2e2
  • statusBar.debuggingForeground#fcfcfc
  • statusBar.focusBorder#e2e2e2
  • statusBar.foreground#280060
  • statusBar.noFolderBackground#280060
  • statusBar.noFolderBorder#e2e2e2
  • statusBar.noFolderForeground#fcfcfc
  • statusBarItem.activeBackground#d8e7fa
  • statusBarItem.errorBackground#CC2936
  • statusBarItem.errorForeground#280060
  • statusBarItem.hoverBackground#d8e7fa
  • statusBarItem.remoteBackground#4065e7
  • statusBarItem.remoteForeground#fcfcfc
  • statusBarItem.warningBackground#BFAB25
  • statusBarItem.warningForeground#280060
  • tab.activeBackground#d8e7fa
  • tab.activeBorder#d8e7fa
  • tab.activeBorderTop#d8e7fa
  • tab.activeForeground#280060
  • tab.activeModifiedBorder#fcfcfc
  • tab.border#e9eaec
  • tab.hoverBackground#d8e7fa
  • tab.hoverBorder#d8e7fa
  • tab.hoverForeground#280060
  • tab.inactiveBackground#e9eaec
  • tab.inactiveForeground#2800609f
  • tab.inactiveModifiedBorder#e9eaec
  • tab.unfocusedActiveBackground#e9eaec
  • tab.unfocusedActiveBorder#e9eaec
  • tab.unfocusedActiveBorderTop#e9eaec
  • tab.unfocusedActiveForeground#2800609f
  • tab.unfocusedActiveModifiedBorder#2800609f
  • tab.unfocusedHoverBackground#d8e7fa
  • tab.unfocusedHoverBorder#d8e7fa
  • tab.unfocusedHoverForeground#2800609f
  • tab.unfocusedInactiveBackground#d8e7fa
  • tab.unfocusedInactiveForeground#2800609f
  • tab.unfocusedInactiveModifiedBorder#d8e7fa
  • terminal.ansiBlack#080D0A
  • terminal.ansiBlue#002fd7
  • terminal.ansiBrightBlack#545763
  • terminal.ansiBrightBlue#4065e7
  • terminal.ansiBrightCyan#5CC8FF
  • terminal.ansiBrightGreen#38E4AE
  • terminal.ansiBrightMagenta#954BAA
  • terminal.ansiBrightRed#CC2936
  • terminal.ansiBrightWhite#E0E0E0
  • terminal.ansiBrightYellow#DECC54
  • terminal.ansiCyan#1FB4FF
  • terminal.ansiGreen#149068
  • terminal.ansiMagenta#703880
  • terminal.ansiRed#991E29
  • terminal.ansiWhite#CCCCCC
  • terminal.ansiYellow#BFAB25
  • terminal.background#e9eaec
  • terminal.border#e2e2e2
  • terminal.dropBackground#d8e7fa50
  • terminal.findMatchBackground#e8e6fc50
  • terminal.findMatchBorder#e8e6fc
  • terminal.findMatchHighlightBackground#e8e6fc50
  • terminal.findMatchHighlightBorder#e8e6fc
  • terminal.foreground#280060
  • terminal.inactiveSelectionBackground#d8e7fa
  • terminal.selectionBackground#d8e7fa
  • terminal.selectionForeground#280060
  • terminal.tab.activeBorder#e2e2e2
  • terminalCursor.background#ff000000
  • terminalCursor.foreground#4065e7
  • textLink.activeForeground#4065e7
  • textLink.foreground#35b5ff
  • titleBar.activeBackground#e9eaec
  • titleBar.activeForeground#280060
  • titleBar.border#e2e2e2
  • titleBar.inactiveBackground#e9eaec
  • titleBar.inactiveForeground#28006094
  • tree.inactiveIndentGuidesStroke#4065e769
  • tree.indentGuidesStroke#4065e769
  • welcomePage.progress.background#280060
  • welcomePage.progress.foreground#4065e7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line#4e4c6399italic bold
constant, support.constant#954baabold
entity.name.type.class#cc2936bold
keyword.control#4065e7italic bold
storage.type.class, storage.type.function#002fd7italic bold
meta.class, meta.function#ea4b66italic bold
string#a800a8bold
variable.parameter.function.language.special.self#a80000italic bold
meta.function.parameters, variable.parameter.function-call#17aab2
meta.function-call.generic#1d9bbebold
keyword.operator, punctuation.separator.annotation#4065e7bold
support.function.builtin#1985f6italic bold
entity.name.tag.yaml, string.unquoted.plain.out.yaml#4065e7bold
meta.structure.dictionary.json string.quoted.double.json#4e4c63
source.json meta.structure.dictionary.json support.type.property-name.json#17aab2italic bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#3c61aditalic bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ea4b66italic bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#1985f6italic bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#904ac2italic bold
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#a8216bitalic bold
keyword.other.dotenv#FF000000
theAIsphere by theAIsphere - VS Code Theme