Relaxed Theme - Semantic Focus
Publisher: nomad-in-codeThemes in package: 3
A calm, readable theme family for Visual Studio Code with first‑class semantic highlighting and complete modern UI coverage. Tuned for TypeScript/JavaScript and C# (.NET)
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.activeBorder#4b7d53
- activityBar.activeFocusBorder#4b7d53
- activityBar.background#eaedf0
- activityBar.border#d9dee5
- activityBar.foreground#5b6472
- activityBar.inactiveForeground#8a949e
- activityBarBadge.background#4b6b7d
- activityBarBadge.foreground#ffffff
- badge.background#4b6b7d
- badge.foreground#2a2f37
- breadcrumb.activeSelectionForeground#2a2f37
- breadcrumb.background#f3f4f6
- breadcrumb.focusForeground#2a2f37
- breadcrumb.foreground#5b6472
- breadcrumbPicker.background#eceff3f0
- descriptionForeground#5b6472
- diffEditor.insertedTextBackground#4b7d5355
- diffEditor.removedTextBackground#b03e3455
- disabledForeground#8f98a3
- dropdown.background#eceff3f0
- dropdown.border#d9dee5
- editor.background#f3f4f6
- editor.findMatchBackground#4b6b7d55
- editor.findMatchBorder#4b6b7d
- editor.findMatchForeground#2a2f37
- editor.findMatchHighlightBackground#4b6b7d30
- editor.findMatchHighlightBorder#4b6b7d88
- editor.findMatchHighlightForeground#2a2f37
- editor.findRangeHighlightBackground#00000010
- editor.findRangeHighlightBorder#4b6b7d44
- editor.foldBackground#00000008
- editor.foldPlaceholderForeground#9aa3ad
- editor.foreground#2a2f37
- editor.hoverHighlightBackground#4b6b7d22
- editor.inactiveLineHighlightBackground#e6eaee
- editor.lineHighlightBackground#e6e8ec
- editor.lineHighlightBorder#d9dee544
- editor.linkedEditingBackground#4b6b7d15
- editor.rangeHighlightBackground#4b6b7d22
- editor.rangeHighlightBorder#4b6b7d44
- editor.selectionBackground#ccd3dd
- editor.selectionForeground#000000
- editor.selectionHighlightBackground#ccd3dd66
- editor.selectionHighlightBorder#4b6b7d55
- editor.symbolHighlightBackground#4b6b7d22
- editor.symbolHighlightBorder#4b6b7d44
- editor.wordHighlightBackground#00000014
- editor.wordHighlightBorder#00000010
- editor.wordHighlightStrongBackground#00000022
- editor.wordHighlightStrongBorder#00000018
- editorBracketHighlight.foreground1#2f6d86
- editorBracketHighlight.foreground2#4b7d53
- editorBracketHighlight.foreground3#8b6f2e
- editorBracketHighlight.foreground4#7a4f7f
- editorBracketHighlight.foreground5#3f5f8f
- editorBracketHighlight.foreground6#b03e34
- editorBracketMatch.background#4b6b7d18
- editorBracketMatch.border#4b6b7d
- editorBracketMatch.foreground#2a2f37
- editorBracketPairGuide.activeBackground1#2f6d8640
- editorBracketPairGuide.activeBackground2#4b7d5340
- editorBracketPairGuide.activeBackground3#8b6f2e40
- editorBracketPairGuide.activeBackground4#7a4f7f40
- editorBracketPairGuide.activeBackground5#3f5f8f40
- editorBracketPairGuide.activeBackground6#b03e3440
- editorBracketPairGuide.background1#2f6d8618
- editorBracketPairGuide.background2#4b7d5318
- editorBracketPairGuide.background3#8b6f2e18
- editorBracketPairGuide.background4#7a4f7f18
- editorBracketPairGuide.background5#3f5f8f18
- editorBracketPairGuide.background6#b03e3418
- editorCodeLens.foreground#8f98a3
- editorGroup.border#d9dee5
- editorGroup.dropBackground#4b6b7d22
- editorGroup.emptyBackground#f3f4f6
- editorGroup.focusedEmptyBorder#4b6b7d
- editorGroupHeader.border#d9dee5
- editorGroupHeader.tabsBackground#f0f2f5
- editorGroupHeader.tabsBorder#d9dee5
- editorGutter.addedBackground#4b7d53
- editorGutter.addedSecondaryBackground#4b7d5366
- editorGutter.background#f3f4f6
- editorGutter.deletedBackground#b03e34
- editorGutter.deletedSecondaryBackground#b03e3466
- editorGutter.modifiedBackground#8b6f2e
- editorGutter.modifiedSecondaryBackground#8b6f2e66
- editorIndentGuide.activeBackground#c4cdd4
- editorIndentGuide.background#d9dee5
- editorInlayHint.background#00000010
- editorInlayHint.foreground#4a5160
- editorInlayHint.parameterBackground#00000010
- editorInlayHint.parameterForeground#495364
- editorInlayHint.typeBackground#00000010
- editorInlayHint.typeForeground#4a5160
- editorLightBulb.foreground#8b6f2e
- editorLightBulbAi.foreground#4b6b7d
- editorLightBulbAutoFix.foreground#4b7d53
- editorLineNumber.activeForeground#8b6f2e
- editorLineNumber.foreground#8f98a3
- editorLink.activeForeground#4b7d53
- editorOverviewRuler.background#f3f4f6
- editorOverviewRuler.border#d9dee5
- editorPane.background#f0f2f5
- editorRuler.foreground#c9cfd6
- editorStickyScroll.background#f3f4f6
- editorStickyScroll.border#d9dee5
- editorStickyScrollHover.background#eaedf1
- editorSuggestWidget.background#e9ebeff0
- editorSuggestWidget.border#d9dee5
- editorSuggestWidget.foreground#2a2f37
- editorSuggestWidget.highlightForeground#4b6b7d
- editorSuggestWidget.selectedBackground#e6eaee
- editorSuggestWidget.selectedForeground#2a2f37
- editorSuggestWidget.selectedIconForeground#2a2f37
- editorUnicodeHighlight.background#8b6f2e15
- editorUnicodeHighlight.border#8b6f2e
- editorUnnecessaryCode.border#b03e3455
- editorUnnecessaryCode.opacity0.6
- editorWhitespace.foreground#9aa3ad
- editorWidget.background#eaedf1dd
- editorWidget.border#4b6b7d
- editorWidget.foreground#2a2f37
- editorWidget.resizeBorder#4b6b7d
- errorForeground#b03e34
- focusBorder#4b6b7d
- gitDecoration.conflictingResourceForeground#7a4f7f
- gitDecoration.deletedResourceForeground#b03e34
- gitDecoration.ignoredResourceForeground#9aa3ad
- gitDecoration.modifiedResourceForeground#8b6f2e
- gitDecoration.untrackedResourceForeground#4b7d53
- icon.foreground#5b6472
- input.background#eaedf1
- input.border#4b6b7d
- input.foreground#2a2f37
- input.placeholderForeground#9aa3ad
- list.activeSelectionBackground#d4dce4
- list.activeSelectionForeground#2a2f37
- list.activeSelectionIconForeground#2a2f37
- list.deemphasizedForeground#8a949e
- list.dropBackground#4b6b7d22
- list.filterMatchBackground#4b6b7d33
- list.filterMatchBorder#4b6b7d66
- list.focusAndSelectionOutline#4b7d53
- list.focusBackground#c0ccd5
- list.focusForeground#2a2f37
- list.focusHighlightForeground#2a2f37
- list.focusOutline#4b6b7d
- list.highlightForeground#4b6b7d
- list.hoverBackground#e9edf1
- list.inactiveSelectionBackground#e9edf1
- list.inactiveSelectionForeground#2a2f37
- list.inactiveSelectionIconForeground#2a2f37
- menu.background#eceff3f0
- menu.border#d9dee5
- menu.foreground#2a2f37
- menu.selectionBackground#e6eaee
- menu.selectionBorder#4b6b7d44
- menu.selectionForeground#2a2f37
- menu.separatorBackground#d9dee5
- minimap.background#eef1f5
- minimap.findMatchHighlight#8b6f2edd
- minimap.selectionHighlight#4b6b7d55
- minimapGutter.addedBackground#4b7d53
- minimapGutter.deletedBackground#b03e34
- minimapGutter.modifiedBackground#8b6f2e
- notificationCenter.border#d9dee5
- notificationLink.foreground#4b6b7d
- notifications.background#eceff3f0
- notifications.border#d9dee5
- notifications.foreground#2a2f37
- notificationToast.border#d9dee5
- panel.background#eef2f4
- panel.border#d9dee5
- panel.dropBorder#d9dee5
- panelInput.border#d9dee5
- panelSection.border#d9dee5
- panelSectionHeader.border#d9dee5
- panelSectionHeader.foreground#2a2f37
- panelTitle.activeBorder#4b6b7d
- panelTitle.activeForeground#2a2f37
- panelTitle.border#d9dee5
- panelTitle.inactiveForeground#7a8490
- peekView.border#4b6b7d
- peekViewEditor.background#e9edf2f5
- peekViewEditor.matchHighlightBackground#4b6b7d30
- peekViewResult.background#eceff3
- peekViewResult.matchHighlightBackground#4b6b7d30
- peekViewResult.selectionBackground#dfe5ea
- peekViewTitle.background#eef1f5e6
- peekViewTitleDescription.foreground#4e5865
- peekViewTitleLabel.foreground#2a2f37
- pickerGroup.foreground#4b6b7d
- progressBar.background#4b6b7d
- quickInput.background#eceff3f0
- quickInput.foreground#2a2f37
- quickInputList.focusBackground#e6eaee
- sash.hoverBorder#4b6b7d
- scrollbar.shadow#cfd5dc30
- scrollbarSlider.activeBackground#4b6b7d
- scrollbarSlider.background#c9cfd6
- scrollbarSlider.hoverBackground#b9bfc6
- selection.background#4b6b7d44
- sideBar.background#ebeef1
- sideBar.border#d9dee5
- sideBar.dropBackground#4b6b7d20
- sideBar.foreground#5b6472
- sideBarSectionHeader.background#eef0f3
- sideBarSectionHeader.border#d9dee5
- sideBarSectionHeader.foreground#5b6472
- sideBarTitle.background#f3f4f6
- sideBarTitle.border#d9dee5
- sideBarTitle.foreground#2a2f37
- sideBySideEditor.horizontalBorder#d9dee5
- sideBySideEditor.verticalBorder#d9dee5
- statusBar.background#e9ebef
- statusBar.border#d9dee5
- statusBar.debuggingBackground#4b6b7d
- statusBar.debuggingBorder#4b6b7d
- statusBar.debuggingForeground#2a2f37
- statusBar.foreground#2a2f37
- statusBar.noFolderBackground#e9ebef
- statusBar.noFolderBorder#d9dee5
- statusBar.noFolderForeground#2a2f37
- statusBarItem.activeBackground#d4dce4
- statusBarItem.activeForeground#2a2f37
- statusBarItem.errorBackground#f0d8d4
- statusBarItem.errorForeground#b03e34
- statusBarItem.errorHoverBackground#f0d8d4
- statusBarItem.errorHoverForeground#b03e34
- statusBarItem.focusBorder#4b7d53
- statusBarItem.hoverBackground#d4dce4
- statusBarItem.hoverForeground#2a2f37
- statusBarItem.prominentBackground#d9dee5
- statusBarItem.prominentForeground#8b6f2e
- statusBarItem.prominentHoverBackground#d4dce4
- statusBarItem.prominentHoverForeground#8b6f2e
- statusBarItem.remoteBackground#e6eaee
- statusBarItem.remoteForeground#3f5f8f
- statusBarItem.remoteHoverBackground#dce4ec
- statusBarItem.remoteHoverForeground#3f5f8f
- statusBarItem.warningBackground#f0e8d4
- statusBarItem.warningForeground#8b6f2e
- statusBarItem.warningHoverBackground#f0e8d4
- statusBarItem.warningHoverForeground#8b6f2e
- tab.activeBackground#f3f4f6
- tab.activeBorder#4b6b7d
- tab.activeBorderTop#4b6b7d
- tab.activeForeground#2a2f37
- tab.activeModifiedBorder#8b6f2e
- tab.border#d9dee5
- tab.dragAndDropBorder#4b6b7d
- tab.hoverBackground#f3f4f6
- tab.hoverBorder#d9dee5
- tab.hoverForeground#2a2f37
- tab.inactiveBackground#edf1f5
- tab.inactiveForeground#5b6472
- tab.inactiveModifiedBorder#8b6f2e88
- tab.lastPinnedBorder#d9dee5
- tab.selectedBackground#f3f4f6
- tab.selectedForeground#2a2f37
- tab.unfocusedActiveBackground#e6eaee
- tab.unfocusedActiveBorder#59788a
- tab.unfocusedActiveForeground#5a6a7a
- tab.unfocusedActiveModifiedBorder#8b6f2e88
- tab.unfocusedHoverBackground#f0f3f5
- tab.unfocusedHoverBorder#d9dee5
- tab.unfocusedHoverForeground#4a5a6a
- tab.unfocusedInactiveBackground#edf1f5
- tab.unfocusedInactiveForeground#8a949e
- tab.unfocusedInactiveModifiedBorder#8b6f2e55
- terminal.ansiBlack#4a4a4a
- terminal.ansiBlue#2f6d86
- terminal.ansiBrightBlack#9b9fa5
- terminal.ansiBrightBlue#6391a4
- terminal.ansiBrightCyan#6f87ab
- terminal.ansiBrightGreen#3d8a4a
- terminal.ansiBrightMagenta#9b7b9f
- terminal.ansiBrightRed#c42c2c
- terminal.ansiBrightWhite#5f6369
- terminal.ansiBrightYellow#a89362
- terminal.ansiCyan#3f5f8f
- terminal.ansiGreen#4b7d53
- terminal.ansiMagenta#7a4f7f
- terminal.ansiRed#b03e34
- terminal.ansiWhite#2a2f37
- terminal.ansiYellow#8b6f2e
- terminal.background#eaedf1
- terminal.border#d9dee5
- terminal.dropBackground#4b6b7d22
- terminal.findMatchBackground#4b6b7d55
- terminal.findMatchBorder#4b6b7d
- terminal.findMatchHighlightBackground#4b6b7d33
- terminal.findMatchHighlightBorder#4b6b7d88
- terminal.foreground#2a2f37
- terminal.hoverHighlightBackground#4b6b7d18
- terminal.inactiveSelectionBackground#4b6b7d44
- terminal.initialHintForeground#8f98a3
- terminal.selectionBackground#4b6b7d80
- terminal.selectionForeground#2a2f37
- terminal.tab.activeBorder#4b6b7d
- terminalCommandGuide.foreground#8f98a3
- terminalCursor.background#2a2f37
- terminalCursor.foreground#2a2f37
- terminalOverviewRuler.border#d9dee5
- terminalOverviewRuler.cursorForeground#2a2f37
- terminalOverviewRuler.findMatchForeground#8b6f2e
- terminalStickyScroll.background#f3f4f6
- terminalStickyScroll.border#d9dee5
- terminalStickyScrollHover.background#eaedf1
- textLink.foreground#4b6b7d
- titleBar.activeBackground#e9ebef
- titleBar.activeForeground#2a2f37
- titleBar.border#d9dee5
- titleBar.inactiveBackground#e9ebef
- titleBar.inactiveForeground#8f98a3
- widget.shadow#00000020
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #6a6f7a | italic |
| keyword, storage.type, storage.modifier, keyword.control, keyword.operator | #7a4f7f | — |
| string, string.quoted, string.template | #4b7d53 | — |
| constant.numeric, constant.character, constant.language, support.constant | #7a5f22 | — |
| string.regexp, constant.character.escape | #3f5f8f | — |
| invalid, invalid.illegal | #b03e34 | — |
| punctuation, meta.brace, meta.bracket, meta.delimiter, keyword.other.template, keyword.other.substitution | #2a2f37 | — |
| entity.name.function, entity.name.method, meta.function-call, support.function | #2f6d86 | bold |
| variable, variable.other.readwrite, string constant.other.placeholder | #2a2f37 | — |
| variable.parameter, meta.parameter | #556c82 | — |
| entity.name.type, entity.name.class, support.type, support.class, support.type.sys-types | #8b6f2e | bold |
| entity.name.type.interface, support.type.interface | #556c82 | — |
| entity.name.type.enum, variable.other.enummember, constant.other.enummember | #a08f52 | — |
| variable.other.property, variable.other.object.property, support.variable.property, meta.property.object, meta.object-literal.key, meta.member | #3f5f8f | — |
| tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.decorator, meta.attribute, entity.name.attribute, entity.name.function.decorator, variable.function.decorator | #2f6d86 | italic |
| variable.language, variable.language.this, variable.language.super, variable.language.self, constant.language.null, constant.language.undefined | #b03e34 | italic |
| source.ts entity.name.function, source.tsx entity.name.function, source.js entity.name.function, source.jsx entity.name.function, source.ts entity.name.method, source.tsx entity.name.method, source.js entity.name.method, source.jsx entity.name.method | #2f6d86 | — |
| source.ts variable.parameter, source.tsx variable.parameter, source.js variable.parameter, source.jsx variable.parameter | #556c82 | — |
| source.ts variable.other.property, source.ts meta.object-literal.key, source.js variable.other.property, source.js meta.object-literal.key, support.variable.property.js, support.variable.property.ts | #3f5f8f | — |
| source.ts entity.name.type, source.ts entity.name.class, source.tsx entity.name.type, source.tsx entity.name.class, source.ts entity.name.type.interface, source.tsx entity.name.type.interface, source.ts entity.name.type.enum, source.tsx entity.name.type.enum | #8b6f2e | — |
| source.ts entity.name.type.interface, source.tsx entity.name.type.interface | #556c82 | — |
| source.ts keyword.other.type-alias, source.tsx keyword.other.type-alias | #8b6f2e | italic |
| source.ts meta.type.annotation, source.tsx meta.type.annotation, source.ts storage.type, source.tsx storage.type | #8b6f2e | — |
| entity.name.tag.tsx, entity.name.tag.jsx, meta.tag.tsx, meta.tag.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx | #b03e34 | — |
| source.ts variable.function, source.tsx variable.function, source.js variable.function, source.jsx variable.function | #3f6d86 | — |
| source.ts meta.decorator, source.tsx meta.decorator | #2f6d86 | italic |
| source.python entity.name.function, source.python meta.function-call, source.python support.function | #2f6d86 | — |
| source.python variable.parameter.function, source.python variable.parameter | #556c82 | — |
| source.python entity.name.class, source.python support.type, source.python support.class | #8b6f2e | — |
| source.python support.function.builtin, source.python support.type.builtin, constant.language.python | #7a5f22 | — |
| source.python variable.language.self | #b03e34 | italic |
| source.cs entity.name.method, source.cs meta.method-call, source.cs support.function | #2f6d86 | — |
| source.cs variable.parameter, source.cs meta.parameter | #556c82 | — |
| source.cs variable.parameter.primary-constructor | #e9c28a | — |
| source.cs entity.name.type, source.cs entity.name.class, source.cs entity.name.struct, source.cs entity.name.interface, source.cs entity.name.enum, source.cs support.type, source.cs support.class | #8b6f2e | — |
| source.cs entity.name.namespace, source.cs support.namespace | #2f6d86 | — |
| source.cs meta.attribute, source.cs entity.name.attribute | #2f6d86 | italic |
| source.cs keyword.other.access-modifier | #724f7f | — |
| source.cs keyword.other.record | #824f7f | — |
| source.cs keyword.other.async | #7a4f7f | italic |
| source.cs storage.modifier.static | #7a4f7f | bold |
| source.cs keyword.other.linq | #7a4f7f | underline |
| source.cs keyword.other.pattern | #7a4f7f | bold |
| source.cs keyword, source.cs storage.type, source.cs storage.modifier | #7a4f7f | — |
| source.json support.type.property-name.json | #3f6d86 | |
| source.json string.quoted.double.json | #4b7d53 | — |
| entity.name.tag.yaml, meta.mapping.key.yaml | #2f6d86 | |
| string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.yaml | #4b7d53 | — |
| constant.numeric.yaml | #9a7f42 | — |
| constant.language.boolean.yaml | #b03e34 | — |
| entity.name.tag.yaml, variable.other.alias.yaml | #7a4f7f | — |
| comment.line.yaml | #6a6f7a | italic |
| meta.embedded.expression, meta.embedded.expression.yaml, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin.yaml, punctuation.section.embedded.end.yaml | #3f5f8f | |
| variable.other.template.yaml, meta.template.expression.yaml, entity.name.function.template.yaml, support.function.template.yaml | #2f6d86 | |
| markup.heading, markdown.heading, markup.heading.markdown punctuation.definition.heading.markdown | #4b7d53 | — |
| string.other.link.title.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown | #4b6b7d | — |
| source.dockerfile entity.name.instruction, source.dockerfile keyword.other, source.dockerfile keyword.control | #8b6f2e | bold |
| source.dockerfile variable.parameter, source.dockerfile variable.other | #3f5f8f | — |
| source.dockerfile comment, source.dockerfile punctuation.definition.comment | #6a6f7a | italic |
| meta.mapping.key.yaml, entity.name.tag.yaml, support.type.property-name.yaml | #2f6d86 | |
| meta.preprocessor.cs, keyword.control.directive.cs, punctuation.definition.preprocessor.cs | #6a6f7a | italic |
| keyword.other.export, storage.modifier.export | #7a4f7f | bold |
| variable.other.property.readonly, meta.property.readonly, storage.modifier.readonly | #7a5f22 |