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.activeBackground#1e3a5f
  • activityBar.activeBorder#82a5b9
  • activityBar.background#141414
  • activityBar.foreground#90b3c6
  • activityBar.inactiveForeground#4a6b85
  • activityBarBadge.background#1e3a5f
  • agentSessionReadIndicator.foreground#82a5b9
  • agentSessionSelectedBadge.border#1e3a5f
  • badge.background#1e3a5f
  • badge.foreground#c8f0fa
  • breadcrumb.activeSelectionForeground#82a5b9
  • breadcrumb.background#1a1a1a
  • breadcrumb.focusForeground#c8f0fa
  • breadcrumb.foreground#7497ac
  • button.background#1e3a5f
  • button.foreground#c8f0fa
  • button.hoverBackground#2d4a6b
  • button.secondaryBackground#141414
  • button.secondaryForeground#90b3c6
  • button.secondaryHoverBackground#1e3a5f
  • chat.avatarBackground#1e3a5f
  • chat.avatarForeground#c8f0fa
  • chat.editedFileForeground#dab485
  • chat.requestBackground#1a1a1a
  • chat.requestBorder#2d4a6b
  • chat.slashCommandBackground#1e3a5f40
  • chat.slashCommandForeground#8fbcbb
  • dropdown.background#141414
  • dropdown.border#2d4a6b
  • dropdown.foreground#acd0e0
  • editor.background#1a1a1a
  • editor.findMatchBackground#2d4a6b60
  • editor.findMatchHighlightBackground#3b5b7840
  • editor.foreground#c8f0fa
  • editor.lineHighlightBackground#1e3a5f30
  • editor.selectionBackground#2d4a6b50
  • editor.wordHighlightBackground#3b5b7830
  • editorBracketHighlight.foreground1#dab485
  • editorBracketHighlight.foreground2#8fbcbb
  • editorBracketHighlight.foreground3#b898c4
  • editorBracketHighlight.foreground4#d4879c
  • editorBracketHighlight.foreground5#8ab89a
  • editorBracketHighlight.foreground6#c4a882
  • editorBracketHighlight.unexpectedBracket.foreground#c47a7a
  • editorBracketMatch.background#3b5b7850
  • editorBracketMatch.border#587a92
  • editorBracketMatch.foreground#82a5b9
  • editorCursor.foreground#82a5b9
  • editorIndentGuide.activeBackground#4a6b85
  • editorIndentGuide.background#2d4a6b
  • editorWhitespace.foreground#3b5b78
  • gitDecoration.addedResourceForeground#8ab89a
  • gitDecoration.conflictingResourceForeground#c4a882
  • gitDecoration.deletedResourceForeground#c47a7a
  • gitDecoration.ignoredResourceForeground#3b5b78
  • gitDecoration.modifiedResourceForeground#c4a882
  • gitDecoration.untrackedResourceForeground#7aab8e
  • inlineChat.background#161616
  • inlineChat.border#2d4a6b
  • inlineChat.foreground#c8f0fa
  • inlineChat.shadow#00000060
  • inlineChatDiff.inserted#8ab89a20
  • inlineChatDiff.removed#c47a7a20
  • inlineChatInput.background#141414
  • inlineChatInput.border#2d4a6b
  • inlineChatInput.focusBorder#82a5b9
  • inlineChatInput.placeholderForeground#587a92
  • inlineEdit.gutterIndicator.primaryForeground#82a5b9
  • inlineEdit.gutterIndicator.secondaryForeground#4a6b85
  • inlineEdit.gutterIndicator.successfulForeground#8ab89a
  • inlineEdit.modifiedBackground#8ab89a15
  • inlineEdit.originalBackground#c47a7a15
  • input.background#141414
  • input.border#2d4a6b
  • input.foreground#c8f0fa
  • input.placeholderForeground#587a92
  • inputOption.activeBackground#1e3a5f
  • inputOption.activeBorder#82a5b9
  • list.activeSelectionBackground#1e3a5f40
  • list.activeSelectionForeground#c8f0fa
  • list.highlightForeground#82a5b9
  • list.hoverBackground#2d4a6b30
  • list.inactiveSelectionBackground#1e3a5f30
  • markdownAlert.caution.foreground#c47a7a
  • markdownAlert.important.foreground#b898c4
  • markdownAlert.note.foreground#82a5b9
  • markdownAlert.tip.foreground#8ab89a
  • markdownAlert.warning.foreground#dab485
  • menu.background#141414
  • menu.foreground#acd0e0
  • menu.selectionBackground#1e3a5f
  • menu.selectionForeground#c8f0fa
  • menu.separatorBackground#2d4a6b
  • minimap.background#141414
  • minimap.findMatchHighlight#3b5b78
  • minimap.selectionHighlight#2d4a6b
  • notificationLink.foreground#90b3c6
  • notifications.background#1e3a5f
  • notifications.foreground#c8f0fa
  • panel.background#141414
  • panel.border#2d4a6b
  • panelTitle.activeBorder#82a5b9
  • panelTitle.activeForeground#c8f0fa
  • panelTitle.inactiveForeground#587a92
  • peekView.border#82a5b9
  • peekViewEditor.background#141414
  • peekViewEditorGutter.background#141414
  • peekViewResult.background#1a1a1a
  • peekViewResult.fileForeground#acd0e0
  • peekViewResult.lineForeground#7497ac
  • peekViewResult.matchHighlightBackground#2d4a6b
  • peekViewTitle.background#1e3a5f
  • peekViewTitleDescription.foreground#90b3c6
  • peekViewTitleLabel.foreground#c8f0fa
  • progressBar.background#82a5b9
  • scmGraph.foreground1#dab485
  • scmGraph.foreground2#8fbcbb
  • scmGraph.foreground3#b898c4
  • scmGraph.foreground4#d4879c
  • scmGraph.foreground5#8ab89a
  • scmGraph.historyItemBaseRefColor#d4879c
  • scmGraph.historyItemRefColor#82a5b9
  • scmGraph.historyItemRemoteRefColor#8ab89a
  • scrollbarSlider.activeBackground#4a6b8580
  • scrollbarSlider.background#2d4a6b40
  • scrollbarSlider.hoverBackground#3b5b7860
  • sideBar.background#161616
  • sideBar.foreground#acd0e0
  • sideBar.sectionHeader.background#1a1a1a
  • sideBar.sectionHeader.foreground#c8f0fa
  • sideBarTitle.foreground#90b3c6
  • statusBar.background#1e3a5f
  • statusBar.debuggingBackground#2d4a6b
  • statusBar.foreground#c8f0fa
  • statusBar.noFolderBackground#141414
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#82a5b9
  • tab.activeBorderTop#82a5b9
  • tab.activeForeground#c8f0fa
  • tab.border#1e3a5f
  • tab.inactiveBackground#141414
  • tab.inactiveForeground#587a92
  • terminal.ansiBlack#1a1a1a
  • terminal.ansiBlue#a0a0e8
  • terminal.ansiBrightBlack#3b5b78
  • terminal.ansiBrightBlue#b0b0f0
  • terminal.ansiBrightCyan#b0f0f0
  • terminal.ansiBrightGreen#b0f0b0
  • terminal.ansiBrightMagenta#f0b0f0
  • terminal.ansiBrightRed#f0b0b0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f0f0b0
  • terminal.ansiCyan#a0e8e8
  • terminal.ansiGreen#a0e8a0
  • terminal.ansiMagenta#e8a0e8
  • terminal.ansiRed#e8a0a0
  • terminal.ansiWhite#e6f5ff
  • terminal.ansiYellow#e8e8a0
  • terminal.background#141414
  • terminal.foreground#acd0e0
  • testing.coveredBackground#8ab89a15
  • testing.coveredGutterBackground#8ab89a
  • testing.iconErrored#d08770
  • testing.iconFailed#c47a7a
  • testing.iconPassed#8ab89a
  • testing.iconQueued#4a6b85
  • testing.iconSkipped#587a92
  • testing.iconUnset#3b5b78
  • testing.peekBorder#c47a7a
  • testing.peekHeaderBackground#c47a7a20
  • testing.runAction#8ab89a
  • testing.uncoveredBackground#c47a7a15
  • testing.uncoveredGutterBackground#c47a7a
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#9ec2d3
  • titleBar.inactiveBackground#1a1a1a
  • titleBar.inactiveForeground#587a92

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a6b85italic
variable, string constant.other.placeholder#c8f0fa
constant.other.color#e6f5ff
invalid, invalid.illegal#c47a7a
keyword, keyword.control, storage.type, storage.modifier#b898c4
punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#7497ac
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#d4879c
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#dab485
meta.block variable.other#c8d3da
support.other.variable, string.other.link#c8d3da
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#8ab89a
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#c4a882
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8fbcbb
support.type#8fbcbb
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#8fbcbb
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#dab485
variable.language#d4879citalic
entity.name.method.js#dab485italic
meta.class-method.js entity.name.function.js, variable.function.constructor#dab485
entity.other.attribute-name#8fbcbb
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#8fbcbbitalic
entity.other.attribute-name.class#8fbcbb
source.sass keyword.control#b898c4
markup.inserted#8ab89a
markup.deleted#c47a7a
markup.changed#c4a882
string.regexp#89b8c2
constant.character.escape#89b8c2
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison#7497ac
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#d08770italic
source.js constant.other.object.key.js string.unquoted.label.js#d08770italic
source.json meta.structure.dictionary.json support.type.property-name.json#d4879c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8fbcbb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#dab485
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#b898c4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8ab89a
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c4a882
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d4879c
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8fbcbb
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#dab485
text.html.markdown, punctuation.definition.list_item.markdown#c8f0fa
text.html.markdown markup.inline.raw.markdown#8fbcbb
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#3b5b78
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#dab485
markup.italic#c8d3daitalic
markup.bold, markup.bold string#c8d3dabold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#c8d3dabold
markup.underline#acd0e0underline
markup.quote punctuation.definition.blockquote.markdown#3b5b78
markup.quoteitalic
string.other.link.title.markdown#8fbcbb
string.other.link.description.title.markdown#587a92
constant.other.reference.link.markdown#8fbcbb
markup.raw.block#8fbcbb
markup.raw.block.fenced.markdown#1a1a1a50
punctuation.definition.fenced.markdown#1a1a1a50
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#c8f0fa
variable.language.fenced.markdown#3b5b78
meta.separator#3b5b78bold
markup.table#c8f0fa
Oslo Dark by Lazerai - VS Code Theme