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.activeBackground#262b2f
  • activityBar.activeBorder#70393b
  • activityBar.background#1a1f23
  • activityBar.border#262b2f
  • activityBar.foreground#d4d4d4
  • activityBar.inactiveForeground#d4d4d4c9
  • activityBarBadge.background#70393b
  • activityBarBadge.foreground#d4d4d4
  • badge.background#8b4448
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#1a1f23
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#b6b6b6
  • button.background#70393b
  • button.foreground#ffffff
  • button.hoverBackground#8b4448
  • button.secondaryBackground#70393b
  • button.secondaryForeground#d4d4d4
  • button.secondaryHoverBackground#454e51
  • checkbox.background#1a1f23
  • checkbox.border#202525
  • checkbox.foreground#d4d4d4
  • debugExceptionWidget.background#1c2124
  • debugExceptionWidget.border#202525
  • debugToolBar.background#1c2124
  • debugToolBar.border#202525
  • diffEditor.border#262b2f
  • diffEditor.insertedTextBackground#3eb24033
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#cb3a3a33
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#1a1f23
  • dropdown.border#202525
  • dropdown.foreground#d4d4d4
  • editor.background#1a1f23
  • editor.findMatchBackground#5f73adb1
  • editor.findMatchBorder#5f73adb1
  • editor.findMatchHighlightBackground#d3692568
  • editor.findMatchHighlightBorder#d3692568
  • editor.findRangeHighlightBackground#3a3d4142
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#2678614d
  • editor.foreground#c0d2d3
  • editor.hoverHighlightBackground#45494b7f
  • editor.inactiveSelectionBackground#7d434640
  • editor.lineHighlightBackground#5b808418
  • editor.lineHighlightBorder#5b808418
  • editor.rangeHighlightBackground#ffffff16
  • editor.rangeHighlightBorder#ffffff16
  • editor.selectionBackground#262b2f99
  • editor.selectionHighlightBackground#89debe2e
  • editor.selectionHighlightBorder#89debe2e
  • editor.wordHighlightBackground#ffffff0e
  • editor.wordHighlightBorder#ffffff0e
  • editor.wordHighlightStrongBackground#1b605a7f
  • editor.wordHighlightStrongBorder#1b605a
  • editorBracketMatch.background#383f4496
  • editorBracketMatch.border#383f4496
  • editorCodeLens.foreground#999999
  • editorCursor.background#000000
  • editorCursor.foreground#adafaeb7
  • editorError.background#d359412a
  • editorError.border#00000000
  • editorError.foreground#d35941
  • editorGroup.border#262b2f
  • editorGroup.emptyBackground#1a1f23
  • editorGroupHeader.border#20252500
  • editorGroupHeader.tabsBackground#1a1f23
  • editorGroupHeader.tabsBorder#202525
  • editorGutter.addedBackground#bab713
  • editorGutter.background#1a1f23
  • editorGutter.commentRangeForeground#c2c2c2
  • editorGutter.deletedBackground#be2465
  • editorGutter.foldingControlForeground#c2c2c2
  • editorGutter.modifiedBackground#1cd1b8
  • editorHoverWidget.background#1c2124
  • editorHoverWidget.border#3c4343
  • editorHoverWidget.foreground#bebebe
  • editorIndentGuide.activeBackground1#5c656b
  • editorIndentGuide.background1#373c3f
  • editorInfo.background#2c7ec700
  • editorInfo.border#00000000
  • editorInfo.foreground#2c7ec7b9
  • editorLineNumber.activeForeground#7e8a88
  • editorLineNumber.foreground#5a6562
  • editorLink.activeForeground#0eea8d
  • editorMarkerNavigation.background#1c2124
  • editorMarkerNavigationError.background#6d3b3b
  • editorMarkerNavigationInfo.background#3f5e8e
  • editorMarkerNavigationWarning.background#846c10
  • editorOverviewRuler.background#00000000
  • editorOverviewRuler.border#00000000
  • editorRuler.foreground#202525
  • editorSuggestWidget.background#1c2124
  • editorSuggestWidget.border#3c4343
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#d76d73
  • editorSuggestWidget.selectedBackground#d76d733a
  • editorWarning.background#e4c63d00
  • editorWarning.border#00000000
  • editorWarning.foreground#e4c53d6c
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#1a1f23
  • editorWidget.foreground#d4d4d4
  • editorWidget.resizeBorder#70393b
  • focusBorder#7f7f7f70
  • foreground#cccccc
  • gitDecoration.addedResourceForeground#81b88b
  • gitDecoration.conflictingResourceForeground#6c6cc4
  • gitDecoration.deletedResourceForeground#c74e39
  • gitDecoration.ignoredResourceForeground#8c8c8c
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.stageDeletedResourceForeground#c74e39
  • gitDecoration.stageModifiedResourceForeground#e2c08d
  • gitDecoration.submoduleResourceForeground#8db9e2
  • gitDecoration.untrackedResourceForeground#73c991
  • icon.foreground#cccccc
  • input.background#1a1f23
  • input.border#202525
  • input.foreground#d4d4d4
  • input.placeholderForeground#7f7f7f
  • inputOption.activeBackground#4d4b4b
  • inputOption.activeBorder#007acc00
  • inputOption.activeForeground#d4d4d4
  • list.activeSelectionBackground#70393b
  • list.activeSelectionForeground#d4d4d4
  • list.dropBackground#262b2f
  • list.focusBackground#5a2f31
  • list.focusForeground#cccccc
  • list.highlightForeground#bd6669
  • list.hoverBackground#262b2f
  • list.hoverForeground#d4d4d4
  • list.inactiveSelectionBackground#262b2f
  • list.inactiveSelectionForeground#d4d4d4
  • listFilterWidget.background#653723
  • listFilterWidget.noMatchesOutline#be1100
  • listFilterWidget.outline#00000000
  • menu.background#1c2124
  • menu.border#2b3133
  • menu.foreground#cccccc
  • menu.selectionBackground#8444448f
  • menu.selectionBorder#00000000
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#2b3133
  • menubar.selectionBackground#ffffff20
  • menubar.selectionBorder#00000000
  • menubar.selectionForeground#dedede
  • merge.commonContentBackground#2025257f
  • merge.commonHeaderBackground#2f36367f
  • merge.currentContentBackground#2038347f
  • merge.currentHeaderBackground#2466577f
  • merge.incomingContentBackground#2830757f
  • merge.incomingHeaderBackground#3b46a17f
  • minimap.background#1a1f23
  • minimap.errorHighlight#d35941
  • minimap.findMatchHighlight#5f73adb1
  • minimap.selectionHighlight#2f3636b1
  • minimap.warningHighlight#e4c63dad
  • minimapGutter.addedBackground#bab713
  • minimapGutter.deletedBackground#be2465
  • minimapGutter.modifiedBackground#1cd1b8
  • notificationCenter.border#202525
  • notificationCenterHeader.background#1a1f23
  • notificationCenterHeader.foreground#cccccc
  • notifications.background#1c2124
  • notifications.border#202525
  • notifications.foreground#d4d4d4
  • notificationsErrorIcon.foreground#cb6a57
  • notificationsInfoIcon.foreground#3ecfc8
  • notificationsWarningIcon.foreground#d9b71f
  • notificationToast.border#2b3232
  • panel.background#1a1f23
  • panel.border#262b2f
  • panelSection.border#202525
  • panelTitle.activeBorder#8b4448
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#b6b6b6
  • peekView.border#00cc93
  • peekViewEditor.background#003023
  • peekViewEditor.matchHighlightBackground#944242c7
  • peekViewEditor.matchHighlightBorder#944242
  • peekViewEditorGutter.background#003023
  • peekViewResult.background#1c2124
  • peekViewResult.fileForeground#d5d5d5
  • peekViewResult.lineForeground#c9c9c9
  • peekViewResult.matchHighlightBackground#9447474d
  • peekViewResult.selectionBackground#003023
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#1c2124
  • peekViewTitleDescription.foreground#c9c9c9
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#202525
  • pickerGroup.foreground#9d9c9c
  • progressBar.background#bd6669
  • scrollbar.shadow#ffffff00
  • scrollbarSlider.activeBackground#252c2c
  • scrollbarSlider.background#202525
  • scrollbarSlider.hoverBackground#2a3030
  • selection.background#492f2f
  • settings.focusedRowBackground#ffffff07
  • settings.headerForeground#cccccc
  • sideBar.background#1a1f23
  • sideBar.border#262b2f
  • sideBar.dropBackground#202525
  • sideBar.foreground#d4d4d4
  • sideBarSectionHeader.background#1f2428
  • sideBarSectionHeader.border#262b2f
  • sideBarSectionHeader.foreground#d4d4d4
  • sideBarTitle.foreground#7f7f7f
  • statusBar.background#1a1f23
  • statusBar.border#262b2f
  • statusBar.debuggingBackground#301f1f
  • statusBar.debuggingBorder#492f2f
  • statusBar.debuggingForeground#d4d4d4
  • statusBar.foreground#b4b4b4
  • statusBar.noFolderBackground#1a1f23
  • statusBar.noFolderBorder#262b2f
  • statusBar.noFolderForeground#d4d4d4
  • statusBarItem.activeBackground#FFFFFF25
  • statusBarItem.hoverBackground#70393bb5
  • statusBarItem.remoteBackground#70393b
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#252b2e
  • tab.activeBorder#00000000
  • tab.activeBorderTop#8b4448
  • tab.activeForeground#ffffff
  • tab.border#20252500
  • tab.hoverBackground#202527
  • tab.hoverBorder#ffffff00
  • tab.hoverForeground#b0b0b0
  • tab.inactiveBackground#1a1f23
  • tab.inactiveForeground#7f7f7f
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2472c8
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#3b8eea
  • terminal.ansiBrightCyan#29b8db
  • terminal.ansiBrightGreen#23d18b
  • terminal.ansiBrightMagenta#d670d6
  • terminal.ansiBrightRed#f14c4c
  • terminal.ansiBrightWhite#e5e5e5
  • terminal.ansiBrightYellow#f5f543
  • terminal.ansiCyan#11a8cd
  • terminal.ansiGreen#0dbc79
  • terminal.ansiMagenta#bc3fbc
  • terminal.ansiRed#cd3131
  • terminal.ansiWhite#e5e5e5
  • terminal.ansiYellow#e5e510
  • terminal.border#202525
  • terminal.foreground#cccccc
  • terminal.selectionBackground#ffffff20
  • terminalCursor.background#8b4448
  • terminalCursor.foreground#ffffff
  • textLink.foreground#9b5255
  • titleBar.activeBackground#1a1f23
  • titleBar.activeForeground#cccccc
  • titleBar.border#262b2f
  • titleBar.inactiveBackground#1a1f23
  • titleBar.inactiveForeground#7f7f7f
  • tree.indentGuidesStroke#262b2f
  • walkThrough.embeddedEditorBackground#00000050
  • widget.shadow#202525

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#d0dedc
emphasisitalic
variable.languageitalic
strongbold
comment#71838fitalic
constant.character#EBCB8B
constant.character.escape#EBCB8B
constant.language#da8383
constant.numeric#b893de
constant.regexp#EBCB8B
entity.name.class, entity.name.type.class#e0c6c8
entity.name.function#c8ad6fitalic
entity.name.tag#da8383
entity.other.attribute-name#e0c6c8
entity.other.inherited-class#e0c6c8bold italic
invalid.deprecated#d0dedcitalic
invalid.illegal#d0dedc
keyword#da8383
keyword.operator#628ddd
keyword.other.new#da8383
markup.boldbold
markup.changed#EBCB8B
markup.deleted#BF616A
markup.inserted#98c379
meta.preprocessor#3e80ff
punctuation#ECEFF4
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters#ECEFF4
punctuation.definition.tag#da8383
punctuation.definition.comment, punctuation.end.definition.comment, punctuation.start.definition.comment#71838F
punctuation.section#ECEFF4
punctuation.section.embedded.begin, punctuation.section.embedded.end#da8383
punctuation.terminator#da8383
punctuation.definition.variable#da8383
storage#da8383
string#98c379
string.regexp#EBCB8B
support.class#e0c6c8italic
support.constant#da8383
support.function#b59b5d
support.function.construct#da8383
support.type#e0c6c8italic
support.type.exception#e0c6c8italic
token.debug-token#b893de
token.error-token#bf616a
token.info-token#c8ad6f
token.warn-token#ebcb8b
variable.other#d0dedc
variable.language#da8383italic
variable.parameter#d0dedc
punctuation.separator.pointer-access.c#da8383
source.c meta.preprocessor.include, source.c string.quoted.other.lt-gt.include#e0c6c8
source.cpp keyword.control.directive.conditional, source.cpp punctuation.definition.directive, source.c keyword.control.directive.conditional, source.c punctuation.definition.directive#DA8383bold
source.css constant.other.color.rgb-value#b893de
source.css meta.property-value#c8ad6f
source.css keyword.control.at-rule.media, source.css keyword.control.at-rule.media punctuation.definition.keyword#D08770
source.css punctuation.definition.keyword#da8383
source.css support.type.property-name#d0dedc
source.diff meta.diff.range.context#e0c6c8
source.diff meta.diff.header.from-file#e0c6c8
source.diff punctuation.definition.from-file#e0c6c8
source.diff punctuation.definition.range#e0c6c8
source.diff punctuation.definition.separator#da8383
entity.name.type.module.elixir#e0c6c8
variable.other.readwrite.module.elixir#d0dedcbold
constant.other.symbol.elixir#d0dedcbold
variable.other.constant.elixir#e0c6c8
source.go constant.other.placeholder.go#EBCB8B
source.java comment.block.documentation.javadoc punctuation.definition.entity.html#da8383
source.java constant.other#d0dedc
source.java keyword.other.documentation#e0c6c8
source.java keyword.other.documentation.author.javadoc#e0c6c8
source.java keyword.other.documentation.directive, source.java keyword.other.documentation.custom#e0c6c8
source.java keyword.other.documentation.see.javadoc#e0c6c8
source.java meta.method-call meta.method#c8ad6f
source.java meta.tag.template.link.javadoc, source.java string.other.link.title.javadoc#e0c6c8
source.java meta.tag.template.value.javadoc#c8ad6f
source.java punctuation.definition.keyword.javadoc#e0c6c8
source.java punctuation.definition.tag.begin.javadoc, source.java punctuation.definition.tag.end.javadoc#616E88
source.java storage.modifier.import#e0c6c8
source.java storage.modifier.package#e0c6c8
source.java storage.type#e0c6c8
source.java storage.type.annotation#D08770
source.java storage.type.generic#e0c6c8
source.java storage.type.primitive#da8383
source.js punctuation.decorator, source.js meta.decorator variable.other.readwrite, source.js meta.decorator entity.name.function#D08770
source.js meta.object-literal.key#c8ad6f
source.js storage.type.class.jsdoc#e0c6c8
source.js string.quoted.template punctuation.quasi.element.begin, source.js string.quoted.template punctuation.quasi.element.end, source.js string.template punctuation.definition.template-expression#da8383
source.js string.quoted.template meta.method-call.with-arguments#ECEFF4
source.js string.template meta.template.expression support.variable.property, source.js string.template meta.template.expression variable.other.object#d0dedc
source.js support.type.primitive#da8383
source.js variable.other.object#d0dedc
source.js variable.other.readwrite.alias#e0c6c8
source.js meta.embedded.line meta.brace.square, source.js meta.embedded.line meta.brace.round, source.js string.quoted.template meta.brace.square, source.js string.quoted.template meta.brace.round#ECEFF4
text.html.basic constant.character.entity.html#EBCB8B
text.html.basic constant.other.inline-data#D08770italic
text.html.basic meta.tag.sgml.doctype#3e80ff
text.html.basic punctuation.definition.entity#da8383
source.properties entity.name.section.group-title.ini#c8ad6f
source.properties punctuation.separator.key-value.ini#da8383
text.html.markdown markup.fenced_code.block, text.html.markdown markup.fenced_code.block punctuation.definition#e0c6c8
markup.heading#c8ad6f
text.html.markdown markup.inline.raw, text.html.markdown markup.inline.raw punctuation.definition.raw#e0c6c8
text.html.markdown markup.italicitalic
text.html.markdown markup.underline.linkunderline
text.html.markdown beginning.punctuation.definition.list#da8383
text.html.markdown beginning.punctuation.definition.quote#e0c6c8
text.html.markdown markup.quote#616E88
text.html.markdown constant.character.math.tex#da8383
text.html.markdown punctuation.definition.math.begin, text.html.markdown punctuation.definition.math.end#3e80ff
text.html.markdown punctuation.definition.function.math.tex#c8ad6f
text.html.markdown punctuation.math.operator.latex#da8383
text.html.markdown punctuation.definition.heading#da8383
text.html.markdown punctuation.definition.constant, text.html.markdown punctuation.definition.string#da8383
text.html.markdown constant.other.reference.link, text.html.markdown string.other.link.description, text.html.markdown string.other.link.title#c8ad6f
source.perl punctuation.definition.variable#d0dedc
source.php meta.function-call, source.php meta.function-call.object#c8ad6f
source.python entity.name.function.decorator, source.python meta.function.decorator support.type#D08770
source.python meta.function-call.generic#c8ad6f
source.python support.type#c8ad6f
source.python variable.parameter.function.language#d0dedc
source.python meta.function.parameters variable.parameter.function.language.special.self#da8383
source.rust entity.name.type#e0c6c8
source.rust meta.macro entity.name.function#c8ad6fbold
source.rust meta.attribute, source.rust meta.attribute punctuation, source.rust meta.attribute keyword.operator#3e80ff
source.rust entity.name.type.traitbold
source.rust punctuation.definition.interpolation#EBCB8B
source.css.scss punctuation.definition.interpolation.begin.bracket.curly, source.css.scss punctuation.definition.interpolation.end.bracket.curly#da8383
source.css.scss variable.interpolation#d0dedcitalic
source.ts punctuation.decorator, source.ts meta.decorator variable.other.readwrite, source.ts meta.decorator entity.name.function, source.tsx punctuation.decorator, source.tsx meta.decorator variable.other.readwrite, source.tsx meta.decorator entity.name.function#D08770
source.ts meta.object-literal.key, source.tsx meta.object-literal.key#d0dedc
source.ts meta.object-literal.key entity.name.function, source.tsx meta.object-literal.key entity.name.function#c8ad6f
source.ts support.class, source.ts support.type, source.ts entity.name.type, source.ts entity.name.class, source.tsx support.class, source.tsx support.type, source.tsx entity.name.type, source.tsx entity.name.class#e0c6c8
source.ts support.constant.math, source.ts support.constant.dom, source.ts support.constant.json, source.tsx support.constant.math, source.tsx support.constant.dom, source.tsx support.constant.json#e0c6c8
source.ts support.variable, source.tsx support.variable#d0dedc
source.ts meta.embedded.line meta.brace.square, source.ts meta.embedded.line meta.brace.round, source.tsx meta.embedded.line meta.brace.square, source.tsx meta.embedded.line meta.brace.round#ECEFF4
text.xml entity.name.tag.namespace#e0c6c8
text.xml keyword.other.doctype#3e80ff
text.xml meta.tag.preprocessor entity.name.tag#3e80ff
text.xml string.unquoted.cdata, text.xml string.unquoted.cdata punctuation.definition.string#D08770italic
source.yaml entity.name.tag#e0c6c8

Shiki preview

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

Loading...

Gatito Nightly by TaouMou - VS Code Theme