Code With Colors Pro
Publisher: veduishuThemes in package: 10
A comprehensive VS Code theme with semantic colors, bracket colorization, accessibility features, and multiple variants (Dark, Light, High Contrast, Dimmed).
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#7A3FFF30
- activityBar.activeBorder#7A3FFF
- activityBar.background#1A0F2E
- activityBar.border#7A3FFF40
- activityBar.foreground#E6E6E6
- activityBar.inactiveForeground#9B7FD9
- activityBarBadge.background#FF79C6
- activityBarBadge.foreground#FFFFFF
- badge.background#7A3FFF
- badge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#7A3FFF
- breadcrumb.background#050505
- breadcrumb.focusForeground#E6E6E6
- breadcrumb.foreground#777777
- breadcrumbPicker.background#0E0E0E
- button.background#7A3FFF
- button.foreground#FFFFFF
- button.hoverBackground#9B5CFF
- dropdown.background#0E0E0E
- dropdown.border#7A3FFF
- dropdown.foreground#CCCCCC
- editor.background#050505
- editor.findMatchBackground#7A3FFF55
- editor.findMatchHighlightBackground#7A3FFF33
- editor.foreground#E6E6E6
- editor.lineHighlightBackground#10101080
- editor.selectionBackground#7A3FFF40
- editor.selectionHighlightBackground#7A3FFF22
- editor.wordHighlightBackground#7A3FFF20
- editor.wordHighlightStrongBackground#7A3FFF30
- editorBracketHighlight.foreground1#FFD700
- editorBracketHighlight.foreground2#DA70D6
- editorBracketHighlight.foreground3#87CEEB
- editorBracketHighlight.foreground4#FF6347
- editorBracketHighlight.foreground5#98FB98
- editorBracketHighlight.foreground6#FFA500
- editorBracketMatch.background#20202080
- editorBracketMatch.border#7A3FFF
- editorCursor.foreground#FFFFFF
- editorGroup.border#111111
- editorGroupHeader.tabsBackground#0E0E0E
- editorGutter.addedBackground#50FA7B
- editorGutter.background#050505
- editorGutter.deletedBackground#FF5555
- editorGutter.modifiedBackground#FFB86C
- editorIndentGuide.activeBackground1#7A3FFF
- editorIndentGuide.activeBackground2#FF79C6
- editorIndentGuide.activeBackground3#4FC1FF
- editorIndentGuide.activeBackground4#50FA7B
- editorIndentGuide.activeBackground5#FFB86C
- editorIndentGuide.activeBackground6#FF5555
- editorIndentGuide.background1#1F1F1F
- editorIndentGuide.background2#2A2A2A
- editorIndentGuide.background3#353535
- editorIndentGuide.background4#404040
- editorIndentGuide.background5#4B4B4B
- editorIndentGuide.background6#565656
- editorLineNumber.activeForeground#FFFFFF
- editorLineNumber.foreground#555555
- editorOverviewRuler.addedForeground#50FA7B
- editorOverviewRuler.border#050505
- editorOverviewRuler.deletedForeground#FF5555
- editorOverviewRuler.errorForeground#FF5555
- editorOverviewRuler.findMatchForeground#7A3FFF
- editorOverviewRuler.infoForeground#4FC1FF
- editorOverviewRuler.modifiedForeground#FFB86C
- editorOverviewRuler.warningForeground#FFB86C
- focusBorder#7A3FFF
- foreground#E6E6E6
- gitDecoration.addedResourceForeground#50FA7B
- gitDecoration.conflictingResourceForeground#FF79C6
- gitDecoration.deletedResourceForeground#FF5555
- gitDecoration.ignoredResourceForeground#555555
- gitDecoration.modifiedResourceForeground#FFB86C
- gitDecoration.untrackedResourceForeground#4FC1FF
- input.background#0E0E0E
- input.border#7A3FFF
- input.foreground#FFFFFF
- input.placeholderForeground#777777
- inputOption.activeBorder#7A3FFF
- inputValidation.errorBackground#FF5555
- inputValidation.errorBorder#FF5555
- inputValidation.warningBackground#FFB86C
- inputValidation.warningBorder#FFB86C
- list.activeSelectionBackground#7A3FFF
- list.activeSelectionForeground#FFFFFF
- list.focusBackground#7A3FFF60
- list.highlightForeground#7A3FFF
- list.hoverBackground#7A3FFF20
- list.inactiveSelectionBackground#7A3FFF40
- minimap.background#05050580
- minimap.errorHighlight#FF5555
- minimap.findMatchHighlight#7A3FFF
- minimap.selectionHighlight#7A3FFF80
- minimap.warningHighlight#FFB86C
- minimapGutter.addedBackground#50FA7B
- minimapGutter.deletedBackground#FF5555
- minimapGutter.modifiedBackground#FFB86C
- notificationCenter.border#7A3FFF
- notificationCenterHeader.background#0B0B0B
- notifications.background#0E0E0E
- notifications.border#7A3FFF
- notifications.foreground#E6E6E6
- notificationsErrorIcon.foreground#FF5555
- notificationsInfoIcon.foreground#4FC1FF
- notificationsWarningIcon.foreground#FFB86C
- notificationToast.border#7A3FFF
- panel.background#0E0E0E
- panel.border#7A3FFF
- panelTitle.activeBorder#7A3FFF
- panelTitle.activeForeground#FFFFFF
- panelTitle.inactiveForeground#777777
- selection.background#7A3FFF80
- sideBar.background#0F0A1A
- sideBar.border#7A3FFF30
- sideBar.foreground#D4C5F9
- sideBarSectionHeader.background#1A0F2E
- sideBarSectionHeader.border#7A3FFF20
- sideBarSectionHeader.foreground#FFFFFF
- sideBarTitle.foreground#FFFFFF
- statusBar.background#7A3FFF
- statusBar.border#A970FF
- statusBar.debuggingBackground#FF5555
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#FFFFFF
- statusBar.noFolderBackground#6A30FF
- statusBarItem.errorBackground#FF5555
- statusBarItem.hoverBackground#9B5CFF
- statusBarItem.prominentBackground#7A3FFF
- statusBarItem.prominentHoverBackground#9B5CFF
- statusBarItem.warningBackground#FFB86C
- tab.activeBackground#050505
- tab.activeBorder#7A3FFF
- tab.activeForeground#FFFFFF
- tab.border#111111
- tab.inactiveBackground#141414
- tab.inactiveForeground#777777
- tab.modifiedBorder#FFB86C
- tab.unfocusedActiveBorder#7A3FFF60
- tab.unfocusedModifiedBorder#FFB86C60
- terminal.ansiBlack#000000
- terminal.ansiBlue#4FC1FF
- terminal.ansiBrightBlack#555555
- terminal.ansiBrightBlue#6DD5FF
- terminal.ansiBrightCyan#A4FFFF
- terminal.ansiBrightGreen#69FF94
- terminal.ansiBrightMagenta#FF92D0
- terminal.ansiBrightRed#FF6E6E
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFCC95
- terminal.ansiCyan#8BE9FD
- terminal.ansiGreen#50FA7B
- terminal.ansiMagenta#FF79C6
- terminal.ansiRed#FF5555
- terminal.ansiWhite#E6E6E6
- terminal.ansiYellow#FFB86C
- terminal.background#050505
- terminal.foreground#E6E6E6
- terminal.selectionBackground#7A3FFF40
- titleBar.activeBackground#0B0B0B
- titleBar.activeForeground#E6E6E6
- titleBar.border#111111
- titleBar.inactiveBackground#0B0B0B
- titleBar.inactiveForeground#777777
- widget.shadow#00000080
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment | #7FBF7F | italic |
| comment.block.documentation | #8FD68F | italic |
| keyword, keyword.control, storage, storage.type | #C586FF | — |
| keyword.operator | #FF79C6 | — |
| keyword.operator.new | #C586FF | — |
| string, string.quoted | #4FC1FF | — |
| string.regexp | #50FA7B | bold |
| string.template | #4FC1FF | — |
| punctuation.definition.string.begin.regexp | #FF79C6 | — |
| punctuation.definition.string.end.regexp | #FF79C6 | — |
| keyword.operator.quantifier.regexp | #FFB86C | — |
| constant.character.escape.regexp | #FF79C6 | — |
| constant.numeric | #FFB86C | — |
| constant.language | #FFB86C | — |
| constant.language.boolean | #FF79C6 | — |
| constant.language.null | #FF79C6 | — |
| variable | #FFD700 | — |
| variable.parameter | #FFCB6B | — |
| variable.other.property | #82AAFF | — |
| variable.language | #FF79C6 | — |
| variable.language.this | #FF79C6 | italic |
| variable.language.super | #FF79C6 | italic |
| entity.name.function | #56B6FF | — |
| entity.name.method | #61AFEF | — |
| entity.name.type.class | #3ECF8E | — |
| entity.name.type.interface | #3ECF8E | italic |
| entity.name.type.enum | #FF6E6E | — |
| entity.name.namespace | #4FC1FF | — |
| entity.name.tag | #FF5370 | — |
| entity.other.attribute-name | #C3E88D | — |
| entity.other.inherited-class | #3ECF8E | italic |
| support.function | #E5C07B | — |
| support.variable | #D4D4D4 | — |
| support.class | #3ECF8E | — |
| support.type | #82AAFF | — |
| support.constant | #FFB86C | — |
| meta.decorator | #FF79C6 | — |
| meta.tag | #FF5370 | — |
| meta.attribute | #C3E88D | — |
| punctuation | #BBBBBB | — |
| punctuation.bracket | #FFFFFF | — |
| punctuation.definition | #BBBBBB | — |
| markup.heading | #FF79C6 | bold |
| markup.bold | #FFB86C | bold |
| markup.italic | #4FC1FF | italic |
| markup.underline.link | #56B6FF | underline |
| markup.inline.raw | #50FA7B | — |
| markup.fenced_code.block | #E6E6E6 | — |
| markup.quote | #7FBF7F | italic |
| markup.list | #FFB86C | — |
| meta.jsx.children | #E6E6E6 | — |
| support.class.component.jsx | #3ECF8E | — |
| support.class.component.tsx | #3ECF8E | — |
| entity.name.tag.jsx | #FF5370 | — |
| entity.name.tag.tsx | #FF5370 | — |
| entity.other.attribute-name.jsx | #C3E88D | — |
| entity.other.attribute-name.tsx | #C3E88D | — |
| punctuation.definition.tag.jsx | #FF5370 | — |
| punctuation.definition.tag.tsx | #FF5370 | — |
| entity.name.function.python | #56B6FF | — |
| entity.name.type.class.python | #3ECF8E | — |
| support.type.python | #82AAFF | — |
| variable.parameter.function.python | #FFCB6B | — |
| meta.function.decorator.python | #FF79C6 | — |
| entity.name.function.go | #56B6FF | — |
| entity.name.type.go | #3ECF8E | — |
| keyword.function.go | #C586FF | — |
| entity.name.function.rust | #56B6FF | — |
| entity.name.type.rust | #3ECF8E | — |
| storage.type.rust | #C586FF | — |
| keyword.operator.rust | #FF79C6 | — |
| support.class.console.js | #56B6FF | — |
| variable.language.this.js | #FF79C6 | — |
| support.type.property-name.css | #82AAFF | — |
| entity.name.tag.css | #FF79C6 | — |
| entity.name.tag.html | #FF5370 | — |
| entity.other.attribute-name.html | #C3E88D | — |