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#61ba4f1a
- activityBar.activeBorder#61ba4f
- activityBar.background#10130f
- activityBar.border#2c332800
- activityBar.foreground#c4cac2
- activityBar.inactiveForeground#63705c
- activityBarBadge.background#61ba4f
- activityBarBadge.foreground#181d16
- activityBarTop.activeBorder#61ba4f
- activityBarTop.foreground#c4cac2
- activityBarTop.inactiveForeground#63705c
- badge.background#61ba4f
- badge.foreground#181d16
- banner.background#2a3126
- banner.foreground#c4cac2
- banner.iconForeground#4a973b
- breadcrumb.activeSelectionForeground#4a973b
- breadcrumb.background#1b1f19
- breadcrumb.focusForeground#c4cac2
- breadcrumb.foreground#64725d
- breadcrumbPicker.background#232921
- button.background#61ba4f
- button.border#61ba4f00
- button.foreground#181d16
- button.hoverBackground#74c365
- button.secondaryBackground#2a3126
- button.secondaryForeground#c4cac2
- button.secondaryHoverBackground#333c2f
- charts.blue#3890b0
- charts.foreground#c4cac2
- charts.green#33a166
- charts.lines#64725d
- charts.orange#ca8556
- charts.purple#d270cb
- charts.red#d27076
- charts.yellow#ab8836
- checkbox.background#232921
- checkbox.border#404a3a
- checkbox.foreground#c4cac2
- debugConsole.errorForeground#d27076
- debugConsole.infoForeground#4ea03e
- debugConsole.sourceForeground#889482
- debugConsole.warningForeground#ab8836
- debugConsoleInputIcon.foreground#4a973b
- debugExceptionWidget.background#352a26
- debugExceptionWidget.border#d27076
- debugIcon.breakpointDisabledForeground#d2707680
- debugIcon.breakpointForeground#d27076
- debugIcon.continueForeground#33a166
- debugIcon.pauseForeground#4ea03e
- debugIcon.restartForeground#33a166
- debugIcon.startForeground#33a166
- debugIcon.stepIntoForeground#4ea03e
- debugIcon.stepOutForeground#4ea03e
- debugIcon.stepOverForeground#4ea03e
- debugIcon.stopForeground#d27076
- debugTokenExpression.boolean#d270cb
- debugTokenExpression.error#d27076
- debugTokenExpression.name#589db6
- debugTokenExpression.number#ca8556
- debugTokenExpression.string#35a950
- debugTokenExpression.value#35a950
- debugToolBar.background#232921
- debugToolBar.border#2c3328
- descriptionForeground#889482
- diffEditor.diagonalFill#2c3328
- diffEditor.insertedLineBackground#34985e17
- diffEditor.insertedTextBackground#34985e24
- diffEditor.removedLineBackground#ca6c6517
- diffEditor.removedTextBackground#ca6c6524
- diffEditorOverview.insertedForeground#34985e99
- diffEditorOverview.removedForeground#ca6c6599
- dropdown.background#232921
- dropdown.border#2c3328
- dropdown.foreground#c4cac2
- dropdown.listBackground#232921
- editor.background#1b1f19
- editor.findMatchBackground#c2723d52
- editor.findMatchBorder#c88051b3
- editor.findMatchHighlightBackground#c2723d2e
- editor.findRangeHighlightBackground#61ba4f21
- editor.focusedStackFrameHighlightBackground#33a1662e
- editor.foldBackground#61ba4f14
- editor.foreground#c4cac2
- editor.hoverHighlightBackground#61ba4f24
- editor.inactiveSelectionBackground#61ba4f21
- editor.lineHighlightBackground#ffffff0b
- editor.lineHighlightBorder#61ba4f00
- editor.rangeHighlightBackground#61ba4f21
- editor.selectionBackground#61ba4f3d
- editor.selectionHighlightBackground#61ba4f21
- editor.selectionHighlightBorder#61ba4f00
- editor.stackFrameHighlightBackground#ab883629
- editor.wordHighlightBackground#61ba4f24
- editor.wordHighlightStrongBackground#61ba4f38
- editorBracketHighlight.foreground1#3890b0
- editorBracketHighlight.foreground2#c2743f
- editorBracketHighlight.foreground3#319b7b
- editorBracketHighlight.foreground4#cb5ac3
- editorBracketHighlight.foreground5#319b4a
- editorBracketHighlight.foreground6#cf6679
- editorBracketHighlight.unexpectedBracket.foreground#d27076
- editorBracketMatch.background#61ba4f29
- editorBracketMatch.border#61ba4f8c
- editorCodeLens.foreground#64725d
- editorCursor.background#1b1f19
- editorCursor.foreground#4a973b
- editorError.foreground#d27076
- editorGhostText.foreground#63705c
- editorGroup.border#2c3328
- editorGroup.dropBackground#61ba4f29
- editorGroupHeader.border#2c332800
- editorGroupHeader.noTabsBackground#10130f
- editorGroupHeader.tabsBackground#10130f
- editorGroupHeader.tabsBorder#2c332800
- editorGutter.addedBackground#34985e
- editorGutter.background#1b1f19
- editorGutter.deletedBackground#ca6c65
- editorGutter.foldingControlForeground#889482
- editorGutter.modifiedBackground#a58139
- editorHint.foreground#64725d
- editorHoverWidget.background#232921
- editorHoverWidget.border#2c3328
- editorHoverWidget.foreground#c4cac2
- editorHoverWidget.statusBarBackground#2a3126
- editorIndentGuide.activeBackground1#495643
- editorIndentGuide.background1#2a3126
- editorInfo.foreground#4ea03e
- editorInlayHint.background#61ba4f1a
- editorInlayHint.foreground#64725d
- editorLineNumber.activeForeground#4a973b
- editorLineNumber.foreground#63705c
- editorLink.activeForeground#4a973b
- editorOverviewRuler.addedForeground#34985e
- editorOverviewRuler.border#2c332800
- editorOverviewRuler.bracketMatchForeground#61ba4f66
- editorOverviewRuler.deletedForeground#ca6c65
- editorOverviewRuler.errorForeground#d27076
- editorOverviewRuler.findMatchForeground#c88051b3
- editorOverviewRuler.infoForeground#4ea03e
- editorOverviewRuler.modifiedForeground#a58139
- editorOverviewRuler.selectionHighlightForeground#61ba4f66
- editorOverviewRuler.warningForeground#ab8836
- editorRuler.foreground#272e24
- editorStickyScroll.background#151813
- editorStickyScrollHover.background#2a3126
- editorSuggestWidget.background#232921
- editorSuggestWidget.border#2c3328
- editorSuggestWidget.focusHighlightForeground#74c365
- editorSuggestWidget.foreground#c4cac2
- editorSuggestWidget.highlightForeground#4a973b
- editorSuggestWidget.selectedBackground#61ba4f2e
- editorSuggestWidget.selectedForeground#c4cac2
- editorWarning.foreground#ab8836
- editorWhitespace.foreground#63705c80
- editorWidget.background#232921
- editorWidget.border#2c3328
- editorWidget.foreground#c4cac2
- errorForeground#d27076
- extensionBadge.remoteBackground#61ba4f
- extensionBadge.remoteForeground#181d16
- extensionButton.prominentBackground#61ba4f
- extensionButton.prominentForeground#181d16
- extensionButton.prominentHoverBackground#74c365
- extensionIcon.preReleaseForeground#d270cb
- extensionIcon.starForeground#ca8556
- extensionIcon.verifiedForeground#33a166
- focusBorder#61ba4f99
- foreground#c4cac2
- gitDecoration.addedResourceForeground#34985e
- gitDecoration.conflictingResourceForeground#c55ec5
- gitDecoration.deletedResourceForeground#ca6c65
- gitDecoration.ignoredResourceForeground#64725d
- gitDecoration.modifiedResourceForeground#a58139
- gitDecoration.renamedResourceForeground#3f9a3f
- gitDecoration.stageDeletedResourceForeground#ca6c65
- gitDecoration.stageModifiedResourceForeground#a58139
- gitDecoration.submoduleResourceForeground#9e75c7
- gitDecoration.untrackedResourceForeground#3f9a3f
- icon.foreground#889482
- input.background#22281f
- input.border#2c3328
- input.foreground#c4cac2
- input.placeholderForeground#64725d
- inputOption.activeBackground#61ba4f3d
- inputOption.activeBorder#61ba4f80
- inputOption.activeForeground#c4cac2
- inputValidation.errorBackground#382c28
- inputValidation.errorBorder#d27076
- inputValidation.errorForeground#c4cac2
- inputValidation.infoBackground#23341f
- inputValidation.infoBorder#4ea03e
- inputValidation.infoForeground#c4cac2
- inputValidation.warningBackground#32301e
- inputValidation.warningBorder#ab8836
- inputValidation.warningForeground#c4cac2
- keybindingLabel.background#64725d24
- keybindingLabel.border#64725d29
- keybindingLabel.bottomBorder#64725d38
- keybindingLabel.foreground#c4cac2
- list.activeSelectionBackground#61ba4f33
- list.activeSelectionForeground#c4cac2
- list.activeSelectionIconForeground#4a973b
- list.dropBackground#61ba4f29
- list.errorForeground#d27076
- list.focusBackground#61ba4f33
- list.focusForeground#c4cac2
- list.focusHighlightForeground#74c365
- list.focusOutline#61ba4f00
- list.highlightForeground#4a973b
- list.hoverBackground#64725d1a
- list.hoverForeground#c4cac2
- list.inactiveSelectionBackground#61ba4f1c
- list.inactiveSelectionForeground#c4cac2
- list.warningForeground#ab8836
- listFilterWidget.background#232921
- listFilterWidget.noMatchesOutline#d27076
- listFilterWidget.outline#61ba4f
- menu.background#232921
- menu.border#2c3328
- menu.foreground#c4cac2
- menu.selectionBackground#61ba4f33
- menu.selectionForeground#c4cac2
- menu.separatorBackground#2c3328
- menubar.selectionBackground#64725d24
- menubar.selectionForeground#c4cac2
- merge.border#2c332800
- merge.commonContentBackground#64725d1f
- merge.commonHeaderBackground#64725d40
- merge.currentContentBackground#34985e24
- merge.currentHeaderBackground#34985e4d
- merge.incomingContentBackground#4ea03e24
- merge.incomingHeaderBackground#4ea03e4d
- minimap.background#1b1f19
- minimap.errorHighlight#d27076
- minimap.findMatchHighlight#c2723db3
- minimap.selectionHighlight#61ba4f80
- minimap.warningHighlight#ab8836
- minimapGutter.addedBackground#34985e
- minimapGutter.deletedBackground#ca6c65
- minimapGutter.modifiedBackground#a58139
- minimapSlider.activeBackground#64725d42
- minimapSlider.background#64725d1a
- minimapSlider.hoverBackground#64725d2e
- notificationCenter.border#2c3328
- notificationCenterHeader.background#2a3126
- notificationCenterHeader.foreground#c4cac2
- notificationLink.foreground#4a973b
- notifications.background#232921
- notifications.border#2c3328
- notifications.foreground#c4cac2
- notificationsErrorIcon.foreground#d27076
- notificationsInfoIcon.foreground#4ea03e
- notificationsWarningIcon.foreground#ab8836
- notificationToast.border#2c3328
- panel.background#151813
- panel.border#2c3328
- panel.dropBorder#61ba4f
- panelInput.border#2c3328
- panelSection.border#2c3328
- panelSectionHeader.background#151813
- panelSectionHeader.foreground#c4cac2
- panelTitle.activeBorder#61ba4f
- panelTitle.activeForeground#c4cac2
- panelTitle.inactiveForeground#63705c
- peekView.border#61ba4f8c
- peekViewEditor.background#161a14
- peekViewEditor.matchHighlightBackground#c2723d52
- peekViewResult.background#151813
- peekViewResult.fileForeground#c4cac2
- peekViewResult.foreground#c4cac2
- peekViewResult.lineForeground#889482
- peekViewResult.matchHighlightBackground#c2723d52
- peekViewResult.selectionBackground#61ba4f2e
- peekViewResult.selectionForeground#c4cac2
- peekViewTitle.background#151813
- peekViewTitleDescription.foreground#889482
- peekViewTitleLabel.foreground#c4cac2
- pickerGroup.border#2c3328
- pickerGroup.foreground#4a973b
- ports.iconRunningProcessForeground#33a166
- problemsErrorIcon.foreground#d27076
- problemsInfoIcon.foreground#4ea03e
- problemsWarningIcon.foreground#ab8836
- progressBar.background#61ba4f
- quickInput.background#232921
- quickInput.foreground#c4cac2
- quickInputList.focusBackground#61ba4f33
- quickInputList.focusForeground#c4cac2
- quickInputList.focusIconForeground#4a973b
- quickInputTitle.background#2a3126
- sash.hoverBorder#61ba4f80
- scrollbar.shadow#0709074d
- scrollbarSlider.activeBackground#64725d73
- scrollbarSlider.background#64725d33
- scrollbarSlider.hoverBackground#64725d52
- search.resultsInfoForeground#889482
- searchEditor.findMatchBackground#c2723d2e
- selection.background#61ba4f3d
- settings.checkboxBackground#232921
- settings.checkboxBorder#404a3a
- settings.dropdownBackground#232921
- settings.dropdownBorder#2c3328
- settings.focusedRowBackground#61ba4f12
- settings.headerForeground#c4cac2
- settings.modifiedItemIndicator#61ba4f
- settings.numberInputBackground#22281f
- settings.numberInputBorder#2c3328
- settings.rowHoverBackground#64725d0f
- settings.textInputBackground#22281f
- settings.textInputBorder#2c3328
- sideBar.background#151813
- sideBar.border#2c332800
- sideBar.foreground#83907c
- sideBarSectionHeader.background#151813
- sideBarSectionHeader.border#2c332800
- sideBarSectionHeader.foreground#c4cac2
- sideBarStickyScroll.background#151813
- sideBarTitle.foreground#c4cac2
- statusBar.background#10130f
- statusBar.border#2c332800
- statusBar.debuggingBackground#61ba4f
- statusBar.debuggingBorder#2c332800
- statusBar.debuggingForeground#181d16
- statusBar.foreground#7f8c78
- statusBar.noFolderBackground#10130f
- statusBar.noFolderForeground#7f8c78
- statusBarItem.activeBackground#64725d38
- statusBarItem.hoverBackground#64725d24
- statusBarItem.prominentBackground#61ba4f3d
- statusBarItem.prominentForeground#c4cac2
- statusBarItem.prominentHoverBackground#61ba4f57
- statusBarItem.remoteBackground#61ba4f
- statusBarItem.remoteForeground#181d16
- symbolIcon.booleanForeground#d270cb
- symbolIcon.classForeground#35a784
- symbolIcon.colorForeground#c28861
- symbolIcon.constantForeground#ca8556
- symbolIcon.constructorForeground#3f9fc2
- symbolIcon.enumeratorForeground#35a784
- symbolIcon.enumeratorMemberForeground#ca8556
- symbolIcon.fieldForeground#589db6
- symbolIcon.fileForeground#889482
- symbolIcon.folderForeground#889482
- symbolIcon.functionForeground#3f9fc2
- symbolIcon.interfaceForeground#35a784
- symbolIcon.keywordForeground#d270cb
- symbolIcon.methodForeground#3f9fc2
- symbolIcon.moduleForeground#d5798a
- symbolIcon.namespaceForeground#d5798a
- symbolIcon.numberForeground#ca8556
- symbolIcon.propertyForeground#589db6
- symbolIcon.snippetForeground#c28861
- symbolIcon.stringForeground#35a950
- symbolIcon.textForeground#889482
- symbolIcon.variableForeground#c4cac2
- tab.activeBackground#1b1f19
- tab.activeBorder#1b1f1900
- tab.activeBorderTop#61ba4f
- tab.activeForeground#c4cac2
- tab.activeModifiedBorder#a58139
- tab.border#2c332800
- tab.hoverBackground#151813
- tab.hoverForeground#c4cac2
- tab.inactiveBackground#10130f
- tab.inactiveForeground#63705c
- tab.inactiveModifiedBorder#a5813980
- tab.lastPinnedBorder#2c3328
- tab.unfocusedActiveBackground#151813
- tab.unfocusedActiveBorderTop#61ba4f59
- tab.unfocusedActiveForeground#889482
- tab.unfocusedInactiveForeground#63705c
- terminal.ansiBlack#31392d
- terminal.ansiBlue#3890b0
- terminal.ansiBrightBlack#53614c
- terminal.ansiBrightBlue#64a8c1
- terminal.ansiBrightCyan#5eb198
- terminal.ansiBrightGreen#5eb172
- terminal.ansiBrightMagenta#d67ed0
- terminal.ansiBrightRed#da898f
- terminal.ansiBrightWhite#c4cac2
- terminal.ansiBrightYellow#cf9369
- terminal.ansiCyan#319b7b
- terminal.ansiGreen#319b4a
- terminal.ansiMagenta#cb5ac3
- terminal.ansiRed#cf686f
- terminal.ansiWhite#83907c
- terminal.ansiYellow#c2743f
- terminal.background#151813
- terminal.border#2c3328
- terminal.findMatchBackground#c2723d52
- terminal.findMatchHighlightBackground#c2723d2e
- terminal.foreground#bec4bb
- terminal.inactiveSelectionBackground#61ba4f21
- terminal.selectionBackground#61ba4f3d
- terminalCursor.background#151813
- terminalCursor.foreground#4a973b
- testing.iconErrored#d27076
- testing.iconFailed#d27076
- testing.iconPassed#33a166
- testing.iconQueued#ab8836
- testing.iconSkipped#64725d
- testing.iconUnset#64725d
- testing.message.error.decorationForeground#d27076
- testing.runAction#33a166
- textBlockQuote.background#151813
- textBlockQuote.border#61ba4f80
- textCodeBlock.background#151813
- textLink.activeForeground#74c365
- textLink.foreground#4a973b
- textPreformat.background#61ba4f1a
- textPreformat.foreground#35a950
- textSeparator.foreground#2c3328
- titleBar.activeBackground#10130f
- titleBar.activeForeground#7f8c78
- titleBar.border#2c332800
- titleBar.inactiveBackground#10130f
- titleBar.inactiveForeground#63705c
- tree.inactiveIndentGuidesStroke#252b22
- tree.indentGuidesStroke#2f362b
- walkThrough.embeddedEditorBackground#151813
- welcomePage.background#1b1f19
- welcomePage.progress.background#2c3328
- welcomePage.progress.foreground#61ba4f
- welcomePage.tileBackground#151813
- welcomePage.tileHoverBackground#2a3126
- widget.border#2c3328
- widget.shadow#07090770
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #7a8c70 | italic |
| comment.block.documentation storage.type, comment keyword | #7a8c70 | italic bold |
| punctuation, meta.brace, punctuation.definition.parameters, punctuation.separator, punctuation.terminator | #889482 | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable, entity.name.variable | #c4cac2 | — |
| variable.parameter, meta.function.parameters variable | #caaeae | italic |
| variable.language, variable.language.this, variable.other.constant | #d5798a | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name, variable.other.object.property | #589db6 | — |
| keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, keyword.type | #d270cb | — |
| keyword.operator, punctuation.accessor, storage.type.function.arrow | #b36faf | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default | #d270cb | italic |
| string, string.quoted, punctuation.definition.string, string.template | #35a950 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #b36faf | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp | #2ea884 | — |
| constant.character.escape, constant.character | #d5798a | — |
| constant.numeric, constant.language.numeric | #ca8556 | — |
| constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant | #ca8556 | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #3f9fc2 | — |
| entity.name.method, meta.method entity.name.function | #3f9fc2 | — |
| entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, meta.type.annotation, entity.name.namespace | #35a784 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #c28861 | italic |
| entity.name.tag, punctuation.definition.tag, meta.tag | #d5798a | — |
| support.class.component, entity.name.tag.custom | #35a784 | — |
| entity.other.attribute-name, meta.attribute | #c28861 | italic |
| entity.name.selector, entity.other.attribute-name.class, entity.other.attribute-name.id | #35a784 | — |
| support.type.property-name.css, support.type.property-name.scss | #589db6 | — |
| keyword.other.unit, constant.numeric.css | #ca8556 | — |
| support.type.property-name.json, meta.structure.dictionary.json string.quoted.double | #589db6 | — |
| entity.name.tag.yaml | #589db6 | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading | #3f9fc2 | bold |
| markup.bold | #ca8556 | bold |
| markup.italic | #d270cb | italic |
| markup.strikethrough | #7a8c70 | strikethrough |
| markup.underline.link, string.other.link | #4a973b | underline |
| markup.quote | #7a8c70 | italic |
| markup.inline.raw, markup.fenced_code, markup.raw | #35a950 | — |
| markup.list punctuation.definition.list, beginning.punctuation.definition.list | #d5798a | — |
| markup.inserted | #34985e | — |
| markup.deleted | #ca6c65 | — |
| markup.changed | #a58139 | — |
| invalid, invalid.illegal | #d27076 | — |
| invalid.deprecated | #ab8836 | strikethrough |
| variable.other.normal.shell, string.interpolated.dollar.shell | #589db6 | — |
| keyword.other.definition.ini, entity.name.section.ini | #589db6 | — |