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#d6b56f
- activityBar.activeFocusBorder#d6b56f
- activityBar.background#2b2f33
- activityBar.border#3a3e42
- activityBar.foreground#908a82
- activityBar.inactiveForeground#605850
- activityBarBadge.background#9a8f7a
- activityBarBadge.foreground#ffffff
- badge.background#9a8f7a
- badge.foreground#e3e0dc
- breadcrumb.activeSelectionForeground#e3e0dc
- breadcrumb.background#2f3336
- breadcrumb.focusForeground#e3e0dc
- breadcrumb.foreground#c1bbb2
- breadcrumbPicker.background#2c3033f0
- descriptionForeground#b9b2a7
- diffEditor.insertedTextBackground#95ad6355
- diffEditor.removedTextBackground#ce6f6555
- disabledForeground#807a72
- dropdown.background#2c3033f0
- dropdown.border#3a3e42
- editor.background#2f3336
- editor.findMatchBackground#9a8f7a55
- editor.findMatchBorder#9a8f7a
- editor.findMatchForeground#e3e0dc
- editor.findMatchHighlightBackground#9a8f7a30
- editor.findMatchHighlightBorder#9a8f7a88
- editor.findMatchHighlightForeground#e3e0dc
- editor.findRangeHighlightBackground#ffffff10
- editor.findRangeHighlightBorder#9a8f7a44
- editor.foldBackground#ffffff08
- editor.foldPlaceholderForeground#605850
- editor.foreground#e3e0dc
- editor.hoverHighlightBackground#9a8f7a22
- editor.inactiveLineHighlightBackground#353a3e
- editor.lineHighlightBackground#3c4146
- editor.lineHighlightBorder#3c414655
- editor.linkedEditingBackground#9a8f7a15
- editor.rangeHighlightBackground#9a8f7a22
- editor.rangeHighlightBorder#9a8f7a44
- editor.selectionBackground#6a6472
- editor.selectionForeground#ffffff
- editor.selectionHighlightBackground#6a647255
- editor.selectionHighlightBorder#9a8f7a55
- editor.symbolHighlightBackground#9a8f7a22
- editor.symbolHighlightBorder#9a8f7a44
- editor.wordHighlightBackground#ffffff1a
- editor.wordHighlightBorder#ffffff10
- editor.wordHighlightStrongBackground#ffffff30
- editor.wordHighlightStrongBorder#ffffff15
- editorBracketHighlight.foreground1#8fa0a0
- editorBracketHighlight.foreground2#95ad63
- editorBracketHighlight.foreground3#d6b56f
- editorBracketHighlight.foreground4#a6789f
- editorBracketHighlight.foreground5#c7d4e2
- editorBracketHighlight.foreground6#ce6f65
- editorBracketMatch.background#9a8f7a22
- editorBracketMatch.border#9a8f7a
- editorBracketMatch.foreground#e3e0dc
- editorBracketPairGuide.activeBackground1#8fa0a040
- editorBracketPairGuide.activeBackground2#95ad6340
- editorBracketPairGuide.activeBackground3#d6b56f40
- editorBracketPairGuide.activeBackground4#a6789f40
- editorBracketPairGuide.activeBackground5#c7d4e240
- editorBracketPairGuide.activeBackground6#ce6f6540
- editorBracketPairGuide.background1#8fa0a020
- editorBracketPairGuide.background2#95ad6320
- editorBracketPairGuide.background3#d6b56f20
- editorBracketPairGuide.background4#a6789f20
- editorBracketPairGuide.background5#c7d4e220
- editorBracketPairGuide.background6#ce6f6520
- editorCodeLens.foreground#706860
- editorGroup.border#3a3e42
- editorGroup.dropBackground#9a8f7a22
- editorGroup.emptyBackground#2f3336
- editorGroup.focusedEmptyBorder#9a8f7a
- editorGroupHeader.border#3a3e42
- editorGroupHeader.tabsBackground#2b2f32
- editorGroupHeader.tabsBorder#3a3e42
- editorGutter.addedBackground#95ad63
- editorGutter.addedSecondaryBackground#95ad6366
- editorGutter.background#2f3336
- editorGutter.deletedBackground#ce6f65
- editorGutter.deletedSecondaryBackground#ce6f6566
- editorGutter.modifiedBackground#d6b56f
- editorGutter.modifiedSecondaryBackground#d6b56f66
- editorIndentGuide.activeBackground#504840
- editorIndentGuide.background#3a3e42
- editorInlayHint.background#00000033
- editorInlayHint.foreground#e7e1d8
- editorInlayHint.parameterBackground#00000033
- editorInlayHint.parameterForeground#f0eae1
- editorInlayHint.typeBackground#00000033
- editorInlayHint.typeForeground#e7e1d8
- editorLightBulb.foreground#d6b56f
- editorLightBulbAi.foreground#9a8f7a
- editorLightBulbAutoFix.foreground#95ad63
- editorLineNumber.activeForeground#d6b56f
- editorLineNumber.foreground#a19a91
- editorLink.activeForeground#95ad63
- editorOverviewRuler.background#2f3336
- editorOverviewRuler.border#3a3e42
- editorPane.background#313538
- editorRuler.foreground#878078
- editorStickyScroll.background#2f3336
- editorStickyScroll.border#3a3e42
- editorStickyScrollHover.background#33373b
- editorSuggestWidget.background#2a2e31f0
- editorSuggestWidget.border#3a3e42
- editorSuggestWidget.foreground#e3e0dc
- editorSuggestWidget.highlightForeground#9a8f7a
- editorSuggestWidget.selectedBackground#33373b
- editorSuggestWidget.selectedForeground#ffffff
- editorSuggestWidget.selectedIconForeground#ffffff
- editorUnicodeHighlight.background#d6b56f15
- editorUnicodeHighlight.border#d6b56f
- editorUnnecessaryCode.border#ce6f6555
- editorUnnecessaryCode.opacity0.5
- editorWhitespace.foreground#908a82
- editorWidget.background#33373bdd
- editorWidget.border#9a8f7a
- editorWidget.foreground#e3e0dc
- editorWidget.resizeBorder#9a8f7a
- errorForeground#ce6f65
- focusBorder#9a8f7a
- gitDecoration.conflictingResourceForeground#a6789f
- gitDecoration.deletedResourceForeground#ce6f65
- gitDecoration.ignoredResourceForeground#908a82
- gitDecoration.modifiedResourceForeground#d6b56f
- gitDecoration.untrackedResourceForeground#95ad63
- icon.foreground#b9b2a7
- input.background#33373b
- input.border#9a8f7a
- input.foreground#e3e0dc
- input.placeholderForeground#706860
- list.activeSelectionBackground#33373b
- list.activeSelectionForeground#ffffff
- list.activeSelectionIconForeground#ffffff
- list.deemphasizedForeground#706860
- list.dropBackground#9a8f7a22
- list.filterMatchBackground#9a8f7a33
- list.filterMatchBorder#9a8f7a66
- list.focusAndSelectionOutline#d6b56f
- list.focusBackground#9a8f7a
- list.focusForeground#ffffff
- list.focusHighlightForeground#e3e0dc
- list.focusOutline#d6b56f
- list.highlightForeground#cfa776
- list.hoverBackground#33373b
- list.inactiveSelectionBackground#2f3336
- list.inactiveSelectionForeground#e3e0dc
- list.inactiveSelectionIconForeground#e3e0dc
- menu.background#2c3033f0
- menu.border#3a3e42
- menu.foreground#e3e0dc
- menu.selectionBackground#33373b
- menu.selectionBorder#9a8f7a44
- menu.selectionForeground#ffffff
- menu.separatorBackground#3a3e42
- minimap.background#2a2e32
- minimap.findMatchHighlight#d6b56faa
- minimap.selectionHighlight#9a8f7a80
- minimapGutter.addedBackground#95ad63
- minimapGutter.deletedBackground#ce6f65
- minimapGutter.modifiedBackground#d6b56f
- notificationCenter.border#3a3e42
- notificationLink.foreground#cfa776
- notifications.background#2c3033f0
- notifications.border#3a3e42
- notifications.foreground#e3e0dc
- notificationToast.border#3a3e42
- panel.background#2c3033
- panel.border#3a3e42
- panel.dropBorder#3a3e42
- panelInput.border#3a3e42
- panelSection.border#3a3e42
- panelSectionHeader.border#3a3e42
- panelSectionHeader.foreground#e3e0dc
- panelTitle.activeBorder#9a8f7a
- panelTitle.activeForeground#e3e0dc
- panelTitle.border#3a3e42
- panelTitle.inactiveForeground#878078
- peekView.border#9a8f7a
- peekViewEditor.background#30353af5
- peekViewEditor.matchHighlightBackground#9a8f7a30
- peekViewResult.background#2c3033
- peekViewResult.matchHighlightBackground#9a8f7a30
- peekViewResult.selectionBackground#33373b
- peekViewTitle.background#2d3135e6
- peekViewTitleDescription.foreground#b9b2a7
- peekViewTitleLabel.foreground#e3e0dc
- pickerGroup.foreground#cfa776
- progressBar.background#d6b56f
- quickInput.background#2c3033f0
- quickInput.foreground#e3e0dc
- quickInputList.focusBackground#33373b
- sash.hoverBorder#9a8f7a
- scrollbar.shadow#3b404540
- scrollbarSlider.activeBackground#9a8f7a
- scrollbarSlider.background#5a5248
- scrollbarSlider.hoverBackground#6a6050
- selection.background#9a8f7a33
- sideBar.background#2b2f33
- sideBar.border#3a3e42
- sideBar.dropBackground#9a8f7a20
- sideBar.foreground#b9b2a7
- sideBarSectionHeader.background#34393d
- sideBarSectionHeader.border#3a3e42
- sideBarSectionHeader.foreground#b9b2a7
- sideBarTitle.background#2f3336
- sideBarTitle.border#3a3e42
- sideBarTitle.foreground#e3e0dc
- sideBySideEditor.horizontalBorder#3a3e42
- sideBySideEditor.verticalBorder#3a3e42
- statusBar.background#2a2e31
- statusBar.border#3a3e42
- statusBar.debuggingBackground#9a8f7a
- statusBar.debuggingBorder#9a8f7a
- statusBar.debuggingForeground#2a2e31
- statusBar.foreground#e3e0dc
- statusBar.noFolderBackground#2a2e31
- statusBar.noFolderBorder#3a3e42
- statusBar.noFolderForeground#ffffff
- statusBarItem.activeBackground#3c4146
- statusBarItem.activeForeground#ffffff
- statusBarItem.errorBackground#3c2828
- statusBarItem.errorForeground#ce6f65
- statusBarItem.errorHoverBackground#3c2828
- statusBarItem.errorHoverForeground#ce6f65
- statusBarItem.focusBorder#d6b56f
- statusBarItem.hoverBackground#3c4146
- statusBarItem.hoverForeground#ffffff
- statusBarItem.prominentBackground#3a3e42
- statusBarItem.prominentForeground#d6b56f
- statusBarItem.prominentHoverBackground#3c4146
- statusBarItem.prominentHoverForeground#d6b56f
- statusBarItem.remoteBackground#2d3135
- statusBarItem.remoteForeground#8fa0a0
- statusBarItem.remoteHoverBackground#33393d
- statusBarItem.remoteHoverForeground#8fa0a0
- statusBarItem.warningBackground#3c3428
- statusBarItem.warningForeground#d6b56f
- statusBarItem.warningHoverBackground#3c3428
- statusBarItem.warningHoverForeground#d6b56f
- tab.activeBackground#2f3336
- tab.activeBorder#9a8f7a
- tab.activeBorderTop#9a8f7a
- tab.activeForeground#e3e0dc
- tab.activeModifiedBorder#d6b56f
- tab.border#3a3e42
- tab.dragAndDropBorder#9a8f7a
- tab.hoverBackground#2f3336
- tab.hoverBorder#3a3e42
- tab.hoverForeground#e3e0dc
- tab.inactiveBackground#293034
- tab.inactiveForeground#c1bbb2
- tab.inactiveModifiedBorder#d6b56f88
- tab.lastPinnedBorder#3a3e42
- tab.selectedBackground#2f3336
- tab.selectedForeground#e3e0dc
- tab.unfocusedActiveBackground#2b2f32
- tab.unfocusedActiveBorder#7a7160
- tab.unfocusedActiveForeground#807a72
- tab.unfocusedActiveModifiedBorder#d6b56f88
- tab.unfocusedHoverBackground#2f3336
- tab.unfocusedHoverBorder#3a3e42
- tab.unfocusedHoverForeground#b9b2a7
- tab.unfocusedInactiveBackground#293034
- tab.unfocusedInactiveForeground#605850
- tab.unfocusedInactiveModifiedBorder#d6b56f55
- terminal.ansiBlack#151515
- terminal.ansiBlue#8fa0a0
- terminal.ansiBrightBlack#908a82
- terminal.ansiBrightBlue#8fa0a0
- terminal.ansiBrightCyan#c7d4e2
- terminal.ansiBrightGreen#a8c070
- terminal.ansiBrightMagenta#a6789f
- terminal.ansiBrightRed#e07a70
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#d6b56f
- terminal.ansiCyan#c7d4e2
- terminal.ansiGreen#95ad63
- terminal.ansiMagenta#a6789f
- terminal.ansiRed#ce6f65
- terminal.ansiWhite#e3e0dc
- terminal.ansiYellow#d6b56f
- terminal.background#33373b
- terminal.border#3a3e42
- terminal.dropBackground#9a8f7a22
- terminal.findMatchBackground#9a8f7a66
- terminal.findMatchBorder#9a8f7a
- terminal.findMatchHighlightBackground#9a8f7a33
- terminal.findMatchHighlightBorder#9a8f7a88
- terminal.foreground#e3e0dc
- terminal.hoverHighlightBackground#9a8f7a22
- terminal.inactiveSelectionBackground#9a8f7a55
- terminal.initialHintForeground#706860
- terminal.selectionBackground#9a8f7aa0
- terminal.selectionForeground#e3e0dc
- terminal.tab.activeBorder#9a8f7a
- terminalCommandGuide.foreground#706860
- terminalCursor.background#e3e0dc
- terminalCursor.foreground#e3e0dc
- terminalOverviewRuler.border#3a3e42
- terminalOverviewRuler.cursorForeground#e3e0dc
- terminalOverviewRuler.findMatchForeground#d6b56f
- terminalStickyScroll.background#2f3336
- terminalStickyScroll.border#3a3e42
- terminalStickyScrollHover.background#33373b
- textLink.foreground#cfa776
- titleBar.activeBackground#2a2e31
- titleBar.activeForeground#e3e0dc
- titleBar.border#3a3e42
- titleBar.inactiveBackground#2a2e31
- titleBar.inactiveForeground#807a72
- widget.shadow#00000040
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #908a82 | italic |
| keyword, storage.type, storage.modifier, keyword.control, keyword.operator | #c48573 | — |
| string, string.quoted, string.template | #95ad63 | — |
| constant.numeric, constant.character, constant.language, support.constant | #a08550 | — |
| string.regexp, constant.character.escape | #c7d4e2 | — |
| invalid, invalid.illegal | #ce6f65 | — |
| punctuation, meta.brace, meta.bracket, meta.delimiter, keyword.other.template, keyword.other.substitution | #e3e0dc | — |
| entity.name.function, entity.name.method, meta.function-call, support.function | #e0a46a | bold |
| variable, variable.other.readwrite, string constant.other.placeholder | #e3e0dc | — |
| variable.parameter, meta.parameter | #c2cdda | — |
| entity.name.type, entity.name.class, support.type, support.class, support.type.sys-types | #d6b56f | bold |
| entity.name.type.interface, support.type.interface | #c2cdda | — |
| entity.name.type.enum, variable.other.enummember, constant.other.enummember | #e8b860 | — |
| variable.other.property, variable.other.object.property, support.variable.property, meta.property.object, meta.object-literal.key, meta.member | #c7d4e2 | — |
| 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 | #d6b56f | italic |
| variable.language, variable.language.this, variable.language.super, variable.language.self, constant.language.null, constant.language.undefined | #ce6f65 | 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 | #e0a46a | — |
| source.ts variable.parameter, source.tsx variable.parameter, source.js variable.parameter, source.jsx variable.parameter | #c2cdda | — |
| 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 | #c7d4e2 | — |
| 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 | #d6b56f | — |
| source.ts entity.name.type.interface, source.tsx entity.name.type.interface | #c2cdda | — |
| source.ts keyword.other.type-alias, source.tsx keyword.other.type-alias | #d6b56f | italic |
| source.ts meta.type.annotation, source.tsx meta.type.annotation, source.ts storage.type, source.tsx storage.type | #d6b56f | — |
| entity.name.tag.tsx, entity.name.tag.jsx, meta.tag.tsx, meta.tag.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.jsx | #ce6f65 | — |
| source.ts variable.function, source.tsx variable.function, source.js variable.function, source.jsx variable.function | #e0a46a | — |
| source.ts meta.decorator, source.tsx meta.decorator | #d6b56f | italic |
| source.python entity.name.function, source.python meta.function-call, source.python support.function | #e0a46a | — |
| source.python variable.parameter.function, source.python variable.parameter | #c2cdda | — |
| source.python entity.name.class, source.python support.type, source.python support.class | #d6b56f | — |
| source.python support.function.builtin, source.python support.type.builtin, constant.language.python | #e2c48f | — |
| source.python variable.language.self | #ce6f65 | italic |
| source.cs entity.name.method, source.cs meta.method-call, source.cs support.function | #e0a46a | — |
| source.cs variable.parameter, source.cs meta.parameter | #c2cdda | — |
| 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 | #d6b56f | — |
| source.cs entity.name.namespace, source.cs support.namespace | #bda980 | — |
| source.cs meta.attribute, source.cs entity.name.attribute | #d6b56f | italic |
| source.cs keyword.other.access-modifier | #c07e6d | — |
| source.cs keyword.other.record | #c98573 | — |
| source.cs keyword.other.async | #c48573 | italic |
| source.cs storage.modifier.static | #c48573 | bold |
| source.cs keyword.other.linq | #c48573 | underline |
| source.cs keyword.other.pattern | #c48573 | bold |
| source.cs keyword, source.cs storage.type, source.cs storage.modifier | #c48573 | — |
| source.json support.type.property-name.json | #c7d4e2 | |
| source.json string.quoted.double.json | #95ad63 | — |
| entity.name.tag.yaml, meta.mapping.key.yaml | #c7d4e2 | |
| string.quoted.single.yaml, string.quoted.double.yaml, string.unquoted.plain.yaml | #95ad63 | — |
| constant.numeric.yaml | #e6c491 | — |
| constant.language.boolean.yaml | #ce6f65 | — |
| entity.name.tag.yaml, variable.other.alias.yaml | #c48573 | — |
| comment.line.yaml | #908a82 | 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 | #c7d4e2 | |
| variable.other.template.yaml, meta.template.expression.yaml, entity.name.function.template.yaml, support.function.template.yaml | #e0a46a | |
| markup.heading, markdown.heading, markup.heading.markdown punctuation.definition.heading.markdown | #95ad63 | — |
| string.other.link.title.markdown, string.other.link.description.title.markdown, constant.other.reference.link.markdown | #cfa776 | — |
| source.dockerfile entity.name.instruction, source.dockerfile keyword.other, source.dockerfile keyword.control | #d6b56f | bold |
| source.dockerfile variable.parameter, source.dockerfile variable.other | #c7d4e2 | — |
| source.dockerfile comment, source.dockerfile punctuation.definition.comment | #908a82 | italic |
| meta.mapping.key.yaml, entity.name.tag.yaml, support.type.property-name.yaml | #c7d4e2 | |
| meta.preprocessor.cs, keyword.control.directive.cs, punctuation.definition.preprocessor.cs | #908a82 | italic |
| keyword.other.export, storage.modifier.export | #c48573 | bold |
| variable.other.property.readonly, meta.property.readonly, storage.modifier.readonly | #e2c48f |