Skip to main content
CodingTheme

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.activeBorder#0A7AFA
  • activityBar.background#22282F
  • activityBar.border#2D353E
  • activityBar.foreground#C7CED6
  • activityBar.inactiveForeground#586779
  • activityBarBadge.background#0A7AFA
  • activityBarBadge.foreground#E4E8EC
  • badge.background#606871
  • badge.foreground#E6E8EA
  • breadcrumb.background#24282E
  • breadcrumb.focusForeground#C9CED4
  • breadcrumb.foreground#ACB4BE
  • button.background#0956AE
  • button.foreground#E4E8EC
  • button.hoverBackground#0A7AFA
  • button.secondaryBackground#464E59
  • button.secondaryForeground#C7CED6
  • button.secondaryHoverBackground#5C6875
  • debugToolBar.background#31353A
  • debugToolBar.border#494f5536
  • diffEditor.border#494F55
  • diffEditor.insertedTextBackground#61AF5534
  • diffEditor.removedTextBackground#FA3A0A34
  • dropdown.background#26292C
  • dropdown.border#464E5970
  • dropdown.foreground#CBCED2
  • editor.background#22282F
  • editor.findMatchBackground#E4E8EC2B
  • editor.findMatchHighlightBackground#A3702E
  • editor.foldBackground#0462CD16
  • editor.foreground#C7CED6
  • editor.hoverHighlightBackground#424E5C
  • editor.inactiveSelectionBackground#6E819626
  • editor.lineHighlightBackground#424e5c80
  • editor.rangeHighlightBackground#424E5C
  • editor.selectionBackground#6E819642
  • editor.selectionHighlightBackground#C7CED62A
  • editor.selectionHighlightBorder#586779
  • editor.wordHighlightBackground#494F55
  • editor.wordHighlightStrongBackground#183454
  • editorBracketHighlight.foreground1#6EB0FC
  • editorBracketHighlight.foreground2#FCC16E
  • editorBracketHighlight.foreground3#7B6FFC
  • editorBracketHighlight.foreground4#6ECDFC
  • editorBracketHighlight.foreground5#FCAC6E
  • editorBracketHighlight.foreground6#CD6EFC
  • editorBracketHighlight.unexpectedBracket.foreground#FC736E
  • editorBracketMatch.background#0A7AFA20
  • editorBracketMatch.border#6E8196
  • editorCodeLens.foreground#6E8196
  • editorCursor.background#26292C
  • editorCursor.foreground#AFB5BB
  • editorError.foreground#FA3A0A
  • editorGroup.border#494F55
  • editorGroupHeader.tabsBackground#24282E
  • editorGroupHeader.tabsBorder#464E5970
  • editorGutter.addedBackground#1B770D
  • editorGutter.background#22282F
  • editorGutter.deletedBackground#AE2A09
  • editorGutter.foldingControlForeground#A9B4C1
  • editorGutter.modifiedBackground#0956AE
  • editorHoverWidget.background#24282E
  • editorHoverWidget.border#464e59bb
  • editorHoverWidget.foreground#ACB4BE
  • editorIndentGuide.activeBackground#586779
  • editorIndentGuide.background#38424D
  • editorInfo.foreground#4696F1
  • editorLineNumber.activeForeground#C7CED6
  • editorLineNumber.foreground#586779
  • editorLink.activeForeground#0ABAFA
  • editorMarkerNavigation.background#26292C
  • editorMarkerNavigationError.background#F16846
  • editorMarkerNavigationInfo.background#6EB0FC
  • editorMarkerNavigationWarning.background#C8A73C
  • editorOverviewRuler.background#22282F
  • editorOverviewRuler.border#60687180
  • editorRuler.foreground#424E5C
  • editorSuggestWidget.background#24282E
  • editorSuggestWidget.border#464E59
  • editorSuggestWidget.foreground#C9CED4
  • editorSuggestWidget.highlightForeground#3C95FB
  • editorSuggestWidget.selectedBackground#183454
  • editorWarning.foreground#F1A746
  • editorWhitespace.foreground#6E819626
  • editorWidget.background#24282E
  • editorWidget.foreground#C7CED6
  • editorWidget.resizeBorder#8CB2DE
  • focusBorder#0A7AFA
  • foreground#C7CED6
  • gitDecoration.addedResourceForeground#64D38D
  • gitDecoration.conflictingResourceForeground#7664D3
  • gitDecoration.deletedResourceForeground#D36464
  • gitDecoration.ignoredResourceForeground#949BA4
  • gitDecoration.modifiedResourceForeground#D3B264
  • gitDecoration.stageDeletedResourceForeground#C83C3C
  • gitDecoration.stageModifiedResourceForeground#E6BF84
  • gitDecoration.submoduleResourceForeground#6498D3
  • gitDecoration.untrackedResourceForeground#7BE09D
  • icon.foreground#C7CED6
  • input.background#26292C
  • input.foreground#CBCED2
  • input.placeholderForeground#AFB5BB
  • inputOption.activeBackground#0A7AFA66
  • inputOption.activeBorder#f50c0c00
  • inputOption.activeForeground#E6E8EA
  • list.activeSelectionBackground#073264
  • list.activeSelectionForeground#E4E8EC
  • list.dropBackground#464E59
  • list.focusBackground#183454
  • list.highlightForeground#0A7AFA
  • list.hoverBackground#24282E
  • list.hoverForeground#E4E8EC
  • list.inactiveSelectionBackground#24282E
  • list.inactiveSelectionForeground#E4E8EC
  • listFilterWidget.background#424E5C
  • listFilterWidget.noMatchesOutline#FA3A0A
  • menu.background#24282E
  • menu.border#464E5970
  • menu.foreground#C9CED4
  • menu.selectionBackground#034A9B
  • menu.selectionForeground#E5E8EB
  • menu.separatorBackground#464E59
  • menubar.selectionBackground#5C6875
  • menubar.selectionForeground#E5E8EB
  • merge.commonContentBackground#26292C
  • merge.commonHeaderBackground#494F55
  • notificationCenter.border#494F552A
  • notificationCenterHeader.background#333538
  • notificationCenterHeader.foreground#AFB5BB
  • notifications.background#26292C
  • notifications.border#494F552A
  • notifications.foreground#CBCED2
  • notificationsErrorIcon.foreground#C8433C
  • notificationsInfoIcon.foreground#3CA3C8
  • notificationsWarningIcon.foreground#C8BF3C
  • notificationToast.border#494F552A
  • panel.background#24282E
  • panel.border#464E59
  • panelTitle.activeBorder#0A7AFA
  • panelTitle.activeForeground#E6E8EA
  • panelTitle.inactiveForeground#CBCED2CC
  • peekView.border#0A7AFA
  • peekViewEditor.background#223449
  • peekViewEditor.matchHighlightBackground#c88b3c69
  • peekViewEditorGutter.background#223449
  • peekViewResult.background#1A2837
  • peekViewResult.lineForeground#8C9AAB
  • peekViewResult.matchHighlightBackground#C88D3C4F
  • peekViewResult.selectionBackground#183454
  • peekViewResult.selectionForeground#E4E8EC
  • peekViewTitleLabel.foreground#E4E8EC
  • pickerGroup.border#464E59
  • pickerGroup.foreground#3C95FB
  • progressBar.background#0A7AFA
  • scrollbar.shadow#22282F
  • scrollbarSlider.activeBackground#7381919B
  • scrollbarSlider.background#464E599B
  • scrollbarSlider.hoverBackground#5C68759B
  • selection.background#6E8196
  • sideBar.background#22282F
  • sideBar.border#2D353E
  • sideBar.foreground#C7CED6
  • sideBarSectionHeader.background#2D353E
  • sideBarTitle.foreground#ACB4BE
  • statusBar.background#24282E
  • statusBar.debuggingBackground#C88B3C
  • statusBar.debuggingForeground#24282E
  • statusBar.foreground#ACB4BE
  • statusBar.noFolderBackground#61237B
  • statusBar.noFolderForeground#C9CED4
  • statusBarItem.hoverBackground#464E59BB
  • statusBarItem.remoteBackground#034A9B
  • statusBarItem.remoteForeground#E5E8EB
  • tab.activeBackground#22282F
  • tab.activeBorder#0A7AFA
  • tab.activeForeground#E4E8EC
  • tab.border#22282F
  • tab.hoverBackground#424E5C
  • tab.hoverForeground#C7CED6
  • tab.inactiveBackground#24282E
  • tab.inactiveForeground#A9B4C1
  • terminal.ansiBlack#000913
  • terminal.ansiBlue#3C7dC8
  • terminal.ansiBrightBlack#606871
  • terminal.ansiBrightBlue#5097E7
  • terminal.ansiBrightCyan#46C3F1
  • terminal.ansiBrightGreen#53EC3C
  • terminal.ansiBrightMagenta#D165FF
  • terminal.ansiBrightRed#F14F46
  • terminal.ansiBrightWhite#E6E8EA
  • terminal.ansiBrightYellow#f1E646
  • terminal.ansiCyan#3CA3C8
  • terminal.ansiGreen#4FC83C
  • terminal.ansiMagenta#9E3CC8
  • terminal.ansiRed#C8433C
  • terminal.ansiWhite#CBCED2
  • terminal.ansiYellow#C8BF3C
  • terminal.border#464E59
  • terminal.foreground#CBCED2
  • terminal.selectionBackground#78818C80
  • terminalCursor.background#0462CD
  • terminalCursor.foreground#E6E8EA
  • textLink.foreground#3C95FB
  • titleBar.activeBackground#24282EBB
  • titleBar.activeForeground#ACB4BE
  • titleBar.inactiveBackground#24282E
  • titleBar.inactiveForeground#ACB4bECC
  • tree.indentGuidesStroke#464E59
  • widget.shadow#424e5c36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6E8196italic
