Skip to main content
Coding Theme

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#1f2229
  • activityBar.border#f5085f
  • activityBar.foreground#f5085f
  • activityBarBadge.background#1DD8F7AA
  • badge.background#f5085f
  • badge.foreground#ffffff
  • button.background#F5085F
  • button.foreground#FFFFFF
  • button.hoverBackground#1DD8F7AA
  • diffEditor.diagonalFill#1dd8f755
  • diffEditor.insertedTextBackground#5be36a33
  • diffEditor.insertedTextBorder#5be36a55
  • diffEditor.removedTextBackground#f5085f33
  • diffEditor.removedTextBorder#f5085f55
  • diffEditor.unchangedRegionBackground#2A2F38
  • editor.background#2A2F38
  • editor.findMatchBackground#f5085f
  • editor.findMatchHighlightBackground#1dd6f725
  • editor.findMatchHighlightForeground#ffffffCC
  • editor.findRangeHighlightBackground#1dd6f720
  • editor.foreground#eaeaea
  • editor.hoverHighlightBackground#71154490
  • editor.inactiveSelectionBackground#0b0e15cc
  • editor.lineHighlightBackground#343944
  • editor.selectionBackground#081015e7
  • editor.selectionHighlightBackground#32abd440
  • editor.wordHighlightBackground#0b0e1566
  • editor.wordHighlightStrongBackground#0b0e1566
  • editorCursor.foreground#f5085f
  • editorError.border#FF1C7555
  • editorError.foreground#FF1C75
  • editorGroup.border#3d4453
  • editorGroupHeader.tabsBackground#22262e
  • editorGutter.addedBackground#5BE36A
  • editorGutter.commentRangeForeground#4B64F255
  • editorGutter.deletedBackground#F5085F
  • editorGutter.modifiedBackground#1DD8F7AA
  • editorHint.foreground#5BE36AAA
  • editorHoverWidget.statusBarBackground#1f2229
  • editorInfo.foreground#1DD8F7
  • editorLineNumber.activeForeground#f5085f
  • editorLineNumber.foreground#6c7484
  • editorOverviewRuler.addedForeground#5BE36A
  • editorOverviewRuler.border#3d4453
  • editorOverviewRuler.bracketMatchForeground#7d889f
  • editorOverviewRuler.currentContentForeground#5BE36A80
  • editorOverviewRuler.deletedForeground#F5085F99
  • editorOverviewRuler.errorForeground#ff1212b3
  • editorOverviewRuler.findMatchForeground#1DD8F7AA
  • editorOverviewRuler.incomingContentForeground#4B64F2
  • editorOverviewRuler.infoForeground#1DD8F7
  • editorOverviewRuler.inlineChatInserted#1f2229
  • editorOverviewRuler.inlineChatRemoved#F5085F30
  • editorOverviewRuler.modifiedForeground#4B64F2
  • editorOverviewRuler.rangeHighlightForeground#0063a599
  • editorOverviewRuler.selectionHighlightForeground#7d889fcc
  • editorOverviewRuler.warningForeground#F9F786
  • editorOverviewRuler.wordHighlightForeground#7d889fcc
  • editorOverviewRuler.wordHighlightStrongForeground#ff83b1cc
  • editorOverviewRuler.wordHighlightTextForeground#7d889fcc
  • editorWarning.foreground#F9F786
  • editorWidget.background#1f2229
  • editorWidget.border#3d4453
  • editorWidget.foreground#eaeaea
  • errorForeground#FF1C75
  • focusBorder#1DD8F7AA
  • gitDecoration.addedResourceForeground#66FF77
  • gitDecoration.conflictingResourceForeground#FF1C75
  • gitDecoration.deletedResourceForeground#FF1C75
  • gitDecoration.ignoredResourceForeground#6c7484
  • gitDecoration.modifiedResourceForeground#F9F786
  • gitDecoration.renamedResourceForeground#5BE36A
  • gitDecoration.stageDeletedResourceForeground#FF1C75
  • gitDecoration.stageModifiedResourceForeground#F9F786
  • gitDecoration.submoduleResourceForeground#1DD8F7AA
  • gitDecoration.untrackedResourceForeground#5BE36A
  • input.background#3d4453
  • input.foreground#eaeaea
  • inputOption.activeBackground#1DD8F7AA
  • inputOption.activeBorder#1DD8F7AA
  • list.activeSelectionBackground#22262e
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#2A2F38
  • list.errorForeground#FF1C75
  • list.hoverBackground#1d2027
  • list.inactiveSelectionBackground#2e333b
  • list.warningForeground#F9F786
  • menu.background#1f2229
  • menu.selectionBackground#2A2F38
  • menu.separatorBackground#3d4453
  • menubar.selectionBackground#2A2F38
  • minimap.errorHighlight#FF1C75
  • minimap.findMatchHighlight#1DD8F7cc
  • minimap.infoHighlight#9EFFFF
  • minimap.selectionHighlight#758DFFcc
  • minimap.selectionOccurrenceHighlight#eaeaeacc
  • minimap.warningHighlight#F9F786
  • minimapGutter.addedBackground#5BE36A
  • minimapGutter.deletedBackground#F5085F
  • minimapGutter.modifiedBackground#1DD8F7AA
  • minimapSlider.activeBackground#56637e75
  • minimapSlider.background#56637e25
  • minimapSlider.hoverBackground#56637e50
  • notebook.cellStatusBarItemHoverBackground#ffffff26
  • panel.border#3d4453
  • problemsErrorIcon.foreground#FF1C75
  • problemsInfoIcon.foreground#1DD8F7
  • problemsWarningIcon.foreground#F9F786
  • scmGraph.foreground1#f5085f
  • scmGraph.foreground2#1dd8f7aa
  • scmGraph.foreground3#E0E646
  • scmGraph.foreground4#5be36a
  • scmGraph.foreground5#C174FF
  • scmGraph.historyItemBaseRefColor#f5085f
  • scmGraph.historyItemHoverAdditionsForeground#5be36a
  • scmGraph.historyItemHoverDefaultLabelBackground#1f2229
  • scmGraph.historyItemHoverDefaultLabelForeground#eaeaea
  • scmGraph.historyItemHoverDeletionsForeground#ff1c75
  • scmGraph.historyItemHoverLabelForeground#ffffff
  • scmGraph.historyItemRefColor#1dd8f7aa
  • scmGraph.historyItemRemoteRefColor#758DFF
  • scrollbarSlider.activeBackground#6c748432
  • scrollbarSlider.background#6c748464
  • scrollbarSlider.hoverBackground#6c748496
  • sideBar.background#22262e
  • sideBar.border#3d4453
  • sideBar.dropBackground#30363f60
  • sideBarSectionHeader.background#2A2F38
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#1f2229
  • statusBar.debuggingBackground#5f4ad3
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#eaeaea99
  • statusBar.noFolderBackground#1f2229
  • statusBar.noFolderForeground#eaeaea99
  • statusBarItem.activeBackground#64739460
  • statusBarItem.compactHoverBackground#64739460
  • statusBarItem.errorBackground#c5074c
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.errorHoverBackground#2e333b
  • statusBarItem.errorHoverForeground#eaeaea99
  • statusBarItem.hoverBackground#2e333b
  • statusBarItem.hoverForeground#eaeaea99
  • statusBarItem.offlineBackground#F9F786
  • statusBarItem.offlineForeground#2e333b
  • statusBarItem.offlineHoverBackground#2e333b
  • statusBarItem.offlineHoverForeground#F9F786
  • statusBarItem.prominentBackground#1f222980
  • statusBarItem.prominentForeground#eaeaea99
  • statusBarItem.prominentHoverBackground#2e333b
  • statusBarItem.prominentHoverForeground#eaeaea99
  • statusBarItem.remoteBackground#1dd8f7AA
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.remoteHoverBackground#2e333b
  • statusBarItem.remoteHoverForeground#eaeaea99
  • statusBarItem.warningBackground#F9F786
  • statusBarItem.warningForeground#2e333b
  • statusBarItem.warningHoverBackground#F5D74C
  • statusBarItem.warningHoverForeground#2e333b
  • tab.activeBorderTop#1DD8F7AA
  • tab.hoverBackground#1d2027
  • tab.hoverForeground#7d889f
  • tab.inactiveBackground#22262e
  • tab.inactiveForeground#6c7484
  • terminal.ansiBlack#1f2229
  • terminal.ansiBlue#4B64F2
  • terminal.ansiBrightBlack#7d889f
  • terminal.ansiBrightBlue#4B64F2
  • terminal.ansiBrightCyan#1DD8F7AA
  • terminal.ansiBrightGreen#5BE36A
  • terminal.ansiBrightMagenta#794BF5
  • terminal.ansiBrightRed#f5085f
  • terminal.ansiBrightWhite#eaeaea
  • terminal.ansiBrightYellow#F9F786
  • terminal.ansiCyan#1DD8F7AA
  • terminal.ansiGreen#5BE36A
  • terminal.ansiMagenta#794BF5
  • terminal.ansiRed#f5085f
  • terminal.ansiWhite#eaeaea
  • terminal.ansiYellow#F9F786
  • terminal.background#2a2f38
  • terminal.foreground#eaeaea
  • terminalCommandDecoration.defaultBackground#7d889f
  • terminalCommandDecoration.errorBackground#f5085f
  • terminalCommandDecoration.successBackground#1DD8F7AA
  • terminalCursor.foreground#f5085f
  • terminalStickyScroll.background#343944
  • terminalSymbolIcon.aliasForeground#C174FF
  • terminalSymbolIcon.argumentForeground#1DD8F7AA
  • terminalSymbolIcon.branchForeground#eaeaea
  • terminalSymbolIcon.commitForeground#eaeaea
  • terminalSymbolIcon.fileForeground#eaeaea
  • terminalSymbolIcon.flagForeground#ffa931
  • terminalSymbolIcon.folderForeground#eaeaea
  • terminalSymbolIcon.inlineSuggestionForeground#f5085f
  • terminalSymbolIcon.methodForeground#C174FF
  • terminalSymbolIcon.optionForeground#ffa931
  • terminalSymbolIcon.optionValueForeground#1DD8F7AA
  • terminalSymbolIcon.pullRequestDoneForeground#eaeaea
  • terminalSymbolIcon.pullRequestForeground#eaeaea
  • terminalSymbolIcon.remoteForeground#eaeaea
  • terminalSymbolIcon.stashForeground#eaeaea
  • terminalSymbolIcon.symbolicLinkFileForeground#eaeaea
  • terminalSymbolIcon.symbolicLinkFolderForeground#eaeaea
  • terminalSymbolIcon.tagForeground#eaeaea
  • textLink.activeForeground#1DD8F7
  • textLink.foreground#1DD8F7AA
  • titleBar.activeBackground#1f2229
  • titleBar.activeForeground#eaeaea
  • titleBar.border#3d4453

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#eaeaea
emphasisitalic
strongbold
header#f5085f
comment#6c7484
constant.language#F9F786
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#F9F786
constant.regexp#C174FF
entity.name.tag#f5085f
entity.name.tag.css, entity.name.tag.less#758DFF
entity.other.attribute-name#66FF77
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#758DFF
invalid#ff0000
markup.underlineunderline
markup.bold#f5085fbold
markup.heading#f5085fbold
markup.italicitalic
markup.strikethroughstrikethrough
markup.inserted#5be36a
markup.deleted#f5085f
markup.changed#1dd8f7aa
punctuation.definition.quote.begin.markdown#5be36a
punctuation.definition.list.begin.markdown#758DFF
markup.inline.raw#F9F786
punctuation.definition.tag#6c7484
meta.preprocessor, entity.name.function.preprocessor#1dd8f7aa
meta.preprocessor.string#758DFF
meta.preprocessor.numeric#F9F786
meta.structure.dictionary.key.python#f153ffaa
meta.diff.header#758DFF
storage#f5085f
storage.type#C174FF
storage.modifier, keyword.operator.noexcept#569cd6
string, meta.embedded.assembly#1dd8f7aa
string.tag#1dd8f7aa
string.value#1dd8f7aa
string.regexp#ff1c75
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#758DFF
meta.template.expression#bfc4ca
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#9EFFFF
keyword#758DFF
keyword.control#758DFF
keyword.operator#aeaeae
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#758DFF
keyword.other.unit#F9F786
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#1dd8f7
support.function.git-rebase#9EFFFF
constant.sha.git-rebase#9cffa8
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#BFC4CA
variable.language#1dd8f7
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#F9F786
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#5be36a
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class, punctuation.separator.namespace.ruby#5be36a
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.directive.using, keyword.other.operator, entity.name.operator#C174FF
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder#9EFFFF
variable.other.constant, variable.other.enummember#1DD8F7
meta.object-literal.key#9EFFFF
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#e5b567
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#d7a85d
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#FF2A79
keyword.operator.or.regexp, keyword.control.anchor.regexp#e7d889
keyword.operator.quantifier.regexp#d7a85d
constant.character, constant.other.option#1DD8F7
constant.character.escape#F9F786
entity.name.label#b2b8c3
comment, entity.other.attribute-name, keyword, markup.underline.link, storage.modifier, storage.type, string.url, variable.language.super, variable.language.thisitalic
keyword.operator, keyword.other.type, storage.modifier.import, storage.modifier.package, storage.type.built-in, storage.type.function.arrow, storage.type.generic, storage.type.java, storage.type.primitive
token.info-token#4cc8f5
token.warn-token#f5b642
token.error-token#ff3366
token.debug-token#9e5bff
ASUS ROG Theme 2025 by cedrickernec - VS Code Theme