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#85B7EB
  • activityBar.background#1F1E1C
  • activityBar.border#363532
  • activityBar.foreground#F1EFE8
  • activityBar.inactiveForeground#B4B2A9
  • activityBarBadge.background#85B7EB
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3B3A37
  • badge.foreground#DEDCD4
  • breadcrumb.activeSelectionForeground#F1EFE8
  • breadcrumb.background#262522
  • breadcrumb.focusForeground#85B7EB
  • breadcrumb.foreground#B4B2A9
  • breadcrumbPicker.background#2C2C2A
  • button.background#85B7EB
  • button.foreground#1F1E1C
  • button.hoverBackground#A9CFF4
  • button.secondaryBackground#333230
  • button.secondaryForeground#E8E5DC
  • button.secondaryHoverBackground#45433F
  • checkbox.background#2C2C2A
  • checkbox.border#5D5A54
  • checkbox.foreground#85B7EB
  • commandCenter.activeBackground#333230
  • commandCenter.activeBorder#5D5A54
  • commandCenter.background#262522
  • commandCenter.border#3B3A37
  • commandCenter.foreground#DEDCD4
  • commandCenter.inactiveForeground#B4B2A9
  • debugConsole.errorForeground#F09595
  • debugConsole.infoForeground#5DCAA5
  • debugConsole.sourceForeground#B4B2A9
  • debugConsole.warningForeground#EF9F27
  • debugConsoleInputIcon.foreground#85B7EB
  • debugToolBar.background#2C2C2A
  • descriptionForeground#C8C5BA
  • diffEditor.insertedLineBackground#5DCAA522
  • diffEditor.removedLineBackground#F0959522
  • dropdown.background#2C2C2A
  • dropdown.border#504E49
  • dropdown.foreground#F1EFE8
  • dropdown.listBackground#2C2C2A
  • editor.background#1F1E1C
  • editor.findMatchBackground#85B7EB66
  • editor.findMatchBorder#85B7EB
  • editor.findMatchHighlightBackground#5D5A543f
  • editor.focusedStackFrameHighlightBackground#5DCAA526
  • editor.foldBackground#36353273
  • editor.foreground#F1EFE8
  • editor.hoverHighlightBackground#333230aa
  • editor.inactiveSelectionBackground#3B3A3766
  • editor.lineHighlightBackground#262522
  • editor.lineHighlightBorder#363532
  • editor.rangeHighlightBackground#3B3A374d
  • editor.selectionBackground#4B5F72
  • editor.selectionForeground#FFFFFF
  • editor.snippetFinalTabstopHighlightBorder#5DCAA5
  • editor.snippetTabstopHighlightBackground#5DCAA52d
  • editor.stackFrameHighlightBackground#EF9F2724
  • editor.symbolHighlightBackground#5DCAA555
  • editor.wordHighlightBackground#3B3A3755
  • editor.wordHighlightStrongBackground#4B5F7266
  • editorBracketHighlight.foreground1#85B7EB
  • editorBracketHighlight.foreground2#5DCAA5
  • editorBracketHighlight.foreground3#85B7EB
  • editorBracketHighlight.foreground4#F09595
  • editorBracketHighlight.foreground5#C4B7F5
  • editorBracketHighlight.foreground6#82DDBF
  • editorBracketMatch.background#3B3A37
  • editorBracketMatch.border#85B7EB
  • editorCodeLens.foreground#858179
  • editorCursor.foreground#85B7EB
  • editorError.foreground#F09595
  • editorGroup.border#363532
  • editorGroup.dropBackground#5D5A5433
  • editorGroupHeader.noTabsBackground#1F1E1C
  • editorGroupHeader.tabsBackground#1F1E1C
  • editorGroupHeader.tabsBorder#363532
  • editorGutter.addedBackground#5DCAA5
  • editorGutter.background#1F1E1C
  • editorGutter.deletedBackground#F09595
  • editorGutter.foldingControlForeground#B4B2A9
  • editorGutter.modifiedBackground#EF9F27
  • editorHint.foreground#85B7EB
  • editorIndentGuide.activeBackground1#5D5A54
  • editorIndentGuide.background1#363532
  • editorInfo.foreground#85B7EB
  • editorInlayHint.background#333230
  • editorInlayHint.foreground#B4B2A9
  • editorLineNumber.activeForeground#85B7EB
  • editorLineNumber.foreground#6D6961
  • editorLink.activeForeground#85B7EB
  • editorMarkerNavigation.background#2C2C2A
  • editorOverviewRuler.addedForeground#5DCAA5
  • editorOverviewRuler.border#1F1E1C
  • editorOverviewRuler.deletedForeground#F09595
  • editorOverviewRuler.errorForeground#F09595
  • editorOverviewRuler.findMatchForeground#85B7EB
  • editorOverviewRuler.infoForeground#85B7EB
  • editorOverviewRuler.modifiedForeground#EF9F27
  • editorOverviewRuler.warningForeground#EF9F27
  • editorRuler.foreground#363532
  • editorStickyScroll.background#1F1E1C
  • editorStickyScroll.border#363532
  • editorSuggestWidget.background#2C2C2A
  • editorSuggestWidget.border#504E49
  • editorSuggestWidget.focusHighlightForeground#85B7EB
  • editorSuggestWidget.foreground#F1EFE8
  • editorSuggestWidget.highlightForeground#85B7EB
  • editorSuggestWidget.selectedBackground#3B3A37
  • editorWarning.foreground#EF9F27
  • editorWhitespace.foreground#45433F
  • editorWidget.background#2C2C2A
  • editorWidget.border#504E49
  • errorForeground#F09595
  • extensionButton.prominentBackground#85B7EB
  • extensionButton.prominentForeground#1F1E1C
  • extensionButton.prominentHoverBackground#A9CFF4
  • focusBorder#85B7EB
  • foreground#F1EFE8
  • gitDecoration.addedResourceForeground#5DCAA5
  • gitDecoration.conflictingResourceForeground#EF9F27
  • gitDecoration.deletedResourceForeground#F09595
  • gitDecoration.ignoredResourceForeground#7D7970
  • gitDecoration.modifiedResourceForeground#85B7EB
  • gitDecoration.renamedResourceForeground#85B7EB
  • gitDecoration.stageDeletedResourceForeground#F09595
  • gitDecoration.stageModifiedResourceForeground#85B7EB
  • gitDecoration.submoduleResourceForeground#5DCAA5
  • icon.foreground#B4B2A9
  • input.background#2C2C2A
  • input.border#504E49
  • input.foreground#F1EFE8
  • input.placeholderForeground#858179
  • inputOption.activeBackground#4B5F72
  • inputOption.activeBorder#85B7EB
  • inputValidation.errorBackground#3A2424
  • inputValidation.errorBorder#F09595
  • inputValidation.infoBackground#22313D
  • inputValidation.infoBorder#85B7EB
  • inputValidation.warningBackground#3A2B16
  • inputValidation.warningBorder#EF9F27
  • keybindingLabel.background#333230
  • keybindingLabel.border#504E49
  • keybindingLabel.bottomBorder#363532
  • keybindingLabel.foreground#DEDCD4
  • list.activeSelectionBackground#3B3A37
  • list.activeSelectionForeground#FFFFFF
  • list.dropBackground#4B5F72
  • list.errorForeground#F09595
  • list.focusBackground#3B3A37
  • list.focusForeground#FFFFFF
  • list.highlightForeground#85B7EB
  • list.hoverBackground#333230
  • list.hoverForeground#F1EFE8
  • list.inactiveSelectionBackground#333230
  • list.inactiveSelectionForeground#F1EFE8
  • list.warningForeground#EF9F27
  • menu.background#2C2C2A
  • menu.border#504E49
  • menu.foreground#F1EFE8
  • menu.selectionBackground#3B3A37
  • menu.selectionForeground#FFFFFF
  • menubar.selectionBackground#333230
  • menubar.selectionForeground#F1EFE8
  • minimap.background#1F1E1C
  • minimap.findMatchHighlight#85B7EB
  • minimap.selectionHighlight#4B5F72
  • minimapSlider.activeBackground#5D5A5466
  • minimapSlider.background#5D5A5426
  • minimapSlider.hoverBackground#5D5A5440
  • notificationCenter.border#363532
  • notificationCenterHeader.background#1F1E1C
  • notificationCenterHeader.foreground#DEDCD4
  • notifications.background#2C2C2A
  • notifications.border#504E49
  • notifications.foreground#F1EFE8
  • notificationsErrorIcon.foreground#F09595
  • notificationsInfoIcon.foreground#85B7EB
  • notificationsWarningIcon.foreground#EF9F27
  • panel.background#1F1E1C
  • panel.border#363532
  • panelTitle.activeBorder#85B7EB
  • panelTitle.activeForeground#F1EFE8
  • panelTitle.inactiveForeground#B4B2A9
  • peekView.border#85B7EB
  • peekViewEditor.background#1F1E1C
  • peekViewEditor.matchHighlightBackground#85B7EB55
  • peekViewResult.background#262522
  • peekViewResult.fileForeground#DEDCD4
  • peekViewResult.lineForeground#B4B2A9
  • peekViewResult.matchHighlightBackground#85B7EB55
  • peekViewResult.selectionBackground#3B3A37
  • peekViewResult.selectionForeground#FFFFFF
  • peekViewTitle.background#2C2C2A
  • peekViewTitleDescription.foreground#B4B2A9
  • peekViewTitleLabel.foreground#F1EFE8
  • pickerGroup.border#504E49
  • pickerGroup.foreground#85B7EB
  • problemsErrorIcon.foreground#F09595
  • problemsInfoIcon.foreground#85B7EB
  • problemsWarningIcon.foreground#EF9F27
  • progressBar.background#85B7EB
  • quickInput.background#2C2C2A
  • quickInput.foreground#F1EFE8
  • quickInputTitle.background#1F1E1C
  • sash.hoverBorder#85B7EB
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#5D5A5473
  • scrollbarSlider.background#5D5A5433
  • scrollbarSlider.hoverBackground#5D5A5455
  • selection.background#4B5F72
  • settings.checkboxBackground#2C2C2A
  • settings.checkboxBorder#5D5A54
  • settings.dropdownBackground#2C2C2A
  • settings.dropdownBorder#5D5A54
  • settings.headerForeground#F1EFE8
  • settings.modifiedItemIndicator#EF9F27
  • settings.numberInputBackground#2C2C2A
  • settings.numberInputBorder#5D5A54
  • settings.rowHoverBackground#33323066
  • settings.textInputBackground#2C2C2A
  • settings.textInputBorder#5D5A54
  • sideBar.background#262522
  • sideBar.border#363532
  • sideBar.foreground#DEDCD4
  • sideBarSectionHeader.background#1F1E1C
  • sideBarSectionHeader.border#363532
  • sideBarSectionHeader.foreground#F1EFE8
  • sideBarTitle.foreground#F1EFE8
  • statusBar.background#1F1E1C
  • statusBar.border#363532
  • statusBar.debuggingBackground#85B7EB
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#DEDCD4
  • statusBar.noFolderBackground#1F1E1C
  • statusBarItem.activeBackground#3B3A37
  • statusBarItem.hoverBackground#333230
  • symbolIcon.arrayForeground#85B7EB
  • symbolIcon.booleanForeground#85B7EB
  • symbolIcon.classForeground#85B7EB
  • symbolIcon.colorForeground#F09595
  • symbolIcon.constantForeground#85B7EB
  • symbolIcon.constructorForeground#85B7EB
  • symbolIcon.enumeratorForeground#85B7EB
  • symbolIcon.enumeratorMemberForeground#85B7EB
  • symbolIcon.eventForeground#F09595
  • symbolIcon.fieldForeground#C4B7F5
  • symbolIcon.fileForeground#F1EFE8
  • symbolIcon.folderForeground#EF9F27
  • symbolIcon.functionForeground#85B7EB
  • symbolIcon.interfaceForeground#5DCAA5
  • symbolIcon.keyForeground#F09595
  • symbolIcon.keywordForeground#F09595
  • symbolIcon.methodForeground#85B7EB
  • symbolIcon.moduleForeground#5DCAA5
  • symbolIcon.namespaceForeground#5DCAA5
  • symbolIcon.nullForeground#85B7EB
  • symbolIcon.numberForeground#85B7EB
  • symbolIcon.objectForeground#F1EFE8
  • symbolIcon.operatorForeground#F09595
  • symbolIcon.packageForeground#5DCAA5
  • symbolIcon.propertyForeground#C4B7F5
  • symbolIcon.referenceForeground#F1EFE8
  • symbolIcon.snippetForeground#5DCAA5
  • symbolIcon.stringForeground#5DCAA5
  • symbolIcon.structForeground#85B7EB
  • symbolIcon.textForeground#F1EFE8
  • symbolIcon.typeParameterForeground#5DCAA5
  • tab.activeBackground#1F1E1C
  • tab.activeBorder#1F1E1C
  • tab.activeBorderTop#85B7EB
  • tab.activeForeground#F1EFE8
  • tab.border#363532
  • tab.hoverBackground#2C2C2A
  • tab.inactiveBackground#1F1E1C
  • tab.inactiveForeground#B4B2A9
  • tab.lastPinnedBorder#504E49
  • terminal.ansiBlack#1F1E1C
  • terminal.ansiBlue#85B7EB
  • terminal.ansiBrightBlack#7D7970
  • terminal.ansiBrightBlue#A9CFF4
  • terminal.ansiBrightCyan#82DDBF
  • terminal.ansiBrightGreen#82DDBF
  • terminal.ansiBrightMagenta#D8CFFF
  • terminal.ansiBrightRed#F5B3B3
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F2B45B
  • terminal.ansiCyan#5DCAA5
  • terminal.ansiGreen#5DCAA5
  • terminal.ansiMagenta#C4B7F5
  • terminal.ansiRed#F09595
  • terminal.ansiWhite#F1EFE8
  • terminal.ansiYellow#EF9F27
  • terminal.background#1F1E1C
  • terminal.border#363532
  • terminal.foreground#F1EFE8
  • terminal.selectionBackground#4B5F72
  • terminalCursor.background#1F1E1C
  • terminalCursor.foreground#85B7EB
  • textBlockQuote.background#2C2C2A
  • textBlockQuote.border#5D5A54
  • textCodeBlock.background#2C2C2A
  • textLink.activeForeground#A9CFF4
  • textLink.foreground#85B7EB
  • textPreformat.foreground#DEDCD4
  • textSeparator.foreground#504E49
  • titleBar.activeBackground#1F1E1C
  • titleBar.activeForeground#F1EFE8
  • titleBar.border#363532
  • titleBar.inactiveBackground#1F1E1C
  • titleBar.inactiveForeground#B4B2A9
  • tree.indentGuidesStroke#45433F
  • walkThrough.embeddedEditorBackground#1F1E1C
  • welcomePage.progress.background#333230
  • welcomePage.progress.foreground#85B7EB
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#858179italic
comment.block.documentation, comment.line.documentation, string.quoted.docstring#B4B2A9italic
string, constant.other.symbol#5DCAA5—
constant.character.escape, constant.character.entity, constant.other.character-class.regexp, string.regexp#EF9F27—
constant.numeric, constant.language, support.constant, variable.other.constant#85B7EB—
keyword, storage, storage.type, storage.modifier, punctuation.definition.keyword#F09595—
keyword.operator, punctuation.accessor, punctuation.separator, punctuation.terminator#B4B2A9—
entity.name.function, meta.function-call, support.function, variable.function#85B7EB—
variable.parameter, meta.parameter, entity.name.variable.parameter#DEDCD4—
entity.name.class, entity.name.type, entity.name.struct, entity.name.enum, support.class, support.type, support.type.primitive#85B7EB—
entity.name.interface, entity.name.namespace, entity.name.module, support.module#5DCAA5—
variable, variable.other, support.variable, meta.object-literal.key#F1EFE8—
variable.other.property, variable.other.object.property, meta.property.object, support.variable.property, entity.other.attribute-name#C4B7F5—
support.type.builtin, support.class.builtin, variable.language, constant.language.boolean, constant.language.null, constant.language.undefined#85B7EB—
entity.name.tag, punctuation.definition.tag#F09595—
entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.xml#85B7EB—
markup.heading, markup.heading entity.name#85B7EBbold
markup.bold, markup.italic#F1EFE8—
markup.inline.raw, markup.fenced_code.block, markup.raw.block#5DCAA5—
markup.underline.link, string.other.link, meta.link#85B7EB—
markup.quote#C8C5BAitalic
markup.changed, meta.diff.header#EF9F27—
markup.inserted#5DCAA5—
markup.deleted#F09595—
invalid, invalid.illegal#F09595underline
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double#C4B7F5—
entity.name.tag.yaml#C4B7F5—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.scss, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.scss#85B7EB—
support.type.property-name.css, support.type.property-name.scss, meta.property-name.css, meta.property-name.scss#C4B7F5—
support.constant.property-value.css, support.constant.property-value.scss, constant.other.color.rgb-value, constant.other.rgb-value#5DCAA5—
support.function.builtin.shell, support.function.builtin.zsh, support.function.builtin.bash#85B7EB—
Linen Dark by Amr F - VS Code Theme