punctuation#A9B4C1
punctuation.decorator, meta.brace.round#C7CED6
punctuation.terminator.statement#8C9AAB
punctuation.accessor.optional#A167E6
punctuation.definition.constant#6EB0FC
punctuation.section.embedded#C87DED
string, punctuation.definition.string#EDD37D
constant.numeric, keyword.other.unit#EDB97D
constant.language, entity.name.tag, keyword, keyword.operator, storage.modifier, storage.type, support.type.primitive#FC6E86
variable.language, fenced_code.block.language#A9B4C1italic
variable.parameter, entity.name.variable.parameter, parameter.variable#C7CED6italic
meta.function, meta.function-call, meta.definition.function, meta.definition.method, meta.method.declaration, entity.name.function, entity.other.attribute-name, support.function, function.support.builtin, function.support.core, punctuation.definition.entity#91E684
constant.language.boolean.true#7FE255bold
constant.language.boolean.false#E75850bold
constant.language.nullbold
support.variable.property#A9B4C1
meta.property-value#EEF4FC
constant.character, constant.other, support.constant#6EB0FC
meta.definition.variable, meta.parameters, meta.method.declaration, meta.object.member, variable.other.constant, variable.other.object, entity.name.variable.local#6EB0FC
entity.name.class, entity.name.type, entity.name.class.declaration, entity.name.type.class, entity.other.inherited-class#C87DED
meta.block, meta.class, meta.var.expr, meta.template.expression, meta.function-call.arguments, meta.definition.property, meta.field.declaration, meta.tag.without-attributes, meta.children, entity.name.type.namespace, entity.name.variable, entity.name.section, variable.object.property, variable.other.assignment, variable.other.object.property, variable.other.constant.property, variable.other.readwrite.alias#C7CED6
punctuation.definition.variable, punctuation.support.type.property-name, storage.modifier.lifetime, variable.other.property, variable.other.jsdoc#C7CED6
meta.object-literal.key, support.type.property-name#C7CED6
meta.return.type, meta.field.declaration, meta.interface, support.type, support.type.primitive, support.type.property-name, punctuation.support.type.property-name#7DC8ED
entity.other.attribute-name.pseudo-classitalic
markup.underline.link#7DDBED
markup.bold#DFDFE0bold
markup.italic#DFDFE0italic
case-clause.expr, switch-block.expr, switch-statement.expr#41A1C0
token.info-token#6498D3
token.warn-token#D3B264
token.error-token#D36464
token.debug-token#7664D3
fenced_code.block.language, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.raw.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#6EB0FC
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown#7DC8ED
markup.quote.markdown#EDB97D
storage.type.cs, entity.name.type.cs#867DED
keyword.type.cs#7DC8ED
variable.css, variable.scss, variable.less, variable.sass#6EB0FC
support.class.dart, other.source.dart#FC6E86
punctuation.definition.variable.php, variable.other#C7CED6
meta.class.kotlin#C87DED
support.class.kotlin#7DC8ED
variable.other.readwrite.instance.ruby, punctuation.definition.variable.ruby#6EB0FC
constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, punctuation.definition.constant.ruby#7DC8ED
meta.function.method.with-arguments.ruby#C7CED6
entity.name.type.class.std.rust#867DED
entity.name.type.rust, entity.name.type.numeric.rust#6EB0FC
meta.indexed-name.python#91E684

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Kite Theme by Yudin Nikita - VS Code Theme