Modern Themes
Publisher: Hüsamettin UlutaşThemes in package: 24
24 handcrafted modern color themes plus a coding font picker that can install bundled open-source fonts for you. Every color is solved for WCAG contrast.
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#d1642e1a
- activityBar.activeBorder#d1642e
- activityBar.background#ecedee
- activityBar.border#dcdde000
- activityBar.foreground#3d3f42
- activityBar.inactiveForeground#7d838c
- activityBarBadge.background#d1642e
- activityBarBadge.foreground#18191b
- activityBarTop.activeBorder#d1642e
- activityBarTop.foreground#3d3f42
- activityBarTop.inactiveForeground#7d838c
- badge.background#d1642e
- badge.foreground#18191b
- banner.background#f5f6f7
- banner.foreground#3d3f42
- banner.iconForeground#b65728
- breadcrumb.activeSelectionForeground#b65728
- breadcrumb.background#fbfbfb
- breadcrumb.focusForeground#3d3f42
- breadcrumb.foreground#878c94
- breadcrumbPicker.background#fdfdfd
- button.background#d1642e
- button.border#d1642e00
- button.foreground#18191b
- button.hoverBackground#b85828
- button.secondaryBackground#f5f6f7
- button.secondaryForeground#3d3f42
- button.secondaryHoverBackground#ecedee
- charts.blue#376ae1
- charts.foreground#3d3f42
- charts.green#137c44
- charts.lines#878c94
- charts.orange#766512
- charts.purple#c11d6f
- charts.red#d31f2b
- charts.yellow#8a6615
- checkbox.background#fdfdfd
- checkbox.border#c3c6cb
- checkbox.foreground#3d3f42
- debugConsole.errorForeground#d31f2b
- debugConsole.infoForeground#ab5226
- debugConsole.sourceForeground#666a70
- debugConsole.warningForeground#8a6615
- debugConsoleInputIcon.foreground#b65728
- debugExceptionWidget.background#f5dcde
- debugExceptionWidget.border#d31f2b
- debugIcon.breakpointDisabledForeground#d31f2b80
- debugIcon.breakpointForeground#d31f2b
- debugIcon.continueForeground#137c44
- debugIcon.pauseForeground#ab5226
- debugIcon.restartForeground#137c44
- debugIcon.startForeground#137c44
- debugIcon.stepIntoForeground#ab5226
- debugIcon.stepOutForeground#ab5226
- debugIcon.stepOverForeground#ab5226
- debugIcon.stopForeground#d31f2b
- debugTokenExpression.boolean#c11d6f
- debugTokenExpression.error#d31f2b
- debugTokenExpression.name#3761c3
- debugTokenExpression.number#766512
- debugTokenExpression.string#117353
- debugTokenExpression.value#117353
- debugToolBar.background#fdfdfd
- debugToolBar.border#dcdde0
- descriptionForeground#666a70
- diffEditor.diagonalFill#dcdde0
- diffEditor.insertedLineBackground#17824414
- diffEditor.insertedTextBackground#1782441f
- diffEditor.removedLineBackground#d7322614
- diffEditor.removedTextBackground#d732261f
- diffEditorOverview.insertedForeground#17824499
- diffEditorOverview.removedForeground#d7322699
- dropdown.background#fdfdfd
- dropdown.border#dcdde0
- dropdown.foreground#3d3f42
- dropdown.listBackground#fdfdfd
- editor.background#fbfbfb
- editor.findMatchBackground#debe2147
- editor.findMatchBorder#e1c537b3
- editor.findMatchHighlightBackground#debe2129
- editor.findRangeHighlightBackground#d1642e1c
- editor.focusedStackFrameHighlightBackground#137c442e
- editor.foldBackground#d1642e14
- editor.foreground#3d3f42
- editor.hoverHighlightBackground#d1642e24
- editor.inactiveSelectionBackground#d1642e1c
- editor.lineHighlightBackground#00000009
- editor.lineHighlightBorder#d1642e00
- editor.rangeHighlightBackground#d1642e1c
- editor.selectionBackground#d1642e33
- editor.selectionHighlightBackground#d1642e1c
- editor.selectionHighlightBorder#d1642e00
- editor.stackFrameHighlightBackground#8a661529
- editor.wordHighlightBackground#d1642e24
- editor.wordHighlightStrongBackground#d1642e38
- editorBracketHighlight.foreground1#376ae1
- editorBracketHighlight.foreground2#837014
- editorBracketHighlight.foreground3#157e8e
- editorBracketHighlight.foreground4#d7207c
- editorBracketHighlight.foreground5#13815c
- editorBracketHighlight.foreground6#c8481e
- editorBracketHighlight.unexpectedBracket.foreground#d31f2b
- editorBracketMatch.background#d1642e29
- editorBracketMatch.border#d1642e8c
- editorCodeLens.foreground#878c94
- editorCursor.background#fbfbfb
- editorCursor.foreground#b65728
- editorError.foreground#d31f2b
- editorGhostText.foreground#93989f
- editorGroup.border#dcdde0
- editorGroup.dropBackground#d1642e29
- editorGroupHeader.border#dcdde000
- editorGroupHeader.noTabsBackground#ecedee
- editorGroupHeader.tabsBackground#ecedee
- editorGroupHeader.tabsBorder#dcdde000
- editorGutter.addedBackground#178244
- editorGutter.background#fbfbfb
- editorGutter.deletedBackground#d73226
- editorGutter.foldingControlForeground#666a70
- editorGutter.modifiedBackground#936b1a
- editorHint.foreground#878c94
- editorHoverWidget.background#fdfdfd
- editorHoverWidget.border#dcdde0
- editorHoverWidget.foreground#3d3f42
- editorHoverWidget.statusBarBackground#f5f6f7
- editorIndentGuide.activeBackground1#bec1c6
- editorIndentGuide.background1#e4e5e7
- editorInfo.foreground#ab5226
- editorInlayHint.background#d1642e1a
- editorInlayHint.foreground#878c94
- editorLineNumber.activeForeground#b65728
- editorLineNumber.foreground#93989f
- editorLink.activeForeground#b65728
- editorOverviewRuler.addedForeground#178244
- editorOverviewRuler.border#dcdde000
- editorOverviewRuler.bracketMatchForeground#d1642e66
- editorOverviewRuler.deletedForeground#d73226
- editorOverviewRuler.errorForeground#d31f2b
- editorOverviewRuler.findMatchForeground#e1c537b3
- editorOverviewRuler.infoForeground#ab5226
- editorOverviewRuler.modifiedForeground#936b1a
- editorOverviewRuler.selectionHighlightForeground#d1642e66
- editorOverviewRuler.warningForeground#8a6615
- editorRuler.foreground#e6e8ea
- editorStickyScroll.background#f3f3f4
- editorStickyScrollHover.background#f5f6f7
- editorSuggestWidget.background#fdfdfd
- editorSuggestWidget.border#dcdde0
- editorSuggestWidget.focusHighlightForeground#b85828
- editorSuggestWidget.foreground#3d3f42
- editorSuggestWidget.highlightForeground#b65728
- editorSuggestWidget.selectedBackground#d1642e2e
- editorSuggestWidget.selectedForeground#3d3f42
- editorWarning.foreground#8a6615
- editorWhitespace.foreground#93989f80
- editorWidget.background#fdfdfd
- editorWidget.border#dcdde0
- editorWidget.foreground#3d3f42
- errorForeground#d31f2b
- extensionBadge.remoteBackground#d1642e
- extensionBadge.remoteForeground#18191b
- extensionButton.prominentBackground#d1642e
- extensionButton.prominentForeground#18191b
- extensionButton.prominentHoverBackground#b85828
- extensionIcon.preReleaseForeground#c11d6f
- extensionIcon.starForeground#766512
- extensionIcon.verifiedForeground#137c44
- focusBorder#d1642e99
- foreground#3d3f42
- gitDecoration.addedResourceForeground#178244
- gitDecoration.conflictingResourceForeground#c226c2
- gitDecoration.deletedResourceForeground#d73226
- gitDecoration.ignoredResourceForeground#878c94
- gitDecoration.modifiedResourceForeground#936b1a
- gitDecoration.renamedResourceForeground#228422
- gitDecoration.stageDeletedResourceForeground#d73226
- gitDecoration.stageModifiedResourceForeground#936b1a
- gitDecoration.submoduleResourceForeground#9151d2
- gitDecoration.untrackedResourceForeground#228422
- icon.foreground#666a70
- input.background#f7f7f8
- input.border#dcdde0
- input.foreground#3d3f42
- input.placeholderForeground#878c94
- inputOption.activeBackground#d1642e3d
- inputOption.activeBorder#d1642e80
- inputOption.activeForeground#3d3f42
- inputValidation.errorBackground#f5d8da
- inputValidation.errorBorder#d31f2b
- inputValidation.errorForeground#3d3f42
- inputValidation.infoBackground#eee0d9
- inputValidation.infoBorder#ab5226
- inputValidation.infoForeground#3d3f42
- inputValidation.warningBackground#e9e3d6
- inputValidation.warningBorder#8a6615
- inputValidation.warningForeground#3d3f42
- keybindingLabel.background#878c9424
- keybindingLabel.border#878c9429
- keybindingLabel.bottomBorder#878c9438
- keybindingLabel.foreground#3d3f42
- list.activeSelectionBackground#d1642e33
- list.activeSelectionForeground#3d3f42
- list.activeSelectionIconForeground#b65728
- list.dropBackground#d1642e29
- list.errorForeground#d31f2b
- list.focusBackground#d1642e33
- list.focusForeground#3d3f42
- list.focusHighlightForeground#b85828
- list.focusOutline#d1642e00
- list.highlightForeground#b65728
- list.hoverBackground#878c941a
- list.hoverForeground#3d3f42
- list.inactiveSelectionBackground#d1642e1c
- list.inactiveSelectionForeground#3d3f42
- list.warningForeground#8a6615
- listFilterWidget.background#fdfdfd
- listFilterWidget.noMatchesOutline#d31f2b
- listFilterWidget.outline#d1642e
- menu.background#fdfdfd
- menu.border#dcdde0
- menu.foreground#3d3f42
- menu.selectionBackground#d1642e33
- menu.selectionForeground#3d3f42
- menu.separatorBackground#dcdde0
- menubar.selectionBackground#878c9424
- menubar.selectionForeground#3d3f42
- merge.border#dcdde000
- merge.commonContentBackground#878c941f
- merge.commonHeaderBackground#878c9440
- merge.currentContentBackground#17824424
- merge.currentHeaderBackground#1782444d
- merge.incomingContentBackground#ab522624
- merge.incomingHeaderBackground#ab52264d
- minimap.background#fbfbfb
- minimap.errorHighlight#d31f2b
- minimap.findMatchHighlight#debe21b3
- minimap.selectionHighlight#d1642e80
- minimap.warningHighlight#8a6615
- minimapGutter.addedBackground#178244
- minimapGutter.deletedBackground#d73226
- minimapGutter.modifiedBackground#936b1a
- minimapSlider.activeBackground#878c9442
- minimapSlider.background#878c941a
- minimapSlider.hoverBackground#878c942e
- notificationCenter.border#dcdde0
- notificationCenterHeader.background#f5f6f7
- notificationCenterHeader.foreground#3d3f42
- notificationLink.foreground#b65728
- notifications.background#fdfdfd
- notifications.border#dcdde0
- notifications.foreground#3d3f42
- notificationsErrorIcon.foreground#d31f2b
- notificationsInfoIcon.foreground#ab5226
- notificationsWarningIcon.foreground#8a6615
- notificationToast.border#dcdde0
- panel.background#f3f3f4
- panel.border#dcdde0
- panel.dropBorder#d1642e
- panelInput.border#dcdde0
- panelSection.border#dcdde0
- panelSectionHeader.background#f3f3f4
- panelSectionHeader.foreground#3d3f42
- panelTitle.activeBorder#d1642e
- panelTitle.activeForeground#3d3f42
- panelTitle.inactiveForeground#818790
- peekView.border#d1642e8c
- peekViewEditor.background#f7f7f8
- peekViewEditor.matchHighlightBackground#debe2147
- peekViewResult.background#f3f3f4
- peekViewResult.fileForeground#3d3f42
- peekViewResult.foreground#3d3f42
- peekViewResult.lineForeground#666a70
- peekViewResult.matchHighlightBackground#debe2147
- peekViewResult.selectionBackground#d1642e2e
- peekViewResult.selectionForeground#3d3f42
- peekViewTitle.background#f3f3f4
- peekViewTitleDescription.foreground#666a70
- peekViewTitleLabel.foreground#3d3f42
- pickerGroup.border#dcdde0
- pickerGroup.foreground#b65728
- ports.iconRunningProcessForeground#137c44
- problemsErrorIcon.foreground#d31f2b
- problemsInfoIcon.foreground#ab5226
- problemsWarningIcon.foreground#8a6615
- progressBar.background#d1642e
- quickInput.background#fdfdfd
- quickInput.foreground#3d3f42
- quickInputList.focusBackground#d1642e33
- quickInputList.focusForeground#3d3f42
- quickInputList.focusIconForeground#b65728
- quickInputTitle.background#f5f6f7
- sash.hoverBorder#d1642e80
- scrollbar.shadow#777e8814
- scrollbarSlider.activeBackground#878c9473
- scrollbarSlider.background#878c9433
- scrollbarSlider.hoverBackground#878c9452
- search.resultsInfoForeground#666a70
- searchEditor.findMatchBackground#debe2129
- selection.background#d1642e33
- settings.checkboxBackground#fdfdfd
- settings.checkboxBorder#c3c6cb
- settings.dropdownBackground#fdfdfd
- settings.dropdownBorder#dcdde0
- settings.focusedRowBackground#d1642e12
- settings.headerForeground#3d3f42
- settings.modifiedItemIndicator#d1642e
- settings.numberInputBackground#f7f7f8
- settings.numberInputBorder#dcdde0
- settings.rowHoverBackground#878c940f
- settings.textInputBackground#f7f7f8
- settings.textInputBorder#dcdde0
- sideBar.background#f3f3f4
- sideBar.border#dcdde000
- sideBar.foreground#62666c
- sideBarSectionHeader.background#f3f3f4
- sideBarSectionHeader.border#dcdde000
- sideBarSectionHeader.foreground#3d3f42
- sideBarStickyScroll.background#f3f3f4
- sideBarTitle.foreground#3d3f42
- statusBar.background#ecedee
- statusBar.border#dcdde000
- statusBar.debuggingBackground#d1642e
- statusBar.debuggingBorder#dcdde000
- statusBar.debuggingForeground#18191b
- statusBar.foreground#5d6167
- statusBar.noFolderBackground#ecedee
- statusBar.noFolderForeground#5d6167
- statusBarItem.activeBackground#878c9438
- statusBarItem.hoverBackground#878c9424
- statusBarItem.prominentBackground#d1642e3d
- statusBarItem.prominentForeground#3d3f42
- statusBarItem.prominentHoverBackground#d1642e57
- statusBarItem.remoteBackground#d1642e
- statusBarItem.remoteForeground#18191b
- symbolIcon.booleanForeground#c11d6f
- symbolIcon.classForeground#13707e
- symbolIcon.colorForeground#74651a
- symbolIcon.constantForeground#766512
- symbolIcon.constructorForeground#235bde
- symbolIcon.enumeratorForeground#13707e
- symbolIcon.enumeratorMemberForeground#766512
- symbolIcon.fieldForeground#3761c3
- symbolIcon.fileForeground#666a70
- symbolIcon.folderForeground#666a70
- symbolIcon.functionForeground#235bde
- symbolIcon.interfaceForeground#13707e
- symbolIcon.keywordForeground#c11d6f
- symbolIcon.methodForeground#235bde
- symbolIcon.moduleForeground#b1401b
- symbolIcon.namespaceForeground#b1401b
- symbolIcon.numberForeground#766512
- symbolIcon.propertyForeground#3761c3
- symbolIcon.snippetForeground#74651a
- symbolIcon.stringForeground#117353
- symbolIcon.textForeground#666a70
- symbolIcon.variableForeground#3d3f42
- tab.activeBackground#fbfbfb
- tab.activeBorder#fbfbfb00
- tab.activeBorderTop#d1642e
- tab.activeForeground#3d3f42
- tab.activeModifiedBorder#936b1a
- tab.border#dcdde000
- tab.hoverBackground#f3f3f4
- tab.hoverForeground#3d3f42
- tab.inactiveBackground#ecedee
- tab.inactiveForeground#7d838c
- tab.inactiveModifiedBorder#936b1a80
- tab.lastPinnedBorder#dcdde0
- tab.unfocusedActiveBackground#f3f3f4
- tab.unfocusedActiveBorderTop#d1642e59
- tab.unfocusedActiveForeground#666a70
- tab.unfocusedInactiveForeground#93989f
- terminal.ansiBlack#adb2b8
- terminal.ansiBlue#376ae1
- terminal.ansiBrightBlack#8c939b
- terminal.ansiBrightBlue#2d57b9
- terminal.ansiBrightCyan#116774
- terminal.ansiBrightGreen#106a4b
- terminal.ansiBrightMagenta#b01a66
- terminal.ansiBrightRed#b61d27
- terminal.ansiBrightWhite#3d3f42
- terminal.ansiBrightYellow#6b5c10
- terminal.ansiCyan#157e8e
- terminal.ansiGreen#13815c
- terminal.ansiMagenta#d7207c
- terminal.ansiRed#de2330
- terminal.ansiWhite#62666c
- terminal.ansiYellow#837014
- terminal.background#f3f3f4
- terminal.border#dcdde0
- terminal.findMatchBackground#debe2147
- terminal.findMatchHighlightBackground#debe2129
- terminal.foreground#383a3d
- terminal.inactiveSelectionBackground#d1642e1c
- terminal.selectionBackground#d1642e33
- terminalCursor.background#f3f3f4
- terminalCursor.foreground#b65728
- testing.iconErrored#d31f2b
- testing.iconFailed#d31f2b
- testing.iconPassed#137c44
- testing.iconQueued#8a6615
- testing.iconSkipped#878c94
- testing.iconUnset#878c94
- testing.message.error.decorationForeground#d31f2b
- testing.runAction#137c44
- textBlockQuote.background#f3f3f4
- textBlockQuote.border#d1642e80
- textCodeBlock.background#f3f3f4
- textLink.activeForeground#b85828
- textLink.foreground#b65728
- textPreformat.background#d1642e1a
- textPreformat.foreground#117353
- textSeparator.foreground#dcdde0
- titleBar.activeBackground#ecedee
- titleBar.activeForeground#5d6167
- titleBar.border#dcdde000
- titleBar.inactiveBackground#ecedee
- titleBar.inactiveForeground#93989f
- tree.inactiveIndentGuidesStroke#e9eaec
- tree.indentGuidesStroke#e1e3e5
- walkThrough.embeddedEditorBackground#f3f3f4
- welcomePage.background#fbfbfb
- welcomePage.progress.background#e4e5e7
- welcomePage.progress.foreground#d1642e
- welcomePage.tileBackground#f3f3f4
- welcomePage.tileHoverBackground#f5f6f7
- widget.border#dcdde0
- widget.shadow#848b9424
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #6d737b | italic |
| comment.block.documentation storage.type, comment keyword | #6d737b | italic bold |
| punctuation, meta.brace, punctuation.definition.parameters, punctuation.separator, punctuation.terminator | #666a70 | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable, entity.name.variable | #3d3f42 | — |
| variable.parameter, meta.function.parameters variable | #663f34 | italic |
| variable.language, variable.language.this, variable.other.constant | #b1401b | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name, variable.other.object.property | #3761c3 | — |
| keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, keyword.type | #c11d6f | — |
| keyword.operator, punctuation.accessor, storage.type.function.arrow | #b94b82 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default | #c11d6f | italic |
| string, string.quoted, punctuation.definition.string, string.template | #117353 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #b94b82 | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp | #0d707f | — |
| constant.character.escape, constant.character | #b1401b | — |
| constant.numeric, constant.language.numeric | #766512 | — |
| constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant | #766512 | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #235bde | — |
| entity.name.method, meta.method entity.name.function | #235bde | — |
| entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, meta.type.annotation, entity.name.namespace | #13707e | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #74651a | italic |
| entity.name.tag, punctuation.definition.tag, meta.tag | #b1401b | — |
| support.class.component, entity.name.tag.custom | #13707e | — |
| entity.other.attribute-name, meta.attribute | #74651a | italic |
| entity.name.selector, entity.other.attribute-name.class, entity.other.attribute-name.id | #13707e | — |
| support.type.property-name.css, support.type.property-name.scss | #3761c3 | — |
| keyword.other.unit, constant.numeric.css | #766512 | — |
| support.type.property-name.json, meta.structure.dictionary.json string.quoted.double | #3761c3 | — |
| entity.name.tag.yaml | #3761c3 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading | #235bde | bold |
| markup.bold | #766512 | bold |
| markup.italic | #c11d6f | italic |
| markup.strikethrough | #6d737b | strikethrough |
| markup.underline.link, string.other.link | #b65728 | underline |
| markup.quote | #6d737b | italic |
| markup.inline.raw, markup.fenced_code, markup.raw | #117353 | — |
| markup.list punctuation.definition.list, beginning.punctuation.definition.list | #b1401b | — |
| markup.inserted | #178244 | — |
| markup.deleted | #d73226 | — |
| markup.changed | #936b1a | — |
| invalid, invalid.illegal | #d31f2b | — |
| invalid.deprecated | #8a6615 | strikethrough |
| variable.other.normal.shell, string.interpolated.dollar.shell | #3761c3 | — |
| keyword.other.definition.ini, entity.name.section.ini | #3761c3 | — |