Noemi Theme
Publisher: Stanley GomesThemes in package: 3
The ideal colors and contrast for long hours of coding. Your eyes will thank you.
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.background#121212
- activityBar.border#1f1f1f
- activityBar.foreground#d87757
- activityBar.inactiveForeground#85837d
- activityBarBadge.background#d87757
- activityBarBadge.foreground#ffffff
- badge.background#d87757
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#c3c1ba
- breadcrumb.focusForeground#c3c1ba
- breadcrumb.foreground#9a988f
- breadcrumbPicker.background#303030
- button.background#d87757
- button.foreground#ffffff
- button.hoverBackground#c46848
- button.secondaryBackground#3e3e38
- button.secondaryForeground#c3c1ba
- button.secondaryHoverBackground#51504a
- commandCenter.activeBackground#1a1813
- commandCenter.activeForeground#c3c1ba
- commandCenter.background#1f1f1f
- commandCenter.border#3e3e38
- commandCenter.foreground#b7b5a6
- descriptionForeground#9a988f
- diffEditor.insertedLineBackground#8fba6a10
- diffEditor.insertedTextBackground#8fba6a18
- diffEditor.removedLineBackground#f1444410
- diffEditor.removedTextBackground#f1444418
- disabledForeground#6b6961
- dropdown.background#1b1b1b
- dropdown.border#3e3e38
- dropdown.foreground#c3c1ba
- dropdown.listBackground#303030
- editor.background#121212
- editor.findMatchBackground#d8775750
- editor.findMatchHighlightBackground#d8775728
- editor.foldBackground#1b1b1b40
- editor.foreground#c3c1ba
- editor.hoverHighlightBackground#1b1b1b70
- editor.inactiveSelectionBackground#d8775718
- editor.lineHighlightBackground#1b1b1b60
- editor.lineHighlightBorder#1b1b1b00
- editor.rangeHighlightBackground#1b1b1b50
- editor.selectionBackground#d8775740
- editor.selectionHighlightBackground#d8775720
- editor.wordHighlightBackground#1b7ede20
- editor.wordHighlightStrongBackground#1b7ede30
- editorBracketHighlight.foreground1#d87757
- editorBracketHighlight.foreground2#5cacde
- editorBracketHighlight.foreground3#b39cf5
- editorBracketHighlight.foreground4#8fba6a
- editorBracketHighlight.foreground5#e89b76
- editorBracketHighlight.foreground6#9c87f6
- editorBracketMatch.background#d8775720
- editorBracketMatch.border#d8775780
- editorCursor.foreground#d87757
- editorError.foreground#f14444
- editorGroup.border#3e3e38
- editorGroupHeader.tabsBackground#121212
- editorGroupHeader.tabsBorder#3e3e38
- editorGutter.addedBackground#8fba6a
- editorGutter.deletedBackground#f14444
- editorGutter.modifiedBackground#5cacde
- editorHoverWidget.background#303030
- editorHoverWidget.border#3e3e38
- editorIndentGuide.activeBackground1#51504a80
- editorIndentGuide.background1#3e3e3860
- editorInfo.foreground#5cacde
- editorLineNumber.activeForeground#c3c1ba
- editorLineNumber.foreground#6b6961
- editorOverviewRuler.addedForeground#8fba6a80
- editorOverviewRuler.deletedForeground#f1444480
- editorOverviewRuler.modifiedForeground#5cacde80
- editorRuler.foreground#3e3e38
- editorSuggestWidget.background#303030
- editorSuggestWidget.border#3e3e38
- editorSuggestWidget.focusHighlightForeground#d87757
- editorSuggestWidget.foreground#c3c1ba
- editorSuggestWidget.highlightForeground#d87757
- editorSuggestWidget.selectedBackground#1a1813
- editorWarning.foreground#e89b76
- editorWhitespace.foreground#3e3e3860
- editorWidget.background#303030
- editorWidget.border#3e3e38
- editorWidget.foreground#c3c1ba
- errorForeground#f14444
- focusBorder#d8775780
- foreground#c3c1ba
- gitDecoration.addedResourceForeground#8fba6a
- gitDecoration.conflictingResourceForeground#e89b76
- gitDecoration.deletedResourceForeground#f14444
- gitDecoration.ignoredResourceForeground#51504a
- gitDecoration.modifiedResourceForeground#5cacde
- gitDecoration.renamedResourceForeground#4ec2c2
- gitDecoration.untrackedResourceForeground#8fba6a
- icon.foreground#b7b5a6
- input.background#1b1b1b
- input.border#3e3e38
- input.foreground#c3c1ba
- input.placeholderForeground#6b6961
- inputOption.activeBackground#d8775720
- inputOption.activeBorder#d87757
- inputOption.activeForeground#f7f5ee
- inputValidation.errorBackground#f1444418
- inputValidation.errorBorder#f14444
- inputValidation.infoBackground#5cacde18
- inputValidation.infoBorder#5cacde
- inputValidation.warningBackground#e89b7618
- inputValidation.warningBorder#e89b76
- keybindingLabel.background#1b1b1b
- keybindingLabel.border#51504a
- keybindingLabel.bottomBorder#3e3e38
- keybindingLabel.foreground#c3c1ba
- list.activeSelectionBackground#1a1813
- list.activeSelectionForeground#f7f5ee
- list.errorForeground#f14444
- list.focusBackground#1a1813
- list.focusForeground#f7f5ee
- list.highlightForeground#d87757
- list.hoverBackground#1b1b1b60
- list.hoverForeground#c3c1ba
- list.inactiveSelectionBackground#1a181390
- list.inactiveSelectionForeground#c3c1ba
- list.warningForeground#e89b76
- menu.background#303030
- menu.border#3e3e38
- menu.foreground#c3c1ba
- menu.selectionBackground#1a1813
- menu.selectionForeground#f7f5ee
- menu.separatorBackground#3e3e38
- menubar.selectionBackground#1a1813
- menubar.selectionForeground#f7f5ee
- minimap.findMatchHighlight#d8775760
- minimap.selectionHighlight#d8775740
- minimapGutter.addedBackground#8fba6a
- minimapGutter.deletedBackground#f14444
- minimapGutter.modifiedBackground#5cacde
- notificationLink.foreground#5cacde
- notifications.background#303030
- notifications.border#3e3e38
- notifications.foreground#c3c1ba
- panel.background#121212
- panel.border#3e3e38
- panelTitle.activeBorder#d87757
- panelTitle.activeForeground#f7f5ee
- panelTitle.inactiveForeground#9a988f
- peekView.border#d87757
- peekViewEditor.background#121212
- peekViewEditor.matchHighlightBackground#d8775730
- peekViewResult.background#1f1f1f
- peekViewResult.fileForeground#c3c1ba
- peekViewResult.lineForeground#b7b5a6
- peekViewResult.matchHighlightBackground#d8775730
- peekViewResult.selectionBackground#1a1813
- peekViewResult.selectionForeground#f7f5ee
- peekViewTitle.background#1b1b1b
- peekViewTitleDescription.foreground#6b6961
- peekViewTitleLabel.foreground#f7f5ee
- scrollbar.shadow#00000030
- scrollbarSlider.activeBackground#51504a80
- scrollbarSlider.background#51504a40
- scrollbarSlider.hoverBackground#51504a60
- search.resultsInfoForeground#6b6961
- selection.background#d8775740
- settings.checkboxBackground#1b1b1b
- settings.checkboxBorder#3e3e38
- settings.checkboxForeground#c3c1ba
- settings.dropdownBackground#1b1b1b
- settings.dropdownBorder#3e3e38
- settings.dropdownForeground#c3c1ba
- settings.dropdownListBorder#3e3e38
- settings.focusedRowBackground#1b1b1b60
- settings.focusedRowBorder#d8775750
- settings.headerForeground#f7f5ee
- settings.modifiedItemIndicator#d87757
- settings.numberInputBackground#1b1b1b
- settings.numberInputBorder#3e3e38
- settings.numberInputForeground#c3c1ba
- settings.rowHoverBackground#1b1b1b40
- settings.settingsHeaderHoverForeground#f7f5ee
- settings.textInputBackground#1b1b1b
- settings.textInputBorder#3e3e38
- settings.textInputForeground#c3c1ba
- sideBar.background#121212
- sideBar.border#1f1f1f
- sideBar.foreground#c3c1ba
- sideBarSectionHeader.background#1b1b1b60
- sideBarSectionHeader.border#3e3e38
- sideBarSectionHeader.foreground#c3c1ba
- sideBarTitle.foreground#c3c1ba
- statusBar.background#181818
- statusBar.border#333333
- statusBar.debuggingBackground#d87757
- statusBar.debuggingForeground#ffffff
- statusBar.foreground#b7b5a6
- statusBar.noFolderBackground#1f1f1f
- statusBar.noFolderForeground#b7b5a6
- statusBarItem.activeBackground#3e3e38
- statusBarItem.hoverBackground#1a1813
- statusBarItem.prominentBackground#1b1b1b
- statusBarItem.prominentHoverBackground#1a1813
- statusBarItem.remoteBackground#d87757
- statusBarItem.remoteForeground#ffffff
- tab.activeBackground#121212
- tab.activeBorder#121212
- tab.activeBorderTop#d87757
- tab.activeForeground#f7f5ee
- tab.border#3e3e38
- tab.hoverBackground#262626
- tab.inactiveBackground#181818
- tab.inactiveForeground#9a988f
- tab.unfocusedActiveBorderTop#d8775760
- terminal.ansiBlack#1b1b1b
- terminal.ansiBlue#5cacde
- terminal.ansiBrightBlack#6b6961
- terminal.ansiBrightBlue#7ec0ea
- terminal.ansiBrightCyan#6ed6d6
- terminal.ansiBrightGreen#a5d082
- terminal.ansiBrightMagenta#c9b5f9
- terminal.ansiBrightRed#f46868
- terminal.ansiBrightWhite#faf8f1
- terminal.ansiBrightYellow#d87757
- terminal.ansiCyan#4ec2c2
- terminal.ansiGreen#8fba6a
- terminal.ansiMagenta#b39cf5
- terminal.ansiRed#f14444
- terminal.ansiWhite#c3c1ba
- terminal.ansiYellow#e89b76
- terminal.background#181818
- terminal.foreground#c3c1ba
- terminal.inactiveSelectionBackground#d8775720
- terminal.selectionBackground#d8775740
- terminalCursor.foreground#d87757
- textBlockQuote.background#1b1b1b
- textBlockQuote.border#d87757
- textCodeBlock.background#1b1b1b
- textLink.activeForeground#7ec0ea
- textLink.foreground#5cacde
- textPreformat.background#1b1b1b
- textPreformat.foreground#c4a66e
- textSeparator.foreground#3e3e38
- titleBar.activeBackground#1f1f1f
- titleBar.activeForeground#c3c1ba
- titleBar.border#121212
- titleBar.inactiveBackground#1f1f1f
- titleBar.inactiveForeground#85837d
- tree.indentGuidesStroke#3e3e38
- walkThrough.embeddedEditorBackground#1f1f1f
- welcomePage.background#121212
- welcomePage.progress.background#3e3e38
- welcomePage.progress.foreground#d87757
- welcomePage.tileBackground#1f1f1f
- welcomePage.tileBorder#3e3e38
- welcomePage.tileHoverBackground#1b1b1b
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6b6961 | italic |
| keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.void, keyword.operator.in, keyword.operator.of, storage, storage.type, storage.modifier | #d87757 | — |
| keyword.control.flow, keyword.control.return, keyword.control.conditional, keyword.control.loop, keyword.control.trycatch, keyword.control.import, keyword.control.export, keyword.control.from | #d87757 | italic |
| keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.ternary, keyword.operator.spread | #9a988f | — |
| string, string.quoted, string.template, string.interpolated | #8fba6a | — |
| constant.character.escape, string.regexp | #4ec2c2 | — |
| punctuation.definition.template-expression, string.template punctuation.definition.template-expression | #d87757 | — |
| constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex | #e89b76 | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #e89b76 | italic |
| constant.other, variable.other.constant | #d4a06a | — |
| entity.name.function, meta.function-call entity.name.function, support.function | #b39cf5 | — |
| meta.method-call entity.name.function, entity.name.function.member | #b39cf5 | — |
| variable.parameter, meta.parameter | #b7b5a6 | italic |
| entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class | #5cacde | — |
| entity.name.type.parameter | #4ec2c2 | — |
| entity.name.type.interface | #4ec2c2 | italic |
| entity.name.type.enum | #5cacde | — |
| meta.type.annotation, support.type.primitive, support.type.builtin | #5cacde | — |
| variable, variable.other, variable.other.readwrite | #c3c1ba | — |
| variable.other.property, variable.other.object.property, meta.object-literal.key | #c4a66e | — |
| variable.language, variable.language.this, variable.language.self, variable.language.super | #d87757 | italic |
| punctuation, punctuation.definition.tag, punctuation.separator, punctuation.terminator, meta.brace | #9a988f | — |
| entity.name.tag, support.class.component | #d87757 | — |
| entity.other.attribute-name | #b39cf5 | italic |
| support.type.property-name.css, meta.property-name.css | #5cacde | — |
| support.constant.property-value.css, meta.property-value.css | #8fba6a | — |
| entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css | #d87757 | — |
| keyword.other.unit.css | #e89b76 | — |
| support.type.property-name.json, string.json support.type.property-name | #c4a66e | — |
| string.quoted.double.json | #8fba6a | — |
| markup.heading, entity.name.section.markdown | #d87757 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.underline.link, string.other.link | #5cacde | — |
| markup.inline.raw, markup.fenced_code, markup.raw.block | #8fba6a | — |
| punctuation.definition.list.begin.markdown | #d87757 | — |
| markup.quote | #6b6961 | italic |
| meta.decorator, meta.decorator entity.name.function, punctuation.decorator | #9c87f6 | — |
| entity.name.type.module, entity.name.type.namespace, support.module | #c4a66e | — |
| support.variable, support.constant | #e89b76 | — |
| support.variable.dom, support.constant.math, support.constant.json | #5cacde | — |
| invalid, invalid.illegal | #f14444 | — |
| invalid.deprecated | #6b6961 | strikethrough |