Tarn Theme
Publisher: harehareThemes in package: 2
A dark theme inspired by a high-altitude glacial lake — deep navy, steel blue, teal functions, and light azure strings.
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#0369a1
- activityBar.background#f8fafc
- activityBar.border#cbd5e1
- activityBar.foreground#475569
- activityBar.inactiveForeground#cbd5e1
- activityBarBadge.background#0369a1
- activityBarBadge.foreground#f8fafc
- badge.background#0369a1
- badge.foreground#ffffff
- breadcrumb.activeSelectionForeground#0369a1
- breadcrumb.focusForeground#0f172a
- breadcrumb.foreground#475569
- breadcrumbPicker.background#ffffff
- button.background#0369a1
- button.foreground#ffffff
- button.hoverBackground#075985
- button.secondaryBackground#e2e8f0
- button.secondaryForeground#0f172a
- button.secondaryHoverBackground#cbd5e1
- descriptionForeground#475569
- dropdown.background#ffffff
- dropdown.border#cbd5e1
- dropdown.foreground#0f172a
- editor.background#f8fafc
- editor.foreground#0f172a
- editor.inactiveSelectionBackground#bfdbfe66
- editor.lineHighlightBackground#f1f5f977
- editor.selectionBackground#bfdbfedd
- editor.wordHighlightBackground#bfdbfe66
- editor.wordHighlightStrongBackground#bfdbfeaa
- editorBracketMatch.background#e2e8f0
- editorBracketMatch.border#0369a1
- editorCursor.foreground#0369a1
- editorError.foreground#dc2626
- editorGroupHeader.tabsBackground#f1f5f9
- editorGroupHeader.tabsBorder#cbd5e1
- editorGutter.background#f8fafc
- editorHint.foreground#16a34a
- editorHoverWidget.background#ffffff
- editorHoverWidget.border#cbd5e1
- editorIndentGuide.activeBackground1#cbd5e1
- editorIndentGuide.background1#e2e8f0
- editorInfo.foreground#0369a1
- editorLineNumber.activeForeground#475569
- editorLineNumber.foreground#cbd5e1
- editorOverviewRuler.border#e2e8f0
- editorRuler.foreground#e2e8f0
- editorSuggestWidget.background#ffffff
- editorSuggestWidget.border#cbd5e1
- editorSuggestWidget.foreground#0f172a
- editorSuggestWidget.highlightForeground#0369a1
- editorSuggestWidget.selectedBackground#bfdbfe
- editorWarning.foreground#d97706
- editorWhitespace.foreground#e2e8f0
- editorWidget.background#ffffff
- editorWidget.border#cbd5e1
- editorWidget.foreground#0f172a
- errorForeground#dc2626
- focusBorder#0369a1
- foreground#0f172a
- gitDecoration.addedResourceForeground#16a34a
- gitDecoration.conflictingResourceForeground#d97706
- gitDecoration.deletedResourceForeground#dc2626
- gitDecoration.ignoredResourceForeground#94a3b8
- gitDecoration.modifiedResourceForeground#d97706
- gitDecoration.untrackedResourceForeground#0369a1
- input.background#ffffff
- input.border#cbd5e1
- input.foreground#0f172a
- input.placeholderForeground#94a3b8
- inputOption.activeBackground#bfdbfe
- inputOption.activeBorder#0369a1
- list.activeSelectionBackground#bfdbfe
- list.activeSelectionForeground#0f172a
- list.focusBackground#bfdbfe
- list.focusForeground#0f172a
- list.highlightForeground#0369a1
- list.hoverBackground#f1f5f9
- list.inactiveSelectionBackground#f1f5f9
- list.inactiveSelectionForeground#0f172a
- menu.background#f1f5f9
- menu.border#cbd5e1
- menu.foreground#0f172a
- menu.selectionBackground#bfdbfe
- menu.separatorBackground#cbd5e1
- menubar.selectionBackground#f1f5f9
- notificationLink.foreground#0369a1
- notifications.background#ffffff
- notifications.border#cbd5e1
- notifications.foreground#0f172a
- panel.background#f8fafc
- panel.border#cbd5e1
- panelTitle.activeBorder#0369a1
- panelTitle.activeForeground#0f172a
- panelTitle.inactiveForeground#475569
- peekView.border#0369a1
- peekViewEditor.background#f8fafc
- peekViewEditor.matchHighlightBackground#bfdbfeaa
- peekViewResult.background#ffffff
- peekViewResult.fileForeground#0f172a
- peekViewResult.lineForeground#475569
- peekViewResult.matchHighlightBackground#bfdbfeaa
- peekViewResult.selectionBackground#bfdbfedd
- peekViewResult.selectionForeground#0f172a
- peekViewTitle.background#f1f5f9
- peekViewTitleDescription.foreground#475569
- peekViewTitleLabel.foreground#0f172a
- pickerGroup.border#cbd5e1
- pickerGroup.foreground#0369a1
- progressBar.background#0369a1
- quickInput.background#ffffff
- quickInput.foreground#0f172a
- quickInputHighlightForeground#0369a1
- scrollbar.shadow#00000022
- scrollbarSlider.activeBackground#94a3b8
- scrollbarSlider.background#cbd5e166
- scrollbarSlider.hoverBackground#94a3b888
- selection.background#bfdbfe
- settings.checkboxBackground#ffffff
- settings.checkboxBorder#cbd5e1
- settings.dropdownBackground#ffffff
- settings.dropdownBorder#cbd5e1
- settings.headerForeground#0f172a
- settings.modifiedItemIndicator#0369a1
- settings.numberInputBackground#ffffff
- settings.numberInputBorder#cbd5e1
- settings.textInputBackground#ffffff
- settings.textInputBorder#cbd5e1
- sideBar.background#f8fafc
- sideBar.border#cbd5e1
- sideBar.foreground#0f172a
- sideBarSectionHeader.background#f1f5f9
- sideBarSectionHeader.border#cbd5e1
- sideBarSectionHeader.foreground#475569
- sideBarTitle.foreground#475569
- statusBar.background#f1f5f9
- statusBar.border#cbd5e1
- statusBar.debuggingBackground#bfdbfe
- statusBar.foreground#0f172a
- statusBar.noFolderBackground#f1f5f9
- statusBarItem.activeBackground#bfdbfe
- statusBarItem.hoverBackground#e2e8f0
- statusBarItem.remoteBackground#0369a1
- statusBarItem.remoteForeground#f8fafc
- tab.activeBackground#f1f5f9
- tab.activeBorderTop#0369a1
- tab.activeForeground#0f172a
- tab.border#cbd5e1
- tab.hoverBackground#f1f5f9
- tab.inactiveBackground#f8fafc
- tab.inactiveForeground#475569
- tab.unfocusedActiveBackground#f1f5f9
- tab.unfocusedActiveForeground#475569
- terminal.ansiBlack#334155
- terminal.ansiBlue#0369a1
- terminal.ansiBrightBlue#0ea5e9
- terminal.ansiBrightCyan#0ea5e9
- terminal.ansiBrightGreen#22c55e
- terminal.ansiBrightMagenta#a855f7
- terminal.ansiBrightRed#ef4444
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#f59e0b
- terminal.ansiCyan#0369a1
- terminal.ansiGreen#16a34a
- terminal.ansiMagenta#7c3aed
- terminal.ansiRed#dc2626
- terminal.ansiWhite#f8fafc
- terminal.ansiYellow#d97706
- terminal.background#f8fafc
- terminal.foreground#0f172a
- terminalCursor.foreground#0369a1
- titleBar.activeBackground#f1f5f9
- titleBar.activeForeground#0f172a
- titleBar.border#cbd5e1
- titleBar.inactiveBackground#f1f5f9
- titleBar.inactiveForeground#475569
- widget.shadow#00000022
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment | #64748b | italic |
| keyword, keyword.control, keyword.operator.new, keyword.other.using, storage.type, storage.modifier | #7c3aed | bold |
| keyword.operator, punctuation.operator | #475569 | — |
| string, string.quoted, string.template, string.interpolated | #047857 | — |
| constant.character.escape, string.escape | #155e75 | — |
| variable.interpolated, variable.other.interpolated, punctuation.definition.template-expression | #7c3aed | — |
| constant.numeric, constant.other.color, constant.other.unit | #c2410c | — |
| constant.language, constant.language.boolean, constant.language.null, constant.language.undefined | #075985 | — |
| entity.name.function, entity.name.function.call, support.function, meta.function-call entity.name.function | #0e7490 | — |
| variable.parameter, meta.parameters variable | #1e40af | italic |
| variable, variable.other, variable.other.readwrite, variable.declaration | #1e40af | — |
| entity.name.function.selector, variable.other.property, support.type.property-name, meta.property-name | #155e75 | — |
| constant.other.symbol | #075985 | — |
| entity.name.type, entity.name.class, support.type, support.class | #0369a1 | — |
| entity.name.type.annotation, support.type.primitive | #0369a1 | italic |
| delimiter, punctuation.separator, punctuation.terminator, punctuation.definition.block, punctuation.section | #475569 | — |
| delimiter.parenthesis, meta.brace, punctuation.definition.parameters, punctuation.definition.array | #475569 | — |
| entity.name.tag, meta.tag | #a21caf | — |
| entity.other.attribute-name | #0e7490 | — |
| markup.heading, entity.name.section, punctuation.definition.heading | #0369a1 | bold |
| markup.bold | #0f172a | bold |
| markup.italic | #0f172a | italic |
| markup.inline.raw, markup.raw.block | #047857 | — |
| markup.underline.link, string.other.link, meta.link | #0369a1 | — |
| markup.quote | #475569 | italic |
| punctuation.definition.list.begin.markdown | #0369a1 | — |
| invalid, invalid.deprecated | #dc2626 | — |