Skip to main content
CodingTheme

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#2a3246
  • activityBar.foreground#9ad9db
  • activityBarBadge.background#80cbc4
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#9ad9db
  • button.background#3d415a
  • debugToolBar.background#252b39
  • diffEditor.insertedTextBackground#00809b33
  • diffEditor.removedTextBackground#ff82c033
  • dropdown.background#272e3f
  • dropdown.border#ffffff
  • editor.background#292f3d
  • editor.foreground#eeffff
  • editor.lineHighlightBackground#4e65c92f
  • editor.selectionBackground#3d4e9b86
  • editor.selectionHighlightBackground#3d4e9b86
  • editorBracketHighlight.foreground1#7081BE
  • editorBracketHighlight.foreground2#7081BE
  • editorBracketHighlight.foreground3#7081BE
  • editorBracketHighlight.unexpectedBracket.foreground#fe5959
  • editorBracketMatch.background#4752875e
  • editorBracketMatch.border#374fb6a2
  • editorCursor.foreground#412020
  • editorError.foreground#ff82c0
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#252b39
  • editorGutter.modifiedBackground#ffcb6b40
  • editorIndentGuide.background#47647280
  • editorLineNumber.activeForeground#79e4d9
  • editorLineNumber.foreground#4d9caac4
  • editorLink.activeForeground#eeffff
  • editorMarkerNavigation.background#eeffff05
  • editorSuggestWidget.background#242b40
  • editorSuggestWidget.border#242b40
  • editorSuggestWidget.foreground#e2e6e980
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#303956
  • editorWarning.foreground#c3e88d70
  • editorWhitespace.foreground#eeffff10
  • editorWidget.background#272e3f
  • extensionButton.prominentBackground#9ad9db
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#5f9092d3
  • focusBorder#ffffff00
  • input.background#ffffff05
  • input.border#ffffff10
  • input.foreground#eeffff
  • input.placeholderForeground#eeffff60
  • inputValidation.errorBorder#ff82c0
  • inputValidation.infoBorder#82aaff
  • inputValidation.warningBorder#ffcb6b
  • list.activeSelectionBackground#252b39
  • list.activeSelectionForeground#80cbc4
  • list.focusBackground#eeffff20
  • list.focusForeground#eeffff
  • list.highlightForeground#80cbc4
  • list.hoverBackground#252b39
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#252b39
  • list.inactiveSelectionForeground#80cbc4
  • panel.border#252b39
  • panelTitle.activeForeground#79e4d9
  • peekView.border#00000030
  • peekViewEditor.background#272e3f
  • peekViewEditorGutter.background#30394d
  • peekViewResult.background#30394d
  • peekViewTitle.background#30394d
  • peekViewTitleDescription.foreground#eeffff60
  • pickerGroup.foreground#80cbc4
  • progressBar.background#80cbc4
  • scrollbar.shadow#252b3900
  • scrollbarSlider.activeBackground#4e65c92f
  • scrollbarSlider.background#00000050
  • scrollbarSlider.hoverBackground#00000030
  • selection.background#eeffff
  • sideBar.background#2f394d
  • sideBar.foreground#a6c0cc
  • sideBarSectionHeader.background#293042
  • sideBarTitle.foreground#eeffff
  • statusBar.background#2a3246
  • statusBar.debuggingBackground#c792ea
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9ad9db
  • statusBar.noFolderBackground#252b39
  • tab.activeForeground#9ad9db
  • tab.border#252b39
  • tab.inactiveBackground#252b39
  • tab.inactiveForeground#4d9caac4
  • tab.unfocusedActiveForeground#4d9caac4
  • terminal.ansiBlack#546e7a
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#546e7a
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff82c0
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff82c0
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • textLink.activeForeground#eeffff
  • textLink.foreground#80cbc4
  • titleBar.activeBackground#252b39
  • titleBar.activeForeground#9ad9db
  • titleBar.inactiveBackground#252b39
  • titleBar.inactiveForeground#4d9caac4
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7081BE
comment.block.preprocessor#7081BE
comment.documentation, comment.block.documentation#7081BE
invalid.illegal#f5cee0
keyword.operator#E4EAF0
constant.language, support.constant#85c8ff
storage.type, support.type, keyword, storage#80d0ff
entity.other.attribute-name#90D6CD
variable.other#ffffff
keyword.operator, keyword.operator.member, keyword.operator.new, entity.name.function.operator, keyword.other.unit, keyword.other.unit.percentage.css, keyword.other.unit.em.css, keyword.other.unit.px.css, keyword.other.unit.vh.css#a9fff1
entity.name.tag, entity.name.tag.js.jsx support.class.component.js.jsx, entity.name.tag support.class.component, source.vue support.class.component#98f7fa
punctuation.template-string.element.begin, punctuation.template-string.element.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, string.quoted.template, string.quoted.template, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end.#FF6D7E
variable.language#98f7fabold
invalid#fffbold
entity.name.type, entity.other.inherited-class, support.class#91FFF9bold
variable.other.constant#98f7fa
support.type, entity.name.type.ts, support.class#91fff9
constant.character.entity#ffffff
entity.name.exception#ffffff
entity.name.function, support.function, keyword.other.name-of-parameter#fff4c5
entity.name.section#ffffff
entity.name.tag#98f7fa
keyword.control.untitled, entity.other.attribute-name#fff4c5
punctuation.definition.tag#7081BE
variable.parameter, support.variable#98f7fa
constant.numeric, constant.other#98cbfa
string - string source, constant.character#ffffff
string.regexp#c5b8fc
variable.other.property, meta.object-literal.key.js, meta.object-literal.key.ts, meta.object.member.ts, support.type.property-name, support.type.property-name.json, variable.other.object.property.js#b6d4d3
variable.object.property.ts, meta.definition.property.ts, meta.field.declaration.ts#b6d4d3
string#9afaaa
constant.other.symbol#ffffff
markup.bold, markup.bold.markdown#fff4c5bold
meta.paragraph.markdown, markup.list.unnumbered.markdown, text.html.markdown#d6d6d6
string.other.link.title.markdown#98f7fa
markup.underline, entity.name.section.markdown, heading.1.markdown, markup.heading.markdown, entity.name.section.markdown#ffb482
support.constant.property-value.css, meta.property-value.css#b6d4d3
markup.error#ff82c0
markup.heading.1#ffffff
markup.inserted#2C344D
markup.output, markup.raw#ffffff
markup.prompt#ffffff
markup.boldbold
markup.heading#ffffff
markup.traceback#ffffff
markup.underlineunderline
meta.diff.range, meta.diff.index, meta.separator#ffffff
meta.diff.header.from-file#ffffff
meta.diff.header.to-file#ffffff
meta.link#ffffff
support.type.property-name#ffffff
support.constant.property-value, support.constant.font-name#ffffff
constant.other.unit, keyword.other.unit#ffffff
keyword.control.at-rule#ffffff
keyword.control.mixin-shorthand#ffffff
variable.parameter.url.sass#ffffff
meta.brace.round.coffee#ffffff
entity.name.section.markdown#ffffff
punctuation.definition.heading#ffffff
markup.heading.1 punctuation.definition.heading#ffffff
punctuation.definition.list_item#ffffff
string.other.link.title#ffffff
string.raw.inline.markdown#ffffff
punctuation.definition.raw.markdown#ffffff
token.info-token#ffffff
token.warn-token#ffffff
token.error-token#ffffff
token.debug-token#ffffff

Shiki preview

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

Loading...

Blue Forest by Amirabbas - VS Code Theme