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#dc2626
  • activityBar.activeFocusBorder#00000000
  • activityBar.background#090606
  • activityBar.border#00000000
  • activityBar.dropBorder#00000000
  • activityBar.foreground#d0d0d0
  • activityBar.inactiveForeground#606060
  • activityBarBadge.background#dc2626
  • activityBarBadge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#dc2626
  • breadcrumb.background#0a0a0a
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#999999
  • button.background#dc2626
  • button.foreground#ffffff
  • button.hoverBackground#b91c1c
  • contrastActiveBorder#dc2626
  • contrastBorder#333333
  • diffEditor.insertedLineBackground#16a34a11
  • diffEditor.insertedTextBackground#16a34a22
  • diffEditor.removedLineBackground#dc262611
  • diffEditor.removedTextBackground#dc262622
  • editor.background#120e0e
  • editor.findMatchBackground#f59e0b44
  • editor.findMatchHighlightBackground#f59e0b22
  • editor.foreground#e6e6e6
  • editor.lineHighlightBackground#00000000
  • editor.rangeHighlightBackground#dc262611
  • editor.selectionBackground#dc262633
  • editor.selectionHighlightBackground#dc262622
  • editor.wordHighlightBackground#dc262615
  • editor.wordHighlightStrongBackground#dc262625
  • editorCursor.foreground#dc2626
  • editorGroupHeader.border#00000000
  • editorGroupHeader.tabsBackground#080808
  • editorGroupHeader.tabsBorder#00000000
  • editorHoverWidget.background#0a0a0a
  • editorHoverWidget.border#333333
  • editorIndentGuide.activeBackground1#dc2626
  • editorIndentGuide.background1#1c1c1c
  • editorLineNumber.activeForeground#dc2626
  • editorLineNumber.foreground#454545
  • editorRuler.foreground#1c1c1c
  • editorWhitespace.foreground#2a2a2a
  • editorWidget.background#0a0a0a
  • editorWidget.border#333333
  • focusBorder#00000000
  • gitDecoration.addedResourceForeground#16a34a
  • gitDecoration.conflictingResourceForeground#c026d3
  • gitDecoration.deletedResourceForeground#dc2626
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#f59e0b
  • gitDecoration.untrackedResourceForeground#2563eb
  • input.background#1a1a1a
  • input.border#333333
  • input.foreground#ffffff
  • inputOption.activeBorder#dc2626
  • list.activeSelectionBackground#dc262611
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#dc262622
  • list.errorForeground#ff6b6b
  • list.focusBackground#dc262622
  • list.focusForeground#ffffff
  • list.focusHighlightForeground#dc2626
  • list.hoverBackground#dc262615
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#dc262611
  • list.inactiveSelectionForeground#ffffff
  • list.warningForeground#f59e0b
  • menu.background#0a0a0a
  • menu.border#333333
  • menu.foreground#ffffff
  • menu.selectionBackground#1a1a1a
  • menu.selectionForeground#ffffff
  • minimap.background#000000
  • minimap.errorHighlight#dc2626
  • minimap.findMatchHighlight#2563eb44
  • minimap.selectionHighlight#dc262644
  • minimap.warningHighlight#f59e0b
  • notificationCenter.border#333333
  • notificationCenterHeader.background#0a0a0a
  • notifications.background#0a0a0a
  • notifications.border#333333
  • notifications.foreground#ffffff
  • notificationToast.border#333333
  • panel.background#050505
  • panel.border#1a1a1a
  • panelTitle.activeBorder#dc2626
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#666666
  • peekView.border#dc2626
  • peekViewEditor.background#0a0a0a
  • peekViewResult.background#050505
  • progressBar.background#dc2626
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#dc262644
  • scrollbarSlider.background#33333344
  • scrollbarSlider.hoverBackground#44444444
  • sideBar.background#0a0a0a
  • sideBar.border#00000000
  • sideBar.foreground#b8b8b8
  • sideBarSectionHeader.background#00000000
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#d0d0d0
  • sideBarTitle.foreground#d0d0d0
  • statusBar.background#080808
  • statusBar.border#dc262633
  • statusBar.debuggingBackground#dc2626
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#b8b8b8
  • statusBar.noFolderBackground#080808
  • tab.activeBackground#00000000
  • tab.activeBorder#00000000
  • tab.activeBorderTop#dc2626
  • tab.activeForeground#d0d0d0
  • tab.border#00000000
  • tab.focusBorder#00000000
  • tab.hoverBackground#0f0f0f22
  • tab.hoverBorder#00000000
  • tab.hoverForeground#b8b8b8
  • tab.inactiveBackground#00000000
  • tab.inactiveForeground#707070
  • tab.lastPinnedBorder#00000000
  • tab.unfocusedActiveBorder#00000000
  • tab.unfocusedActiveBorderTop#00000000
  • tab.unfocusedActiveForeground#a0a0a0
  • tab.unfocusedInactiveForeground#606060
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2563eb
  • terminal.ansiCyan#0891b2
  • terminal.ansiGreen#16a34a
  • terminal.ansiMagenta#c026d3
  • terminal.ansiRed#dc2626
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#f59e0b
  • terminal.background#000000
  • terminal.foreground#f5f5f5
  • titleBar.activeBackground#080808
  • titleBar.activeForeground#d0d0d0
  • titleBar.border#00000000
  • titleBar.inactiveBackground#080808
  • titleBar.inactiveForeground#606060
  • tree.inactiveIndentGuidesStroke#dc262633
  • tree.indentGuidesStroke#dc262633
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#666666italic
variable, string constant.other.placeholder#e6e6e6—
entity.name.function, meta.require, support.function.any-method#dc2626—
entity.name.class, entity.name.type.class#f59e0b—
keyword, storage.type, storage.modifier#c026d3—
string, punctuation.definition.string#16a34a—
constant.numeric#2563eb—
constant.language, support.constant, constant.character, constant.escape#0891b2—
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