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#00000000
  • activityBar.activeBorder#00ff88
  • activityBar.activeFocusBorder#00000000
  • activityBar.background#f6faf8
  • activityBar.border#00000000
  • activityBar.dropBorder#00000000
  • activityBar.foreground#1a1a1a
  • activityBar.inactiveForeground#777777
  • activityBarBadge.background#00ff88
  • activityBarBadge.foreground#000000
  • breadcrumb.activeSelectionForeground#00ff88
  • breadcrumb.background#f0f0f0
  • breadcrumb.focusForeground#000000
  • breadcrumb.foreground#333333
  • button.background#00ff88
  • button.foreground#000000
  • button.hoverBackground#00dd77
  • contrastActiveBorder#00000000
  • contrastBorder#bbbbbb
  • diffEditor.insertedLineBackground#00ff8822
  • diffEditor.insertedTextBackground#00ff8833
  • diffEditor.removedLineBackground#ff005522
  • diffEditor.removedTextBackground#ff005533
  • editor.background#fafefc
  • editor.findMatchBackground#0088ff55
  • editor.findMatchHighlightBackground#0088ff33
  • editor.foreground#0a0a0a
  • editor.lineHighlightBackground#00000000
  • editor.rangeHighlightBackground#00ff8822
  • editor.selectionBackground#00ff8844
  • editor.selectionHighlightBackground#00ff8833
  • editor.wordHighlightBackground#00ff8822
  • editor.wordHighlightStrongBackground#00ff8833
  • editorCursor.foreground#00ff88
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#f8f8f8
  • editorGroupHeader.tabsBorder#00000000
  • editorHoverWidget.background#f0f0f0
  • editorHoverWidget.border#bbbbbb
  • editorIndentGuide.activeBackground1#00ff88
  • editorIndentGuide.background1#dddddd
  • editorLineNumber.activeForeground#00ff88
  • editorLineNumber.foreground#999999
  • editorRuler.foreground#dddddd
  • editorWhitespace.foreground#cccccc
  • editorWidget.background#f0f0f0
  • editorWidget.border#bbbbbb
  • focusBorder#00000000
  • gitDecoration.addedResourceForeground#00ff88
  • gitDecoration.conflictingResourceForeground#ff00dd
  • gitDecoration.deletedResourceForeground#ff0055
  • gitDecoration.ignoredResourceForeground#999999
  • gitDecoration.modifiedResourceForeground#ffaa00
  • gitDecoration.untrackedResourceForeground#0088ff
  • input.background#f0f0f0
  • input.border#bbbbbb
  • input.foreground#000000
  • input.placeholderForeground#777777
  • inputOption.activeBorder#00ff88
  • inputValidation.errorBackground#ff0055
  • inputValidation.errorBorder#d63447
  • list.activeSelectionBackground#00ff8822
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.focusAndSelectionOutline#00000000
  • list.focusBackground#00ff8833
  • list.focusForeground#000000
  • list.focusHighlightForeground#00ff88
  • list.focusOutline#00000000
  • list.hoverBackground#00ff8815
  • list.hoverForeground#000000
  • list.inactiveSelectionBackground#00ff8811
  • list.inactiveSelectionForeground#000000
  • list.inactiveSelectionIconForeground#333333
  • menu.background#ffffff
  • menu.border#cccccc
  • menu.foreground#000000
  • menu.selectionBackground#e5e5e5
  • menu.selectionForeground#000000
  • minimap.background#ffffff
  • minimap.errorHighlight#ff0055
  • minimap.findMatchHighlight#0088ff66
  • minimap.selectionHighlight#00ff8866
  • minimap.warningHighlight#ffaa00
  • notificationCenter.border#cccccc
  • notificationCenterHeader.background#f5f5f5
  • notifications.background#f5f5f5
  • notifications.border#cccccc
  • notifications.foreground#000000
  • notificationToast.border#cccccc
  • panel.background#fdfdfd
  • panel.border#cccccc
  • panelTitle.activeBorder#00ff88
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#777777
  • peekView.border#00ff88
  • peekViewEditor.background#f0f0f0
  • peekViewResult.background#fdfdfd
  • peekViewTitle.background#ffffff
  • progressBar.background#00ff88
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#aaaaaa
  • scrollbarSlider.background#cccccc
  • scrollbarSlider.hoverBackground#bbbbbb
  • sideBar.background#f0f6f2
  • sideBar.border#00000000
  • sideBar.foreground#333333
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#1a1a1a
  • sideBarTitle.foreground#1a1a1a
  • statusBar.background#f8f8f8
  • statusBar.border#00ff8855
  • statusBar.debuggingBackground#ff0055
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#333333
  • statusBar.noFolderBackground#f8f8f8
  • tab.activeBackground#00000000
  • tab.activeBorder#00000000
  • tab.activeBorderTop#00ff88
  • tab.activeForeground#1a1a1a
  • tab.border#00000000
  • tab.focusBorder#00000000
  • tab.hoverBackground#eeeeee44
  • tab.hoverBorder#00000000
  • tab.hoverForeground#333333
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#777777
  • tab.lastPinnedBorder#00000000
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#444444
  • tab.unfocusedInactiveForeground#888888
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3399ff
  • terminal.ansiBrightCyan#33ddff
  • terminal.ansiBrightGreen#33ff99
  • terminal.ansiBrightMagenta#ff33dd
  • terminal.ansiBrightRed#ff3377
  • terminal.ansiBrightWhite#000000
  • terminal.ansiBrightYellow#ffdd33
  • terminal.ansiCyan#00ddff
  • terminal.ansiGreen#00ff88
  • terminal.ansiMagenta#ff00dd
  • terminal.ansiRed#ff0055
  • terminal.ansiWhite#000000
  • terminal.ansiYellow#ffbb00
  • terminal.background#ffffff
  • terminal.foreground#000000
  • titleBar.activeBackground#f8f8f8
  • titleBar.activeForeground#1a1a1a
  • titleBar.border#00000000
  • titleBar.inactiveBackground#f8f8f8
  • titleBar.inactiveForeground#777777
  • tree.inactiveIndentGuidesStroke#00ff8844
  • tree.indentGuidesStroke#00ff8844
  • widget.shadow#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b5b5b5italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.special-method, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.go#0066cc
