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#c2ce3b1a
- activityBar.activeBorder#c2ce3b
- activityBar.background#0f1012
- activityBar.border#2b2b3100
- activityBar.foreground#c5c5c9
- activityBar.inactiveForeground#62636f
- activityBarBadge.background#c2ce3b
- activityBarBadge.foreground#18181b
- activityBarTop.activeBorder#c2ce3b
- activityBarTop.foreground#c5c5c9
- activityBarTop.inactiveForeground#62636f
- badge.background#c2ce3b
- badge.foreground#18181b
- banner.background#28292e
- banner.foreground#c5c5c9
- banner.iconForeground#99a329
- breadcrumb.activeSelectionForeground#99a329
- breadcrumb.background#1a1a1e
- breadcrumb.focusForeground#c5c5c9
- breadcrumb.foreground#696b77
- breadcrumbPicker.background#222328
- button.background#c2ce3b
- button.border#c2ce3b00
- button.foreground#18181b
- button.hoverBackground#c9d454
- button.secondaryBackground#28292e
- button.secondaryForeground#c5c5c9
- button.secondaryHoverBackground#323239
- charts.blue#767cd6
- charts.foreground#c5c5c9
- charts.green#2f9d62
- charts.lines#696b77
- charts.orange#969d2f
- charts.purple#d5748e
- charts.red#d36c73
- charts.yellow#a98532
- checkbox.background#222328
- checkbox.border#3e3e47
- checkbox.foreground#c5c5c9
- debugConsole.errorForeground#d36c73
- debugConsole.infoForeground#99a329
- debugConsole.sourceForeground#8c8d97
- debugConsole.warningForeground#a98532
- debugConsoleInputIcon.foreground#99a329
- debugExceptionWidget.background#34252a
- debugExceptionWidget.border#d36c73
- debugIcon.breakpointDisabledForeground#d36c7380
- debugIcon.breakpointForeground#d36c73
- debugIcon.continueForeground#2f9d62
- debugIcon.pauseForeground#99a329
- debugIcon.restartForeground#2f9d62
- debugIcon.startForeground#2f9d62
- debugIcon.stepIntoForeground#99a329
- debugIcon.stepOutForeground#99a329
- debugIcon.stepOverForeground#99a329
- debugIcon.stopForeground#d36c73
- debugTokenExpression.boolean#d5748e
- debugTokenExpression.error#d36c73
- debugTokenExpression.name#888dcd
- debugTokenExpression.number#969d2f
- debugTokenExpression.string#30a196
- debugTokenExpression.value#30a196
- debugToolBar.background#222328
- debugToolBar.border#2b2b31
- descriptionForeground#8c8d97
- diffEditor.diagonalFill#2b2b31
- diffEditor.insertedLineBackground#329a5d17
- diffEditor.insertedTextBackground#329a5d24
- diffEditor.removedLineBackground#cb665f17
- diffEditor.removedTextBackground#cb665f24
- diffEditorOverview.insertedForeground#329a5d99
- diffEditorOverview.removedForeground#cb665f99
- dropdown.background#222328
- dropdown.border#2b2b31
- dropdown.foreground#c5c5c9
- dropdown.listBackground#222328
- editor.background#1a1a1e
- editor.findMatchBackground#bbc43b52
- editor.findMatchBorder#c2ca4eb3
- editor.findMatchHighlightBackground#bbc43b2e
- editor.findRangeHighlightBackground#c2ce3b21
- editor.focusedStackFrameHighlightBackground#2f9d622e
- editor.foldBackground#c2ce3b14
- editor.foreground#c5c5c9
- editor.hoverHighlightBackground#c2ce3b24
- editor.inactiveSelectionBackground#c2ce3b21
- editor.lineHighlightBackground#ffffff0b
- editor.lineHighlightBorder#c2ce3b00
- editor.rangeHighlightBackground#c2ce3b21
- editor.selectionBackground#c2ce3b3d
- editor.selectionHighlightBackground#c2ce3b21
- editor.selectionHighlightBorder#c2ce3b00
- editor.stackFrameHighlightBackground#a9853229
- editor.wordHighlightBackground#c2ce3b24
- editor.wordHighlightStrongBackground#c2ce3b38
- editorBracketHighlight.foreground1#767cd6
- editorBracketHighlight.foreground2#969d2f
- editorBracketHighlight.foreground3#388bbb
- editorBracketHighlight.foreground4#cf607e
- editorBracketHighlight.foreground5#2f9d92
- editorBracketHighlight.foreground6#b97637
- editorBracketHighlight.unexpectedBracket.foreground#d36c73
- editorBracketMatch.background#c2ce3b29
- editorBracketMatch.border#c2ce3b8c
- editorCodeLens.foreground#696b77
- editorCursor.background#1a1a1e
- editorCursor.foreground#99a329
- editorError.foreground#d36c73
- editorGhostText.foreground#60616c
- editorGroup.border#2b2b31
- editorGroup.dropBackground#c2ce3b29
- editorGroupHeader.border#2b2b3100
- editorGroupHeader.noTabsBackground#0f1012
- editorGroupHeader.tabsBackground#0f1012
- editorGroupHeader.tabsBorder#2b2b3100
- editorGutter.addedBackground#329a5d
- editorGutter.background#1a1a1e
- editorGutter.deletedBackground#cb665f
- editorGutter.foldingControlForeground#8c8d97
- editorGutter.modifiedBackground#a47f35
- editorHint.foreground#696b77
- editorHoverWidget.background#222328
- editorHoverWidget.border#2b2b31
- editorHoverWidget.foreground#c5c5c9
- editorHoverWidget.statusBarBackground#28292e
- editorIndentGuide.activeBackground1#474852
- editorIndentGuide.background1#28292e
- editorInfo.foreground#99a329
- editorInlayHint.background#c2ce3b1a
- editorInlayHint.foreground#696b77
- editorLineNumber.activeForeground#99a329
- editorLineNumber.foreground#60616c
- editorLink.activeForeground#99a329
- editorOverviewRuler.addedForeground#329a5d
- editorOverviewRuler.border#2b2b3100
- editorOverviewRuler.bracketMatchForeground#c2ce3b66
- editorOverviewRuler.deletedForeground#cb665f
- editorOverviewRuler.errorForeground#d36c73
- editorOverviewRuler.findMatchForeground#c2ca4eb3
- editorOverviewRuler.infoForeground#99a329
- editorOverviewRuler.modifiedForeground#a47f35
- editorOverviewRuler.selectionHighlightForeground#c2ce3b66
- editorOverviewRuler.warningForeground#a98532
- editorRuler.foreground#26262c
- editorStickyScroll.background#141417
- editorStickyScrollHover.background#28292e
- editorSuggestWidget.background#222328
- editorSuggestWidget.border#2b2b31
- editorSuggestWidget.focusHighlightForeground#c9d454
- editorSuggestWidget.foreground#c5c5c9
- editorSuggestWidget.highlightForeground#99a329
- editorSuggestWidget.selectedBackground#c2ce3b2e
- editorSuggestWidget.selectedForeground#c5c5c9
- editorWarning.foreground#a98532
- editorWhitespace.foreground#60616c80
- editorWidget.background#222328
- editorWidget.border#2b2b31
- editorWidget.foreground#c5c5c9
- errorForeground#d36c73
- extensionBadge.remoteBackground#c2ce3b
- extensionBadge.remoteForeground#18181b
- extensionButton.prominentBackground#c2ce3b
- extensionButton.prominentForeground#18181b
- extensionButton.prominentHoverBackground#c9d454
- extensionIcon.preReleaseForeground#d5748e
- extensionIcon.starForeground#969d2f
- extensionIcon.verifiedForeground#2f9d62
- focusBorder#c2ce3b99
- foreground#c5c5c9
- gitDecoration.addedResourceForeground#329a5d
- gitDecoration.conflictingResourceForeground#c658c6
- gitDecoration.deletedResourceForeground#cb665f
- gitDecoration.ignoredResourceForeground#696b77
- gitDecoration.modifiedResourceForeground#a47f35
- gitDecoration.renamedResourceForeground#3c963c
- gitDecoration.stageDeletedResourceForeground#cb665f
- gitDecoration.stageModifiedResourceForeground#a47f35
- gitDecoration.submoduleResourceForeground#9c71c6
- gitDecoration.untrackedResourceForeground#3c963c
- icon.foreground#8c8d97
- input.background#212226
- input.border#2b2b31
- input.foreground#c5c5c9
- input.placeholderForeground#696b77
- inputOption.activeBackground#c2ce3b3d
- inputOption.activeBorder#c2ce3b80
- inputOption.activeForeground#c5c5c9
- inputValidation.errorBackground#38272c
- inputValidation.errorBorder#d36c73
- inputValidation.errorForeground#c5c5c9
- inputValidation.infoBackground#2e3020
- inputValidation.infoBorder#99a329
- inputValidation.infoForeground#c5c5c9
- inputValidation.warningBackground#312b21
- inputValidation.warningBorder#a98532
- inputValidation.warningForeground#c5c5c9
- keybindingLabel.background#696b7724
- keybindingLabel.border#696b7729
- keybindingLabel.bottomBorder#696b7738
- keybindingLabel.foreground#c5c5c9
- list.activeSelectionBackground#c2ce3b33
- list.activeSelectionForeground#c5c5c9
- list.activeSelectionIconForeground#99a329
- list.dropBackground#c2ce3b29
- list.errorForeground#d36c73
- list.focusBackground#c2ce3b33
- list.focusForeground#c5c5c9
- list.focusHighlightForeground#c9d454
- list.focusOutline#c2ce3b00
- list.highlightForeground#99a329
- list.hoverBackground#696b771a
- list.hoverForeground#c5c5c9
- list.inactiveSelectionBackground#c2ce3b1c
- list.inactiveSelectionForeground#c5c5c9
- list.warningForeground#a98532
- listFilterWidget.background#222328
- listFilterWidget.noMatchesOutline#d36c73
- listFilterWidget.outline#c2ce3b
- menu.background#222328
- menu.border#2b2b31
- menu.foreground#c5c5c9
- menu.selectionBackground#c2ce3b33
- menu.selectionForeground#c5c5c9
- menu.separatorBackground#2b2b31
- menubar.selectionBackground#696b7724
- menubar.selectionForeground#c5c5c9
- merge.border#2b2b3100
- merge.commonContentBackground#696b771f
- merge.commonHeaderBackground#696b7740
- merge.currentContentBackground#329a5d24
- merge.currentHeaderBackground#329a5d4d
- merge.incomingContentBackground#99a32924
- merge.incomingHeaderBackground#99a3294d
- minimap.background#1a1a1e
- minimap.errorHighlight#d36c73
- minimap.findMatchHighlight#bbc43bb3
- minimap.selectionHighlight#c2ce3b80
- minimap.warningHighlight#a98532
- minimapGutter.addedBackground#329a5d
- minimapGutter.deletedBackground#cb665f
- minimapGutter.modifiedBackground#a47f35
- minimapSlider.activeBackground#696b7742
- minimapSlider.background#696b771a
- minimapSlider.hoverBackground#696b772e
- notificationCenter.border#2b2b31
- notificationCenterHeader.background#28292e
- notificationCenterHeader.foreground#c5c5c9
- notificationLink.foreground#99a329
- notifications.background#222328
- notifications.border#2b2b31
- notifications.foreground#c5c5c9
- notificationsErrorIcon.foreground#d36c73
- notificationsInfoIcon.foreground#99a329
- notificationsWarningIcon.foreground#a98532
- notificationToast.border#2b2b31
- panel.background#141417
- panel.border#2b2b31
- panel.dropBorder#c2ce3b
- panelInput.border#2b2b31
- panelSection.border#2b2b31
- panelSectionHeader.background#141417
- panelSectionHeader.foreground#c5c5c9
- panelTitle.activeBorder#c2ce3b
- panelTitle.activeForeground#c5c5c9
- panelTitle.inactiveForeground#656672
- peekView.border#c2ce3b8c
- peekViewEditor.background#151619
- peekViewEditor.matchHighlightBackground#bbc43b52
- peekViewResult.background#141417
- peekViewResult.fileForeground#c5c5c9
- peekViewResult.foreground#c5c5c9
- peekViewResult.lineForeground#8c8d97
- peekViewResult.matchHighlightBackground#bbc43b52
- peekViewResult.selectionBackground#c2ce3b2e
- peekViewResult.selectionForeground#c5c5c9
- peekViewTitle.background#141417
- peekViewTitleDescription.foreground#8c8d97
- peekViewTitleLabel.foreground#c5c5c9
- pickerGroup.border#2b2b31
- pickerGroup.foreground#99a329
- ports.iconRunningProcessForeground#2f9d62
- problemsErrorIcon.foreground#d36c73
- problemsInfoIcon.foreground#99a329
- problemsWarningIcon.foreground#a98532
- progressBar.background#c2ce3b
- quickInput.background#222328
- quickInput.foreground#c5c5c9
- quickInputList.focusBackground#c2ce3b33
- quickInputList.focusForeground#c5c5c9
- quickInputList.focusIconForeground#99a329
- quickInputTitle.background#28292e
- sash.hoverBorder#c2ce3b80
- scrollbar.shadow#0707084d
- scrollbarSlider.activeBackground#696b7773
- scrollbarSlider.background#696b7733
- scrollbarSlider.hoverBackground#696b7752
- search.resultsInfoForeground#8c8d97
- searchEditor.findMatchBackground#bbc43b2e
- selection.background#c2ce3b3d
- settings.checkboxBackground#222328
- settings.checkboxBorder#3e3e47
- settings.dropdownBackground#222328
- settings.dropdownBorder#2b2b31
- settings.focusedRowBackground#c2ce3b12
- settings.headerForeground#c5c5c9
- settings.modifiedItemIndicator#c2ce3b
- settings.numberInputBackground#212226
- settings.numberInputBorder#2b2b31
- settings.rowHoverBackground#696b770f
- settings.textInputBackground#212226
- settings.textInputBorder#2b2b31
- sideBar.background#141417
- sideBar.border#2b2b3100
- sideBar.foreground#888993
- sideBarSectionHeader.background#141417
- sideBarSectionHeader.border#2b2b3100
- sideBarSectionHeader.foreground#c5c5c9
- sideBarStickyScroll.background#141417
- sideBarTitle.foreground#c5c5c9
- statusBar.background#0f1012
- statusBar.border#2b2b3100
- statusBar.debuggingBackground#c2ce3b
- statusBar.debuggingBorder#2b2b3100
- statusBar.debuggingForeground#18181b
- statusBar.foreground#848590
- statusBar.noFolderBackground#0f1012
- statusBar.noFolderForeground#848590
- statusBarItem.activeBackground#696b7738
- statusBarItem.hoverBackground#696b7724
- statusBarItem.prominentBackground#c2ce3b3d
- statusBarItem.prominentForeground#c5c5c9
- statusBarItem.prominentHoverBackground#c2ce3b57
- statusBarItem.remoteBackground#c2ce3b
- statusBarItem.remoteForeground#18181b
- symbolIcon.booleanForeground#d5748e
- symbolIcon.classForeground#4899c8
- symbolIcon.colorForeground#909738
- symbolIcon.constantForeground#969d2f
- symbolIcon.constructorForeground#858bdb
- symbolIcon.enumeratorForeground#4899c8
- symbolIcon.enumeratorMemberForeground#969d2f
- symbolIcon.fieldForeground#888dcd
- symbolIcon.fileForeground#8c8d97
- symbolIcon.folderForeground#8c8d97
- symbolIcon.functionForeground#858bdb
- symbolIcon.interfaceForeground#4899c8
- symbolIcon.keywordForeground#d5748e
- symbolIcon.methodForeground#858bdb
- symbolIcon.moduleForeground#c78243
- symbolIcon.namespaceForeground#c78243
- symbolIcon.numberForeground#969d2f
- symbolIcon.propertyForeground#888dcd
- symbolIcon.snippetForeground#909738
- symbolIcon.stringForeground#30a196
- symbolIcon.textForeground#8c8d97
- symbolIcon.variableForeground#c5c5c9
- tab.activeBackground#1a1a1e
- tab.activeBorder#1a1a1e00
- tab.activeBorderTop#c2ce3b
- tab.activeForeground#c5c5c9
- tab.activeModifiedBorder#a47f35
- tab.border#2b2b3100
- tab.hoverBackground#141417
- tab.hoverForeground#c5c5c9
- tab.inactiveBackground#0f1012
- tab.inactiveForeground#62636f
- tab.inactiveModifiedBorder#a47f3580
- tab.lastPinnedBorder#2b2b31
- tab.unfocusedActiveBackground#141417
- tab.unfocusedActiveBorderTop#c2ce3b59
- tab.unfocusedActiveForeground#8c8d97
- tab.unfocusedInactiveForeground#60616c
- terminal.ansiBlack#2f3037
- terminal.ansiBlue#767cd6
- terminal.ansiBrightBlack#51525d
- terminal.ansiBrightBlue#9499df
- terminal.ansiBrightCyan#64a5ca
- terminal.ansiBrightGreen#5db3aa
- terminal.ansiBrightMagenta#da839a
- terminal.ansiBrightRed#da858a
- terminal.ansiBrightWhite#c5c5c9
- terminal.ansiBrightYellow#adb35d
- terminal.ansiCyan#388bbb
- terminal.ansiGreen#2f9d92
- terminal.ansiMagenta#cf607e
- terminal.ansiRed#d06269
- terminal.ansiWhite#888993
- terminal.ansiYellow#969d2f
- terminal.background#141417
- terminal.border#2b2b31
- terminal.findMatchBackground#bbc43b52
- terminal.findMatchHighlightBackground#bbc43b2e
- terminal.foreground#bfc0c4
- terminal.inactiveSelectionBackground#c2ce3b21
- terminal.selectionBackground#c2ce3b3d
- terminalCursor.background#141417
- terminalCursor.foreground#99a329
- testing.iconErrored#d36c73
- testing.iconFailed#d36c73
- testing.iconPassed#2f9d62
- testing.iconQueued#a98532
- testing.iconSkipped#696b77
- testing.iconUnset#696b77
- testing.message.error.decorationForeground#d36c73
- testing.runAction#2f9d62
- textBlockQuote.background#141417
- textBlockQuote.border#c2ce3b80
- textCodeBlock.background#141417
- textLink.activeForeground#c9d454
- textLink.foreground#99a329
- textPreformat.background#c2ce3b1a
- textPreformat.foreground#30a196
- textSeparator.foreground#2b2b31
- titleBar.activeBackground#0f1012
- titleBar.activeForeground#848590
- titleBar.border#2b2b3100
- titleBar.inactiveBackground#0f1012
- titleBar.inactiveForeground#60616c
- tree.inactiveIndentGuidesStroke#242429
- tree.indentGuidesStroke#2d2e34
- walkThrough.embeddedEditorBackground#141417
- welcomePage.background#1a1a1e
- welcomePage.progress.background#2b2b31
- welcomePage.progress.foreground#c2ce3b
- welcomePage.tileBackground#141417
- welcomePage.tileHoverBackground#28292e
- widget.border#2b2b31
- widget.shadow#07070870
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, string.comment | #838491 | italic |
| comment.block.documentation storage.type, comment keyword | #838491 | italic bold |
| punctuation, meta.brace, punctuation.definition.parameters, punctuation.separator, punctuation.terminator | #8c8d97 | — |
| variable, variable.other.readwrite, meta.definition.variable.name, support.variable, entity.name.variable | #c5c5c9 | — |
| variable.parameter, meta.function.parameters variable | #c6ae9a | italic |
| variable.language, variable.language.this, variable.other.constant | #c78243 | italic |
| variable.other.property, meta.object-literal.key, support.type.property-name, variable.other.object.property | #888dcd | — |
| keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier, keyword.type | #d5748e | — |
| keyword.operator, punctuation.accessor, storage.type.function.arrow | #b57082 | — |
| keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.default | #d5748e | italic |
| string, string.quoted, punctuation.definition.string, string.template | #30a196 | — |
| punctuation.definition.template-expression, punctuation.section.embedded | #b57082 | — |
| string.regexp, constant.other.character-class.regexp, keyword.operator.quantifier.regexp | #409ace | — |
| constant.character.escape, constant.character | #c78243 | — |
| constant.numeric, constant.language.numeric | #969d2f | — |
| constant, constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant | #969d2f | — |
| entity.name.function, support.function, meta.function-call.generic, variable.function | #858bdb | — |
| entity.name.method, meta.method entity.name.function | #858bdb | — |
| entity.name.type, entity.name.class, entity.other.inherited-class, support.class, support.type, meta.type.annotation, entity.name.namespace | #4899c8 | — |
| meta.decorator, entity.name.function.decorator, punctuation.decorator | #909738 | italic |
| entity.name.tag, punctuation.definition.tag, meta.tag | #c78243 | — |
| support.class.component, entity.name.tag.custom | #4899c8 | — |
| entity.other.attribute-name, meta.attribute | #909738 | italic |
| entity.name.selector, entity.other.attribute-name.class, entity.other.attribute-name.id | #4899c8 | — |
| support.type.property-name.css, support.type.property-name.scss | #888dcd | — |
| keyword.other.unit, constant.numeric.css | #969d2f | — |
| support.type.property-name.json, meta.structure.dictionary.json string.quoted.double | #888dcd | — |
| entity.name.tag.yaml | #888dcd | — |
| markup.heading, entity.name.section.markdown, punctuation.definition.heading | #858bdb | bold |
| markup.bold | #969d2f | bold |
| markup.italic | #d5748e | italic |
| markup.strikethrough | #838491 | strikethrough |
| markup.underline.link, string.other.link | #99a329 | underline |
| markup.quote | #838491 | italic |
| markup.inline.raw, markup.fenced_code, markup.raw | #30a196 | — |
| markup.list punctuation.definition.list, beginning.punctuation.definition.list | #c78243 | — |
| markup.inserted | #329a5d | — |
| markup.deleted | #cb665f | — |
| markup.changed | #a47f35 | — |
| invalid, invalid.illegal | #d36c73 | — |
| invalid.deprecated | #a98532 | strikethrough |
| variable.other.normal.shell, string.interpolated.dollar.shell | #888dcd | — |
| keyword.other.definition.ini, entity.name.section.ini | #888dcd | — |