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.activeBorder#E3E1E1
  • activityBar.background#1D2126
  • activityBar.border#3D4041
  • activityBar.foreground#E3E1E1
  • activityBar.inactiveForeground#7F8286
  • activityBarBadge.background#84cc16
  • activityBarBadge.foreground#1D2126
  • badge.background#84cc16
  • badge.foreground#1D2126
  • button.background#84cc16
  • button.foreground#1D2126
  • diffEditor.insertedTextBackground#176e6199
  • diffEditor.removedTextBackground#bb1b3f99
  • dropdown.background#2B2E31
  • dropdown.border#3D4041
  • dropdown.foreground#E3E1E1
  • dropdown.listBackground#1D2126
  • editor.background#1D2126
  • editor.findMatchBackground#bc5412
  • editor.findMatchHighlightBackground#bc5412cc
  • editor.findRangeHighlightBackground#2B2E31
  • editor.foreground#E3E1E1
  • editor.hoverHighlightBackground#3D4041
  • editor.inactiveSelectionBackground#34373A
  • editor.lineHighlightBackground#2B2E31
  • editor.lineHighlightBorder#34373A
  • editor.rangeHighlightBackground#46494D
  • editor.selectionBackground#E3E1E133
  • editor.selectionHighlightBackground#E3E1E133
  • editorBracketMatch.background#34373A
  • editorBracketMatch.border#3D4041
  • editorError.foreground#f06292
  • editorGroup.border#3D4041
  • editorGroupHeader.border#3D4041
  • editorGroupHeader.tabsBackground#1D2126
  • editorGroupHeader.tabsBorder#3D4041
  • editorGutter.addedBackground#66dfc4
  • editorGutter.background#1D2126
  • editorGutter.deletedBackground#f06292
  • editorGutter.modifiedBackground#84cc16
  • editorHoverWidget.background#34373A
  • editorIndentGuide.background1#3D4041
  • editorInfo.foreground#64b5f6
  • editorInlayHint.background#3D4041
  • editorInlayHint.foreground#7F8286
  • editorInlayHint.typeBackground#3D4041
  • editorInlayHint.typeForeground#E3E1E1
  • editorLineNumber.activeForeground#E3E1E1
  • editorLineNumber.foreground#46494D
  • editorSuggestWidget.background#1D2126
  • editorSuggestWidget.border#3D4041
  • editorSuggestWidget.foreground#E3E1E1
  • editorSuggestWidget.highlightForeground#7F8286
  • editorSuggestWidget.selectedBackground#3D4041
  • editorWarning.foreground#f4a343
  • editorWhitespace.foreground#46494D
  • editorWidget.background#2B2E31
  • editorWidget.border#3D4041
  • input.background#2B2E31
  • input.border#3D4041
  • input.foreground#E3E1E1
  • input.placeholderForeground#7F8286
  • inputOption.activeBackground#34373A
  • inputOption.activeBorder#3D4041
  • inputOption.activeForeground#E3E1E1
  • inputValidation.errorBackground#f06292
  • inputValidation.errorBorder#bb1b3f
  • inputValidation.infoBackground#84cc16
  • inputValidation.infoBorder#05699f
  • inputValidation.warningBackground#f4a343
  • inputValidation.warningBorder#bc5412
  • list.activeSelectionBackground#46494D
  • list.activeSelectionForeground#E3E1E1
  • list.errorForeground#f06292
  • list.hoverBackground#3D4041
  • list.hoverForeground#E3E1E1
  • list.inactiveSelectionBackground#3D4041
  • list.inactiveSelectionForeground#E3E1E1
  • list.warningForeground#f4a343
  • menu.background#1D2126
  • menu.border#3D4041
  • menu.foreground#E3E1E1
  • menu.selectionBackground#3D4041
  • menu.selectionForeground#E3E1E1
  • merge.border#3D4041
  • merge.commonContentBackground#46494D
  • merge.commonHeaderBackground#3D4041
  • merge.currentContentBackground#176e61
  • merge.currentHeaderBackground#66dfc4
  • merge.incomingContentBackground#05699f
  • merge.incomingHeaderBackground#84cc16
  • notifications.background#34373A
  • panel.background#1D2126
  • panel.border#3D4041
  • panelTitle.activeBorder#46494D
  • panelTitle.activeForeground#E3E1E1
  • panelTitle.inactiveForeground#7F8286
  • peekView.border#3D4041
  • peekViewEditor.background#1D2126
  • peekViewEditor.matchHighlightBackground#46494D
  • peekViewResult.background#2B2E31
  • peekViewResult.fileForeground#E3E1E1
  • peekViewResult.lineForeground#7F8286
  • peekViewResult.matchHighlightBackground#46494D
  • peekViewResult.selectionBackground#34373A
  • peekViewResult.selectionForeground#595D61
  • peekViewTitle.background#3D4041
  • peekViewTitleDescription.foreground#7F8286
  • peekViewTitleLabel.foreground#E3E1E1
  • scrollbar.shadow#00000000
  • sideBar.background#1D2126
  • sideBar.border#3D4041
  • sideBar.foreground#E3E1E1
  • sideBarSectionHeader.background#2B2E31
  • sideBarSectionHeader.border#3D4041
  • sideBarSectionHeader.foreground#E3E1E1
  • sideBarTitle.foreground#E3E1E1
  • statusBar.background#1D2126
  • statusBar.border#3D4041
  • statusBar.debuggingBackground#f06292
  • statusBar.debuggingForeground#E3E1E1
  • statusBar.foreground#E3E1E1
  • statusBar.noFolderBackground#2B2E31
  • statusBar.noFolderForeground#7F8286
  • tab.activeBackground#2B2E31
  • tab.activeForeground#E3E1E1
  • tab.activeModifiedBorder#f7bc62
  • tab.border#3D4041
  • tab.hoverBackground#3D4041
  • tab.inactiveBackground#1D2126
  • tab.inactiveForeground#7F8286
  • tab.inactiveModifiedBorder#64b5f6
  • tab.unfocusedActiveModifiedBorder#bc5412
  • tab.unfocusedHoverBackground#3D4041
  • tab.unfocusedInactiveModifiedBorder#2263d3
  • terminal.ansiBlue#64b5f6
  • terminal.ansiCyan#84cc16
  • terminal.ansiGreen#66dfc4
  • terminal.ansiMagenta#84cc16
  • terminal.ansiRed#f06292
  • terminal.ansiYellow#f7bc62
  • terminal.background#1D2126
  • terminal.foreground#E3E1E1
  • terminalCursor.background#1D2126
  • terminalCursor.foreground#E3E1E1
  • titleBar.activeBackground#1D2126
  • titleBar.activeForeground#E3E1E1
  • titleBar.border#3D4041
  • titleBar.inactiveBackground#2B2E31
  • titleBar.inactiveForeground#7F8286

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, support.type.property-name.css#E3E1E1
entity.name.type.class#f7bc62
entity.name.type.interface, entity.name.type#f7bc62
entity.name.type.struct#f7bc62
entity.name.type.enum#f7bc62
meta.object-literal.key, support.type.property-name#f06292
entity.name.function.method, meta.function.method#4fc3f7
entity.name.function, support.function, meta.function-call.generic#4fc3f7bold
variable, meta.variable, variable.other.object.property#E3E1E1
variable.other.object, variable.other.readwrite.alias#E3E1E1
variable.other.global, variable.language.this#4fc3f7
variable.other.local#34373A
variable.parameter, meta.parameter#E3E1E1
variable.other.property, meta.property#E3E1E1
string, string.other.link, markup.inline.raw.string.markdown, markup.inline.raw.code.mdx#66dfc4
constant.character.escape, constant.other.placeholder#E3E1E1
keyword#f06292
keyword.control.import, keyword.control.from, keyword.import#f06292
storage.modifier, keyword.modifier, storage.type#f06292
comment, punctuation.definition.comment#7F8286
comment.documentation, comment.line.documentation#7F8286
constant.numeric#f7bc62
constant.language.boolean, constant.language.json#4fc3f7
keyword.operator#64b5f6
entity.name.function.preprocessor, meta.preprocessor#64b5f6
meta.preprocessor#4fc3f7
markup.underline.link, string.other.link.destination.mdx#64b5f6
entity.name.tag#f06292
support.class.component#64b5f6
entity.other.attribute-name, meta.attribute#f7bc62
support.type#64b5f6
variable.other.constant, variable.readonly#E3E1E1
entity.name.label, punctuation.definition.label#4fc3f7
entity.name.namespace, storage.modifier.namespace, markup.bold.markdown#f7bc62
entity.name.module, storage.modifier.module#f06292
variable.type.parameter, variable.parameter.type#f7bc62
keyword.control.exception, keyword.control.trycatch#4fc3f7
meta.decorator, punctuation.decorator, entity.name.function.decorator#f7bc62
variable.function#E3E1E1
punctuation, punctuation.terminator, punctuation.definition.tag, punctuation.separator, punctuation.definition.string, punctuation.section.block#E3E1E1
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, constant.language.go, support.class.dart, keyword.other.documentation, storage.modifier.import.java, punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown, meta.separator.markdown, entity.name.section.markdown, entity.name.section.mdx, string.other.number.mdx, variable.ordered.list.mdx, variable.unordered.list.mdx#f7bc62
#66dfc4
markup.italic.markdown, support.type.python, variable.legacy.builtin.python, support.constant.property-value.css, storage.modifier.attribute.swift#4fc3f7
#64b5f6
keyword.channel.go, keyword.other.platform.os.swift#d88ee4
punctuation.definition.heading.markdown, punctuation.definition.heading.mdx#f06292
#f06292
#f4a343
Muehehe Theme by Fahmi Idris - VS Code Theme