string, string.quoted, string.template, punctuation.definition.string#009944
constant.numeric, constant.language, constant.character, constant.escape#cc8800
entity.name.function, meta.function-call, variable.function, support.function, entity.name.method#00ff88bold
entity.name.class, entity.name.type, support.type, support.class, entity.name.interface#0088aa
variable, variable.parameter, variable.other, variable.language.this, variable.language.super#1a1a1a
variable.object.property, meta.object-literal.key, support.variable.property, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.field.declaration.go, variable.field.go#0077cc
entity.name.tag, punctuation.definition.tag#aa5577
entity.other.attribute-name, entity.other.attribute-name.html#cc8800
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison.go, punctuation.separator.key-value#55cc55
punctuation, punctuation.separator, punctuation.terminator#8f8f8f
constant, constant.other, support.constant#7744aa
string.regexp, constant.character.escape#00ff88
entity.name.import, entity.name.module, support.module#5577cc
punctuation.decorator#cc6600
constant.character.entity#00ff88
punctuation.definition.template-expression#00ff88
meta.struct.go variable.other.go#0077cc
variable.parameter.receiver.go#0088dd
entity.name.type.interface.go, support.type.go#0088aa
support.type.property-name.css#0066cc
meta.property-value.css#cc8800
markup.heading, entity.name.section.markdown#00ff88bold
markup.bold#000000bold
constant.language.go#0066cc
keyword.operator.address.go, keyword.operator.channel.go#55cc55
markup.italic#333333italic
markup.inline.raw, markup.fenced_code#00ff88
support.type.property-name.json#0066cc
invalid, invalid.illegal#ff0055bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart#7cb3b3
storage.type.primitive.dart, storage.type.built-in.dart#66ccff
entity.name.function.dart, support.function.dart#6366f1
variable.other.dart, variable.parameter.dart, variable.declaration.dart, meta.definition.variable.dart#e8e8e8
variable.other.property.dart, meta.field.declaration.dart#a8d0ff
keyword.control.dart, keyword.declaration.dart, storage.type.annotation.dart#66ccff
support.class.flutter, support.type.flutter, meta.function-call.dart entity.name.function.dart#dd88ff
string.interpolated.dart, punctuation.definition.interpolation.dart, meta.template.expression.dart#6366f1
storage.type.annotation.dart, meta.declaration.annotation.dart#a87cb3
entity.name.constructor, meta.constructor.dart#7cb3b3
entity.name.type.rust, storage.type.rust, storage.class.std.rust#7cb3b3
meta.macro.rust, entity.name.function.macro.rust#a87cb3
entity.name.type.swift, support.type.swift#7cb3b3
variable.language.php, variable.other.global.php#dd88ff
constant.other.symbol.ruby#c4b078
entity.name.type.class.cs, storage.type.cs#7cb3b3
entity.name.tag.cs, meta.attribute.cs#a87cb3
meta.decorator.ts, meta.decorator.tsx#a87cb3
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx#dd88ff
entity.name.tag.js.jsx, entity.name.tag.tsx#dd88ff
entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html#7aa3c4
entity.name.tag.yaml#7cb3b3
entity.name.type.class.java, storage.type.java, storage.type.generic.java#7cb3b3
entity.name.type.class.kotlin, storage.type.kotlin#7cb3b3
Carbon Code Theme by sazardev - VS Code Theme