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.background#161617
  • activityBar.border#0E0E0F
  • activityBar.foreground#CBCBCE
  • activityBar.inactiveForeground#5C5D61
  • activityBarBadge.background#3B6EA8
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3B6EA8
  • badge.foreground#FFFFFF
  • breadcrumb.activeSelectionForeground#D5D6D9
  • breadcrumb.focusForeground#CBCBCE
  • breadcrumb.foreground#7D7E82
  • breadcrumbPicker.background#202021
  • button.background#3B6EA8
  • button.foreground#FFFFFF
  • button.hoverBackground#447BBC
  • button.secondaryBackground#2A2A2C
  • button.secondaryForeground#CBCBCE
  • button.secondaryHoverBackground#323234
  • descriptionForeground#7D7E82
  • dropdown.background#202021
  • dropdown.border#2C2C2E
  • dropdown.foreground#CBCBCE
  • dropdown.listBackground#202021
  • editor.background#1A1A1B
  • editor.findMatchBackground#3A5478
  • editor.findMatchHighlightBackground#272D39
  • editor.foreground#CBCBCE
  • editor.inactiveSelectionBackground#272D39
  • editor.lineHighlightBackground#1F1F21
  • editor.selectionBackground#2F3B52
  • editor.selectionHighlightBackground#272D39
  • editor.wordHighlightBackground#2A2B2D
  • editor.wordHighlightStrongBackground#32343A
  • editorBracketHighlight.foreground1#6FA8DC
  • editorBracketHighlight.foreground2#C58FD6
  • editorBracketHighlight.foreground3#76C5C0
  • editorBracketHighlight.foreground4#D6A45C
  • editorBracketHighlight.foreground5#94B87A
  • editorBracketHighlight.foreground6#8FBCE0
  • editorBracketHighlight.unexpectedBracket.foreground#E0707A
  • editorBracketMatch.background#2C3848
  • editorBracketMatch.border#3B6EA8
  • editorCursor.foreground#5C9DD9
  • editorError.foreground#E0707A
  • editorGroup.border#0E0E0F
  • editorGroupHeader.noTabsBackground#161617
  • editorGroupHeader.tabsBackground#161617
  • editorGroupHeader.tabsBorder#0E0E0F
  • editorGutter.addedBackground#94B87A
  • editorGutter.background#1A1A1B
  • editorGutter.deletedBackground#E0707A
  • editorGutter.modifiedBackground#D6A45C
  • editorHoverWidget.background#202021
  • editorHoverWidget.border#2C2C2E
  • editorIndentGuide.activeBackground1#48484B
  • editorIndentGuide.background1#28282A
  • editorInfo.foreground#5C9DD9
  • editorLineNumber.activeForeground#9A9B9F
  • editorLineNumber.foreground#48484B
  • editorOverviewRuler.border#0E0E0F
  • editorSuggestWidget.background#202021
  • editorSuggestWidget.border#2C2C2E
  • editorSuggestWidget.highlightForeground#5C9DD9
  • editorSuggestWidget.selectedBackground#2A2B2D
  • editorWarning.foreground#D6A45C
  • editorWhitespace.foreground#2C2C2E
  • editorWidget.background#202021
  • editorWidget.border#2C2C2E
  • errorForeground#E0707A
  • focusBorder#3B6EA8
  • foreground#B7B8BB
  • gitDecoration.addedResourceForeground#94B87A
  • gitDecoration.conflictingResourceForeground#D6A45C
  • gitDecoration.deletedResourceForeground#E0707A
  • gitDecoration.ignoredResourceForeground#5C5D61
  • gitDecoration.modifiedResourceForeground#D6A45C
  • gitDecoration.untrackedResourceForeground#76C5C0
  • icon.foreground#A7A8AC
  • input.background#202021
  • input.border#2C2C2E
  • input.foreground#CBCBCE
  • input.placeholderForeground#5C5D61
  • inputOption.activeBorder#3B6EA8
  • inputValidation.errorBackground#3A2224
  • inputValidation.errorBorder#E0707A
  • list.activeSelectionBackground#2A2B2D
  • list.activeSelectionForeground#E4E5E8
  • list.focusBackground#2A2B2D
  • list.highlightForeground#5C9DD9
  • list.hoverBackground#1E1E20
  • list.inactiveSelectionBackground#222224
  • menu.background#202021
  • menu.border#2C2C2E
  • menu.foreground#CBCBCE
  • menu.selectionBackground#2A2B2D
  • menu.selectionForeground#E4E5E8
  • menu.separatorBackground#2C2C2E
  • menubar.selectionBackground#2A2B2D
  • minimap.background#161617
  • minimapSlider.background#2C2C2E60
  • notificationCenterHeader.background#161617
  • notifications.background#202021
  • notifications.border#2C2C2E
  • panel.background#161617
  • panel.border#0E0E0F
  • panelTitle.activeBorder#5C9DD9
  • panelTitle.activeForeground#D5D6D9
  • panelTitle.inactiveForeground#6C6D71
  • peekView.border#3B6EA8
  • peekViewEditor.background#1B1B1C
  • peekViewEditor.matchHighlightBackground#3A5478
  • peekViewResult.background#161617
  • peekViewResult.selectionBackground#2A2B2D
  • peekViewTitle.background#161617
  • progressBar.background#5C9DD9
  • scrollbarSlider.activeBackground#48484BAA
  • scrollbarSlider.background#2C2C2E80
  • scrollbarSlider.hoverBackground#3A3A3C90
  • selection.background#2F3B52
  • sideBar.background#161617
  • sideBar.border#0E0E0F
  • sideBar.foreground#A7A8AC
  • sideBarSectionHeader.background#161617
  • sideBarSectionHeader.border#0E0E0F
  • sideBarSectionHeader.foreground#B7B8BB
  • sideBarTitle.foreground#88898D
  • statusBar.background#161617
  • statusBar.border#0E0E0F
  • statusBar.debuggingBackground#3B6EA8
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#A7A8AC
  • statusBar.noFolderBackground#161617
  • statusBarItem.remoteBackground#3B6EA8
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#1A1A1B
  • tab.activeBorderTop#5C9DD9
  • tab.activeForeground#D5D6D9
  • tab.border#161617
  • tab.hoverBackground#1D1D1F
  • tab.inactiveBackground#161617
  • tab.inactiveForeground#6C6D71
  • tab.unfocusedActiveForeground#9A9B9F
  • terminal.ansiBlack#1A1A1B
  • terminal.ansiBlue#6FA8DC
  • terminal.ansiBrightBlack#5C5D61
  • terminal.ansiBrightBlue#8FBCE0
  • terminal.ansiBrightCyan#92D3CF
  • terminal.ansiBrightGreen#A9C892
  • terminal.ansiBrightMagenta#D2A6E0
  • terminal.ansiBrightRed#E88A92
  • terminal.ansiBrightWhite#E4E5E8
  • terminal.ansiBrightYellow#E0B080
  • terminal.ansiCyan#76C5C0
  • terminal.ansiGreen#94B87A
  • terminal.ansiMagenta#C58FD6
  • terminal.ansiRed#E0707A
  • terminal.ansiWhite#C1C2C6
  • terminal.ansiYellow#D6A45C
  • terminal.background#161617
  • terminal.foreground#C1C2C6
  • terminalCursor.foreground#5C9DD9
  • textLink.activeForeground#7FB3E3
  • textLink.foreground#5C9DD9
  • textPreformat.foreground#76C5C0
  • titleBar.activeBackground#161617
  • titleBar.activeForeground#B7B8BB
  • titleBar.border#0E0E0F
  • titleBar.inactiveBackground#161617
  • titleBar.inactiveForeground#5C5D61
  • tree.indentGuidesStroke#2C2C2E
  • widget.border#2C2C2E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, comment.line.double-slash.kromscript, comment.block.kromscript, punctuation.definition.comment#6B6F78italic
