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#983bce1a
- activityBar.activeBorder#983bce
- activityBar.background#110d14
- activityBar.border#2f253700
- activityBar.foreground#c7c1cd
- activityBar.inactiveForeground#6f5c7f
- activityBarBadge.background#983bce
- activityBarBadge.foreground#f5f3f7
- activityBarTop.activeBorder#983bce
- activityBarTop.foreground#c7c1cd
- activityBarTop.inactiveForeground#6f5c7f
- badge.background#983bce
- badge.foreground#f5f3f7
- banner.background#2c2334
- banner.foreground#c7c1cd
- banner.iconForeground#ad62d8
- breadcrumb.activeSelectionForeground#ad62d8
- breadcrumb.background#1c1622
- breadcrumb.focusForeground#c7c1cd
- breadcrumb.foreground#756187
- breadcrumbPicker.background#251e2c
- button.background#983bce
- button.border#983bce00
- button.foreground#f5f3f7
- button.hoverBackground#a554d4
- button.secondaryBackground#2c2334
- button.secondaryForeground#c7c1cd
- button.secondaryHoverBackground#362b40
- charts.blue#607ddc
- charts.foreground#c7c1cd
- charts.green#25a762
- charts.lines#756187
- charts.orange#a79a25
- charts.purple#de689b
- charts.red#dd626a
- charts.yellow#ab8326
- checkbox.background#251e2c
- checkbox.border#433550
- checkbox.foreground#c7c1cd
- debugConsole.errorForeground#dd626a
- debugConsole.infoForeground#b16ada
- debugConsole.sourceForeground#9686a4
- debugConsole.warningForeground#ab8326
- debugConsoleInputIcon.foreground#ad62d8
- debugExceptionWidget.background#37212c
- debugExceptionWidget.border#dd626a
- debugIcon.breakpointDisabledForeground#dd626a80
- debugIcon.breakpointForeground#dd626a
- debugIcon.continueForeground#25a762
- debugIcon.pauseForeground#b16ada
- debugIcon.restartForeground#25a762
- debugIcon.startForeground#25a762
- debugIcon.stepIntoForeground#b16ada
- debugIcon.stepOutForeground#b16ada
- debugIcon.stepOverForeground#b16ada
- debugIcon.stopForeground#dd626a
- debugTokenExpression.boolean#de689b
- debugTokenExpression.error#dd626a
- debugTokenExpression.name#798dd0
- debugTokenExpression.number#a79a25
- debugTokenExpression.string#25a784
- debugTokenExpression.value#25a784
- debugToolBar.background#251e2c
- debugToolBar.border#2f2537
- descriptionForeground#9686a4
- diffEditor.diagonalFill#2f2537
- diffEditor.insertedLineBackground#28a45c17
- diffEditor.insertedTextBackground#28a45c24
- diffEditor.removedLineBackground#d65d5517
- diffEditor.removedTextBackground#d65d5524
- diffEditorOverview.insertedForeground#28a45c99
- diffEditorOverview.removedForeground#d65d5599
- dropdown.background#251e2c
- dropdown.border#2f2537
- dropdown.foreground#c7c1cd
- dropdown.listBackground#251e2c
- editor.background#1c1622
- editor.findMatchBackground#d1c12e52
- editor.findMatchBorder#d6c743b3
- editor.findMatchHighlightBackground#d1c12e2e
- editor.findRangeHighlightBackground#983bce21
- editor.focusedStackFrameHighlightBackground#25a7622e
- editor.foldBackground#983bce14
- editor.foreground#c7c1cd
- editor.hoverHighlightBackground#983bce24
- editor.inactiveSelectionBackground#983bce21
- editor.lineHighlightBackground#ffffff0b
- editor.lineHighlightBorder#983bce00
- editor.rangeHighlightBackground#983bce21
- editor.selectionBackground#983bce3d
- editor.selectionHighlightBackground#983bce21
- editor.selectionHighlightBorder#983bce00
- editor.stackFrameHighlightBackground#ab832629
- editor.wordHighlightBackground#983bce24
- editor.wordHighlightStrongBackground#983bce38
- editorBracketHighlight.foreground1#607ddc
- editorBracketHighlight.foreground2#a79a25
- editorBracketHighlight.foreground3#258fa9
- editorBracketHighlight.foreground4#d9518c
- editorBracketHighlight.foreground5#25a784
- editorBracketHighlight.foreground6#d1622e
- editorBracketHighlight.unexpectedBracket.foreground#dd626a
- editorBracketMatch.background#983bce29
- editorBracketMatch.border#983bce8c
- editorCodeLens.foreground#756187
- editorCursor.background#1c1622
- editorCursor.foreground#ad62d8
- editorError.foreground#dd626a
- editorGhostText.foreground#675676
- editorGroup.border#2f2537
- editorGroup.dropBackground#983bce29
- editorGroupHeader.border#2f253700
- editorGroupHeader.noTabsBackground#110d14
- editorGroupHeader.tabsBackground#110d14
- editorGroupHeader.tabsBorder#2f253700
- editorGutter.addedBackground#28a45c
- editorGutter.background#1c1622
- editorGutter.deletedBackground#d65d55
- editorGutter.foldingControlForeground#9686a4
- editorGutter.modifiedBackground#a67c28
- editorHint.foreground#756187
- editorHoverWidget.background#251e2c
- editorHoverWidget.border#2f2537
- editorHoverWidget.foreground#c7c1cd
- editorHoverWidget.statusBarBackground#2c2334
- editorIndentGuide.activeBackground1#4e3d5c
- editorIndentGuide.background1#2c2334
- editorInfo.foreground#b16ada
- editorInlayHint.background#983bce1a
- editorInlayHint.foreground#756187
- editorLineNumber.activeForeground#ad62d8
- editorLineNumber.foreground#675676
- editorLink.activeForeground#ad62d8
- editorOverviewRuler.addedForeground#28a45c
- editorOverviewRuler.border#2f253700
- editorOverviewRuler.bracketMatchForeground#983bce66
- editorOverviewRuler.deletedForeground#d65d55
- editorOverviewRuler.errorForeground#dd626a
- editorOverviewRuler.findMatchForeground#d6c743b3
- editorOverviewRuler.infoForeground#b16ada
- editorOverviewRuler.modifiedForeground#a67c28
- editorOverviewRuler.selectionHighlightForeground#983bce66
- editorOverviewRuler.warningForeground#ab8326
- editorRuler.foreground#292131
- editorStickyScroll.background#16111a
- editorStickyScrollHover.background#2c2334
- editorSuggestWidget.background#251e2c
- editorSuggestWidget.border#2f2537
- editorSuggestWidget.focusHighlightForeground#a554d4
- editorSuggestWidget.foreground#c7c1cd
- editorSuggestWidget.highlightForeground#ad62d8
- editorSuggestWidget.selectedBackground#983bce2e
- editorSuggestWidget.selectedForeground#c7c1cd
- editorWarning.foreground#ab8326
- editorWhitespace.foreground#67567680
- editorWidget.background#251e2c
- editorWidget.border#2f2537
- editorWidget.foreground#c7c1cd
- errorForeground#dd626a
- extensionBadge.remoteBackground#983bce
- extensionBadge.remoteForeground#f5f3f7
- extensionButton.prominentBackground#983bce
- extensionButton.prominentForeground#f5f3f7
- extensionButton.prominentHoverBackground#a554d4
- extensionIcon.preReleaseForeground#de689b
- extensionIcon.starForeground#a79a25
- extensionIcon.verifiedForeground#25a762
- focusBorder#983bce99
- foreground#c7c1cd
- gitDecoration.addedResourceForeground#28a45c
- gitDecoration.conflictingResourceForeground#cf4acf
- gitDecoration.deletedResourceForeground#d65d55
- gitDecoration.ignoredResourceForeground#756187
- gitDecoration.modifiedResourceForeground#a67c28
- gitDecoration.renamedResourceForeground#329a32
- gitDecoration.stageDeletedResourceForeground#d65d55
- gitDecoration.stageModifiedResourceForeground#a67c28
- gitDecoration.submoduleResourceForeground#9e6dd0
- gitDecoration.untrackedResourceForeground#329a32
- icon.foreground#9686a4
- input.background#241d2b
- input.border#2f2537
- input.foreground#c7c1cd
- input.placeholderForeground#756187
- inputOption.activeBackground#983bce3d
- inputOption.activeBorder#983bce80
- inputOption.activeForeground#c7c1cd
- inputValidation.errorBackground#3b222e
- inputValidation.errorBorder#dd626a
- inputValidation.errorForeground#c7c1cd
- inputValidation.infoBackground#34233f
- inputValidation.infoBorder#b16ada
- inputValidation.infoForeground#c7c1cd
- inputValidation.warningBackground#332723
- inputValidation.warningBorder#ab8326
- inputValidation.warningForeground#c7c1cd
- keybindingLabel.background#75618724
- keybindingLabel.border#75618729
- keybindingLabel.bottomBorder#75618738
- keybindingLabel.foreground#c7c1cd
- list.activeSelectionBackground#983bce33
- list.activeSelectionForeground#c7c1cd
- list.activeSelectionIconForeground#ad62d8
- list.dropBackground#983bce29
- list.errorForeground#dd626a
- list.focusBackground#983bce33
- list.focusForeground#c7c1cd
- list.focusHighlightForeground#a554d4
- list.focusOutline#983bce00
- list.highlightForeground#ad62d8
- list.hoverBackground#7561871a
- list.hoverForeground#c7c1cd
- list.inactiveSelectionBackground#983bce1c
- list.inactiveSelectionForeground#c7c1cd
- list.warningForeground#ab8326
- listFilterWidget.background#251e2c
- listFilterWidget.noMatchesOutline#dd626a
- listFilterWidget.outline#983bce
- menu.background#251e2c
- menu.border#2f2537
- menu.foreground#c7c1cd
- menu.selectionBackground#983bce33
- menu.selectionForeground#c7c1cd
- menu.separatorBackground#2f2537
- menubar.selectionBackground#75618724
- menubar.selectionForeground#c7c1cd
- merge.border#2f253700
- merge.commonContentBackground#7561871f
- merge.commonHeaderBackground#75618740
- merge.currentContentBackground#28a45c24
- merge.currentHeaderBackground#28a45c4d
- merge.incomingContentBackground#b16ada24
- merge.incomingHeaderBackground#b16ada4d
- minimap.background#1c1622
- minimap.errorHighlight#dd626a
- minimap.findMatchHighlight#d1c12eb3
- minimap.selectionHighlight#983bce80
- minimap.warningHighlight#ab8326
- minimapGutter.addedBackground#28a45c
- minimapGutter.deletedBackground#d65d55
- minimapGutter.modifiedBackground#a67c28
- minimapSlider.activeBackground#75618742
- minimapSlider.background#7561871a
- minimapSlider.hoverBackground#7561872e
- notificationCenter.border#2f2537
- notificationCenterHeader.background#2c2334
- notificationCenterHeader.foreground#c7c1cd
- notificationLink.foreground#ad62d8
- notifications.background#251e2c
- notifications.border#2f2537
- notifications.foreground#c7c1cd
- notificationsErrorIcon.foreground#dd626a
- notificationsInfoIcon.foreground#b16ada
- notificationsWarningIcon.foreground#ab8326
- notificationToast.border#2f2537
- panel.background#16111a
- panel.border#2f2537
- panel.dropBorder#983bce
- panelInput.border#2f2537
- panelSection.border#2f2537
- panelSectionHeader.background#16111a
- panelSectionHeader.foreground#c7c1cd
- panelTitle.activeBorder#983bce
- panelTitle.activeForeground#c7c1cd
- panelTitle.inactiveForeground#715e82
- peekView.border#983bce8c
- peekViewEditor.background#17121c
- peekViewEditor.matchHighlightBackground#d1c12e52
- peekViewResult.background#16111a
- peekViewResult.fileForeground#c7c1cd
- peekViewResult.foreground#c7c1cd
- peekViewResult.lineForeground#9686a4
- peekViewResult.matchHighlightBackground#d1c12e52
- peekViewResult.selectionBackground#983bce2e
- peekViewResult.selectionForeground#c7c1cd
- peekViewTitle.background#16111a
- peekViewTitleDescription.foreground#9686a4
- peekViewTitleLabel.foreground#c7c1cd
- pickerGroup.border#2f2537
- pickerGroup.foreground#ad62d8
- ports.iconRunningProcessForeground#25a762
- problemsErrorIcon.foreground#dd626a
- problemsInfoIcon.foreground#b16ada
- problemsWarningIcon.foreground#ab8326
- progressBar.background#983bce
- quickInput.background#251e2c
- quickInput.foreground#c7c1cd
- quickInputList.focusBackground#983bce33
- quickInputList.focusForeground#c7c1cd
- quickInputList.focusIconForeground#ad62d8
- quickInputTitle.background#2c2334
- sash.hoverBorder#983bce80
- scrollbar.shadow#0806094d
- scrollbarSlider.activeBackground#75618773
- scrollbarSlider.background#75618733
- scrollbarSlider.hoverBackground#75618752
- search.resultsInfoForeground#9686a4
- searchEditor.findMatchBackground#d1c12e2e
- selection.background#983bce3d
- settings.checkboxBackground#251e2c
- settings.checkboxBorder#433550
- settings.dropdownBackground#251e2c
- settings.dropdownBorder#2f2537
- settings.focusedRowBackground#983bce12
- settings.headerForeground#c7c1cd
- settings.modifiedItemIndicator#983bce
- settings.numberInputBackground#241d2b
- settings.numberInputBorder#2f2537
- settings.rowHoverBackground#7561870f
- settings.textInputBackground#241d2b
- settings.textInputBorder#2f2537
- sideBar.background#16111a
- sideBar.border#2f253700
- sideBar.foreground#9282a1
- sideBarSectionHeader.background#16111a
- sideBarSectionHeader.border#2f253700
- sideBarSectionHeader.foreground#c7c1cd
- sideBarStickyScroll.background#16111a
- sideBarTitle.foreground#c7c1cd
- statusBar.background#110d14
- statusBar.border#2f253700
- statusBar.debuggingBackground#983bce
- statusBar.debuggingBorder#2f253700
- statusBar.debuggingForeground#f5f3f7
- statusBar.foreground#907f9f
- statusBar.noFolderBackground#110d14
- statusBar.noFolderForeground#907f9f
- statusBarItem.activeBackground#75618738
- statusBarItem.hoverBackground#75618724
- statusBarItem.prominentBackground#983bce3d
- statusBarItem.prominentForeground#c7c1cd
- statusBarItem.prominentHoverBackground#983bce57
- statusBarItem.remoteBackground#983bce
- statusBarItem.remoteForeground#f5f3f7
- symbolIcon.booleanForeground#de689b
- symbolIcon.classForeground#299dba
- symbolIcon.colorForeground#9d922f
- symbolIcon.constantForeground#a79a25
- symbolIcon.constructorForeground#738ce0
- symbolIcon.enumeratorForeground#299dba
- symbolIcon.enumeratorMemberForeground#a79a25
- symbolIcon.fieldForeground#798dd0
- symbolIcon.fileForeground#9686a4
- symbolIcon.folderForeground#9686a4
- symbolIcon.functionForeground#738ce0
- symbolIcon.interfaceForeground#299dba
- symbolIcon.keywordForeground#de689b
- symbolIcon.methodForeground#738ce0
- symbolIcon.moduleForeground#d77649
- symbolIcon.namespaceForeground#d77649
- symbolIcon.numberForeground#a79a25
- symbolIcon.propertyForeground#798dd0
- symbolIcon.snippetForeground#9d922f
- symbolIcon.stringForeground#25a784
- symbolIcon.textForeground#9686a4
- symbolIcon.variableForeground#c7c1cd
- tab.activeBackground#1c1622
- tab.activeBorder#1c162200
- tab.activeBorderTop#983bce
- tab.activeForeground#c7c1cd
- tab.activeModifiedBorder#a67c28
- tab.border#2f253700
- tab.hoverBackground#16111a
- tab.hoverForeground#c7c1cd
- tab.inactiveBackground#110d14
- tab.inactiveForeground#6f5c7f
- tab.inactiveModifiedBorder#a67c2880
- tab.lastPinnedBorder#2f2537
- tab.unfocusedActiveBackground#16111a
- tab.unfocusedActiveBorderTop#983bce59
- tab.unfocusedActiveForeground#9686a4
- tab.unfocusedInactiveForeground#675676
- terminal.ansiBlack#34293d
- terminal.ansiBlue#607ddc
- terminal.ansiBrightBlack#584568
- terminal.ansiBrightBlue#839ae4
- terminal.ansiBrightCyan#55a8bc
- terminal.ansiBrightGreen#55ba9f
- terminal.ansiBrightMagenta#e177a5
- terminal.ansiBrightRed#e27b81
- terminal.ansiBrightWhite#c7c1cd
- terminal.ansiBrightYellow#bab055
- terminal.ansiCyan#258fa9
- terminal.ansiGreen#25a784
- terminal.ansiMagenta#d9518c
- terminal.ansiRed#da565e
- terminal.ansiWhite#9282a1
- terminal.ansiYellow#a79a25
- terminal.background#16111a
- terminal.border#2f2537
- terminal.findMatchBackground#d1c12e52
- terminal.findMatchHighlightBackground#d1c12e2e
- terminal.foreground#c4bcca
- terminal.inactiveSelectionBackground#983bce21
- terminal.selectionBackground#983bce3d
- terminalCursor.background#16111a
- terminalCursor.foreground#ad62d8
- testing.iconErrored#dd626a
- testing.iconFailed#dd626a
- testing.iconPassed#25a762
- testing.iconQueued#ab8326
- testing.iconSkipped#756187
- testing.iconUnset#756187
- testing.message.error.decorationForeground#dd626a
- testing.runAction#25a762
- textBlockQuote.background#16111a
- textBlockQuote.border#983bce80
- textCodeBlock.background#16111a
- textLink.activeForeground#a554d4
- textLink.foreground#ad62d8
- textPreformat.background#983bce1a
- textPreformat.foreground#25a784
- textSeparator.foreground#2f2537
- titleBar.activeBackground#110d14
- titleBar.activeForeground#907f9f
- titleBar.border#2f253700
- titleBar.inactiveBackground#110d14
- titleBar.inactiveForeground#675676
- tree.inactiveIndentGuidesStroke#271f2e
- tree.indentGuidesStroke#31273a
- walkThrough.embeddedEditorBackground#16111a
- welcomePage.background#1c1622
- welcomePage.progress.background#2f2537
- welcomePage.progress.foreground#983bce
- welcomePage.tileBackground#16111a
- welcomePage.tileHoverBackground#2c2334
- widget.border#2f2537
- widget.shadow#08060970
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #907ba3 | italic |
| comment.block.documentation storage.type, comment keyword | #907ba3 | italic bold |
| punctuation, meta.brace, punctuation.definition.parameters, punctuation.separator, punctuation.terminator | #9686a4 | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable, entity.name.variable | #c7c1cd | — |
| variable.parameter, meta.function.parameters variable | #cda79f | italic |
| variable.language, variable.language.this, variable.other.constant | #d77649 | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name, variable.other.object.property | #798dd0 | — |
| keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, keyword.type | #de689b | — |
| keyword.operator, punctuation.accessor, storage.type.function.arrow | #bb688c | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default | #de689b | italic |
| string, string.quoted, punctuation.definition.string, string.template | #25a784 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #bb688c | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp | #219ebd | — |
| constant.character.escape, constant.character | #d77649 | — |
| constant.numeric, constant.language.numeric | #a79a25 | — |
| constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant | #a79a25 | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #738ce0 | — |
| entity.name.method, meta.method entity.name.function | #738ce0 | — |
| entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, meta.type.annotation, entity.name.namespace | #299dba | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #9d922f | italic |
| entity.name.tag, punctuation.definition.tag, meta.tag | #d77649 | — |
| support.class.component, entity.name.tag.custom | #299dba | — |
| entity.other.attribute-name, meta.attribute | #9d922f | italic |
| entity.name.selector, entity.other.attribute-name.class, entity.other.attribute-name.id | #299dba | — |
| support.type.property-name.css, support.type.property-name.scss | #798dd0 | — |
| keyword.other.unit, constant.numeric.css | #a79a25 | — |
| support.type.property-name.json, meta.structure.dictionary.json string.quoted.double | #798dd0 | — |
| entity.name.tag.yaml | #798dd0 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading | #738ce0 | bold |
| markup.bold | #a79a25 | bold |
| markup.italic | #de689b | italic |
| markup.strikethrough | #907ba3 | strikethrough |
| markup.underline.link, string.other.link | #ad62d8 | underline |
| markup.quote | #907ba3 | italic |
| markup.inline.raw, markup.fenced_code, markup.raw | #25a784 | — |
| markup.list punctuation.definition.list, beginning.punctuation.definition.list | #d77649 | — |
| markup.inserted | #28a45c | — |
| markup.deleted | #d65d55 | — |
| markup.changed | #a67c28 | — |
| invalid, invalid.illegal | #dd626a | — |
| invalid.deprecated | #ab8326 | strikethrough |
| variable.other.normal.shell, string.interpolated.dollar.shell | #798dd0 | — |
| keyword.other.definition.ini, entity.name.section.ini | #798dd0 | — |