keyword, keyword.control, keyword.control.kromscript, keyword.control.import.kromscript, keyword.other#C58FD6
storage, storage.type, storage.modifier, storage.type.function.kromscript, storage.type.var.kromscript#C58FD6
keyword.operator, keyword.operator.arithmetic.kromscript, keyword.operator.assignment.kromscript, keyword.operator.comparison.kromscript, keyword.operator.logical.kromscript, keyword.operator.access.kromscript#9A9DA5
string, string.quoted.double.kromscript, string.quoted.single.kromscript, string.quoted.kromscript, punctuation.definition.string#94B87A
constant.character.escape, constant.character.escape.kromscript#E0B080
punctuation.section.embedded.kromscript, punctuation.section.embedded, meta.template.expression#D6A45C
constant.numeric, constant.numeric.kromscript#D6A45C
constant.language, constant.language.kromscript#D6A45C
entity.name.function, entity.name.function.kromscript, meta.function.declaration.kromscript entity.name.function.kromscript, support.function, support.function.built-in.kromscript#6FA8DC
entity.name.type, entity.name.class, support.class, support.type, support.class.widget.kromscript, support.class.flutter.kromscript#76C5C0
variable.parameter, variable.parameter.kromscript#C2A98Eitalic
meta.object-literal.key, meta.object-literal.key.kromscript, variable.other.object.property.kromscript#8FBCE0
variable, variable.other, variable.other.readwrite, variable.other.property.kromscript#C9CBD0
punctuation, punctuation.accessor.kromscript, punctuation.separator.parameter.kromscript, punctuation.separator, punctuation.terminator#7E828B
invalid, invalid.illegal#E0707A
Krom Mini-App Studio by issadicko78 - VS Code Theme