Urban Twilight Teal Theme
Publisher: tpsTechThemes in package: 1
A modern VS Code theme inspired by Tokyo Night, featuring teal accents, balanced contrast for all-day usability, and vibrant syntax highlighting.
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#3f3f46
- activityBar.foreground#f4f4f5
- activityBar.inactiveForeground#f4f4f566
- activityBarBadge.background#0d9488
- activityBarBadge.foreground#f4f4f5
- badge.background#0d9488
- badge.foreground#f4f4f5
- breadcrumb.activeSelectionForeground#f4f4f5
- breadcrumb.background#27272a
- breadcrumb.focusForeground#f4f4f5
- breadcrumb.foreground#e4e4e7
- button.background#0d9488
- button.foreground#e4e4e7
- button.hoverBackground#0d9488
- button.secondaryBackground#71717a
- button.secondaryForeground#e4e4e7
- button.secondaryHoverBackground#525252
- checkbox.background#71717a
- checkbox.foreground#f4f4f5
- debugExceptionWidget.background#27272a
- debugExceptionWidget.border#115e59
- debugToolBar.background#71717a
- debugToolBar.border#0d9488
- diffEditor.border#52525b
- diffEditor.insertedLineBackground#10b98111
- diffEditor.insertedTextBackground#10b98144
- diffEditor.insertedTextBackgroundDarker#10b98122
- diffEditor.insertedTextBackgroundFallback#10b98111
- diffEditor.insertedTextBackgroundLighter#10b98144
- diffEditor.removedLineBackground#f8717111
- diffEditor.removedTextBackground#f8717144
- diffEditor.removedTextBackgroundDarker#f8717122
- diffEditor.removedTextBackgroundFallback#f8717111
- diffEditor.removedTextBackgroundLighter#f8717144
- dropdown.background#71717a
- dropdown.foreground#f4f4f5
- editor.background#333338
- editor.findMatchBackground#71717a
- editor.findMatchBorder#0d9488
- editor.findMatchHighlightBackground#68b3de22
- editor.findRangeHighlightBackground#e4e4e711
- editor.foldBackground#0d948822
- editor.foreground#e4e4e7
- editor.hoverHighlightBackground#e4e4e711
- editor.inactiveSelectionBackground#e4e4e700
- editor.lineHighlightBackground#3f3f46
- editor.lineHighlightBorder#0d9488
- editor.rangeHighlightBackground#e4e4e711
- editor.selectionBackground#0d948888
- editor.selectionHighlightBackground#0d948833
- editorBracketHighlight.foreground1#698cd6
- editorBracketHighlight.foreground2#68b3de
- editorBracketHighlight.foreground3#9a7ecc
- editorBracketHighlight.foreground4#25aac2
- editorBracketHighlight.foreground5#80a856
- editorBracketHighlight.foreground6#FDD835
- editorBracketHighlight.unexpectedBracket.foreground#db4b4b
- editorBracketMatch.background#f4f4f522
- editorBracketMatch.border#0d9488
- editorBracketPairGuide.activeBackground1#698cd6
- editorBracketPairGuide.activeBackground2#68b3de
- editorBracketPairGuide.activeBackground3#9a7ecc
- editorBracketPairGuide.activeBackground4#25aac2
- editorBracketPairGuide.activeBackground5#80a856
- editorBracketPairGuide.activeBackground6#FDD835
- editorCodeLens.foreground#f4f4f5
- editorCursor.background#000000
- editorCursor.foreground#e4e4e7
- editorError.background#f8717111
- editorError.foreground#f87171
- editorGroup.border#52525b
- editorGroup.emptyBackground#27272a
- editorGroupHeader.border#115e59
- editorGroupHeader.tabsBackground#3f3f46
- editorGroupHeader.tabsBorder#27272a
- editorGutter.addedBackground#10b981
- editorGutter.background#27272a
- editorGutter.commentRangeForeground#e4e4e7
- editorGutter.deletedBackground#f87171
- editorGutter.foldingControlForeground#e4e4e7
- editorGutter.modifiedBackground#fde68a
- editorHint.border#e2c08d
- editorHint.foreground#3b82f6
- editorHoverWidget.background#37474F
- editorHoverWidget.border#0d9488
- editorHoverWidget.foreground#e4e4e7
- editorInfo.foreground#60a5fa
- editorLineNumber.activeForeground#e4e4e7
- editorLineNumber.foreground#71717a
- editorLink.activeForeground#0d9488
- editorMarkerNavigation.background#27272a
- editorMarkerNavigationError.background#f87171
- editorMarkerNavigationInfo.background#60a5fa
- editorMarkerNavigationWarning.background#fde68a
- editorOverviewRuler.background#27272a
- editorOverviewRuler.border#115e59
- editorRuler.foreground#3f3f3f
- editorSuggestWidget.background#37474F
- editorSuggestWidget.border#0d9488
- editorSuggestWidget.foreground#e4e4e7
- editorSuggestWidget.highlightForeground#0d9488
- editorSuggestWidget.selectedBackground#115e59
- editorWarning.background#fde68a11
- editorWarning.foreground#fde68a
- editorWhitespace.foreground#525252
- editorWidget.background#37474F
- editorWidget.foreground#e4e4e7
- editorWidget.resizeBorder#0d9488
- focusBorder#0d948855
- foreground#e4e4e7
- gitDecoration.addedResourceForeground#10b981
- gitDecoration.conflictingResourceForeground#6c6cc4
- gitDecoration.deletedResourceForeground#f87171
- gitDecoration.ignoredResourceForeground#8c8c8c
- gitDecoration.modifiedResourceForeground#e2c08d
- gitDecoration.stageDeletedResourceForeground#f87171
- gitDecoration.stageModifiedResourceForeground#e2c08d
- gitDecoration.submoduleResourceForeground#8db9e2
- gitDecoration.untrackedResourceForeground#10b981
- icon.foreground#e4e4e7
- input.background#71717a
- input.foreground#f4f4f5
- input.placeholderForeground#71717a
- inputOption.activeBackground#115e59
- inputOption.activeForeground#f4f4f5
- list.activeSelectionBackground#3f3f46
- list.activeSelectionForeground#f4f4f5
- list.focusBackground#607d8b66
- list.focusForeground#e4e4e7
- list.hoverBackground#71717a11
- list.hoverForeground#f4f4f5
- listFilterWidget.background#27272a
- listFilterWidget.noMatchesOutline#f87171
- menu.background#27272a
- menu.border#52525b66
- menu.foreground#e4e4e7
- menu.selectionBackground#a1a1aa
- menu.selectionForeground#f4f4f5
- menu.separatorBackground#52525b
- menubar.selectionBackground#3f3f46
- menubar.selectionForeground#f4f4f5
- merge.commonContentBackground#27272a00
- merge.commonHeaderBackground#3f3f4600
- merge.currentContentBackground#0d948833
- merge.currentHeaderBackground#115e5933
- merge.incomingContentBackground#455a6433
- merge.incomingHeaderBackground#607d8b33
- minimap.background#27272a
- minimap.errorHighlight#f87171
- minimap.findMatchHighlight#27272a55
- minimap.selectionHighlight#115e5955
- minimap.warningHighlight#fde68a
- minimapGutter.addedBackground#10b981
- minimapGutter.deletedBackground#f87171
- minimapGutter.modifiedBackground#fde68a
- notificationCenter.border#474747
- notificationCenterHeader.background#37474F
- notificationCenterHeader.foreground#e4e4e7
- notifications.background#37474F
- notifications.border#0d9488
- notifications.foreground#e4e4e7
- notificationsErrorIcon.foreground#f87171
- notificationsInfoIcon.foreground#38bdf8
- notificationsWarningIcon.foreground#fde68a
- notificationToast.border#0d9488
- panel.background#27272a
- panel.border#52525b
- panelSection.border#52525b
- panelTitle.activeBorder#0d9488
- panelTitle.activeForeground#ccfbf1
- panelTitle.inactiveForeground#e4e4e7
- peekView.border#0d9488
- peekViewEditor.background#37474F
- peekViewEditor.matchHighlightBackground#f4f4f522
- peekViewEditor.matchHighlightBorder#0d948833
- peekViewEditorGutter.background#0d948833
- peekViewResult.background#37474F
- peekViewResult.fileForeground#e4e4e7
- peekViewResult.lineForeground#f4f4f5
- peekViewResult.matchHighlightBackground#0d948833
- peekViewResult.selectionBackground#0d948833
- peekViewResult.selectionForeground#f4f4f5
- peekViewTitle.background#263238
- peekViewTitleDescription.foreground#e4e4e7
- peekViewTitleLabel.foreground#f4f4f5
- pickerGroup.border#0d9488
- pickerGroup.foreground#115e59
- progressBar.background#0d9488
- scrollbarSlider.activeBackground#52525b
- scrollbarSlider.background#3f3f46
- scrollbarSlider.hoverBackground#71717a
- selection.background#0d948888
- settings.focusedRowBackground#f4f4f522
- settings.headerForeground#e4e4e7
- sideBar.background#27272a
- sideBar.border#71717a
- sideBar.dropBackground#3f3f46
- sideBar.foreground#e4e4e7
- sideBarSectionHeader.background#3f3f46
- sideBarSectionHeader.border#71717a
- sideBarSectionHeader.foreground#f4f4f5
- sideBarTitle.foreground#f4f4f5
- statusBar.background#0d9488
- statusBar.debuggingBackground#fed7aa
- statusBar.debuggingForeground#3f3f46
- statusBar.foreground#f4f4f5
- statusBar.noFolderBackground#fecaca
- statusBar.noFolderForeground#3f3f46
- statusBarItem.activeBackground#FFFFFF22
- statusBarItem.hoverBackground#3f3f46
- statusBarItem.remoteBackground#0d9488
- statusBarItem.remoteForeground#f4f4f5
- tab.activeBackground#52525b
- tab.activeBorder#0d9488
- tab.activeBorderTop#0d9488
- tab.activeForeground#0d9488
- tab.border#27272a
- tab.hoverBackground#52525b
- tab.hoverForeground#ccfbf1
- tab.inactiveBackground#27272a
- tab.inactiveForeground#e4e4e7
- terminal.ansiBlack#363b54
- terminal.ansiBlue#7aa2f7
- terminal.ansiBrightBlack#363b54
- terminal.ansiBrightBlue#7aa2f7
- terminal.ansiBrightCyan#7dcfff
- terminal.ansiBrightGreen#41a6b5
- terminal.ansiBrightMagenta#bb9af7
- terminal.ansiBrightRed#f7768e
- terminal.ansiBrightWhite#acb0d0
- terminal.ansiBrightYellow#e0af68
- terminal.ansiCyan#7dcfff
- terminal.ansiGreen#41a6b5
- terminal.ansiMagenta#bb9af7
- terminal.ansiRed#f7768e
- terminal.ansiWhite#787c99
- terminal.ansiYellow#e0af68
- terminal.border#52525b
- terminal.foreground#e4e4e7
- terminal.selectionBackground#3f3f46
- terminalCursor.background#27272a
- terminalCursor.foreground#f4f4f5
- textLink.activeForeground#ccfbf1
- textLink.foreground#0d9488
- titleBar.activeBackground#3f3f46
- titleBar.activeForeground#e4e4e7
- titleBar.inactiveBackground#3f3f4699
- titleBar.inactiveForeground#e4e4e799
- tree.indentGuidesStroke#f4f4f566
- walkThrough.embeddedEditorBackground#27272a
- widget.shadow#455a64
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| accent.xi | #60a5fa | — |
| entity.other.attribute-name.id, entity.other.attribute-name.class.css | #60a5fa | |
| entity.other.attribute-name | #ffedd5 | — |
| beginning.punctuation.definition.list.markdown | #7dd3fc | — |
| block.scope.end,block.scope.begin | #f4f4f5 | — |
| punctuation.definition.bold, markup.bold, todo.bold | #fde68a | — |
| function.brace | #f4f4f5 | — |
| invalid.broken | #f4f4f5 | — |
| entity.name.class, variable.other.class, entity.name.type.class, entity.name.type.namespace, support.class | #fde68a | — |
| comment.line.double-slash,comment.block.documentation | — | italic |
| comment markup.link | #a8a29e | — |
| beginning.punctuation.definition.list.markdown.xi | #a8a29e | — |
| comment, punctuation.definition.comment | #a8a29e | italic |
| constant.other.symbol | #c084fc | — |
| punctuation.definition.constant | #fde68a | — |
| control.elements | #fde68a | — |
| support.constant.color.w3c-standard-color-name.css | #6ee7b7 | — |
| support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss | #6ee7b7 | — |
| punctuation.separator.list.comma.css | #f4f4f5 | — |
| support.type.vendored.property-name.css | #c084fc | — |
| keyword.operator.css, keyword.operator.scss, keyword.operator.less | #c084fc | — |
| markup.deleted.diff | #f87171 | — |
| invalid.deprecated | #f4f4f5 | — |
| meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff | #60a5fa | — |
| punctuation.definition.tag.xi | #525252 | — |
| punctuation.section.embedded, variable.interpolation | #7dd3fc | — |
| punctuation.section.embedded.begin,punctuation.section.embedded.end | #c084fc | italic |
| emphasis md | #c084fc | italic |
| constant.character.escape | #c084fc | — |
| support.constant.font-name | #fde68a | — |
| entity.name.function, meta.require, support.function.any-method, variable.function | #60a5fa | — |
| entity.name.function.xi | #fde68a | — |
| entity.name.class.xi | #c084fc | — |
| constant.character.character-class.regexp.xi | #7dd3fc | — |
| constant.regexp.xi | #7dd3fc | italic |
| keyword.control.xi | #c695c6 | — |
| invalid.xi | #f4f4f5 | — |
| markup.heading | #7dd3fc | — |
| markup.heading punctuation.definition.heading, entity.name.section | #60a5fa | — |
| constant.character.entity | #7dd3fc | — |
| invalid.illegal | #f4f4f5 | — |
| invalid.illegal.bad-ampersand.html | #f4f4f5 | — |
| entity.other.inherited-class | #fde68a | — |
| source.ini | #6ee7b7 | — |
| markup.inserted.diff | #6ee7b7 | — |
| constant.numeric | #FF8A65 | — |
| meta.property.object | #7dd3fc | — |
| support.type.type.flowtype | #fdba74 | — |
| variable.parameter.function | #7dd3fc | — |
| keyword.other.template.begin, keyword.other.template.end | #6ee7b7 | — |
| keyword.other.substitution.begin, keyword.other.substitution.end | #fde68a | — |
| support.type.object.console | #7dd3fc | — |
| entity.name.function,support.function.console | #60a5fa | — |
| punctuation.definition.block.tag.jsdoc | #7dd3fc | — |
| variable.type.dollar, support.class.dollar | #5fb4b4 | bold |
| support.variable.dom,support.variable.property.dom | #7dd3fc | — |
| keyword.control.flow, storage.modifier.async, constant.language.boolean.false, constant.language.boolean.true, variable.language.this, variable.language.super, constant.language.null, constant.language.undefined | #F7768E | italic bold |
| support.constant.json | #fde68a | — |
| token.storage, storage, keyword, keyword.control, keyword.operator, keyword.operator.new, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.void, keyword.operator.expression.keyof, keyword.operator.expression.import, keyword.operator.less, keyword.operator.module, keyword.operator.assignment, keyword.operator.assignment.compound, keyword.operator.expression.instanceof, keyword.operator.ternary, keyword.operator.optional, keyword.operator.logical, keyword.operator.channel, keyword.operator.bitwise, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.delete, support.type.object.dom | #c084fc | italic |
| support.module.node, support.type.object.module, support.module.node | #fde68a | — |
| function.parameter | #f4f4f5 | — |
| punctuation.separator.key-value | #f4f4f5 | — |
| support.variable.property.process | #fde68a | — |
| variable.other.property | #9FA8DA | — |
| variable.other.readwrite, variable.other.readonly, support.class.component | #ccfbf1 | — |
| variable.other.constant | #fde68a | — |
| meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node | #7dd3fc | — |
| support.type.property-name.json | #7dd3fc | — |
| support.type.property-name.json punctuation | #7dd3fc | — |
| constant.other.color.rgb-value.xi | #f4f4f5 | — |
| constant.character.xi | #60a5fa | — |
| punctuation.definition.heading.markdown | #7dd3fc | — |
| markup.heading.setext | #f4f4f5 | — |
| entity.name.section.markdown | #7dd3fc | — |
| markup.inline.raw.markdown | #6ee7b7 | — |
| markup.inline.raw.string.markdown | #6ee7b7 | — |
| string.other.link.title.markdown,string.other.link.description.markdown | #60a5fa | — |
| punctuation.definition.list.markdown | #7dd3fc | — |
| punctuation.definition.bold.markdown | #fde68a | — |
| punctuation.definition.metadata.markdown | #7dd3fc | — |
| punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown | #7dd3fc | — |
| markup.quote.markdown | #a8a29e | — |
| markup.underline.link.markdown,markup.underline.link.image.markdown | #c084fc | italic |
| entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #7dd3fc | — |
| markup.changed.diff | #fde68a | — |
| markup.italic, punctuation.definition.italic,todo.emphasis | #c084fc | italic |
| markup.italic.markdown | — | italic |
| support.constant.math, support.constant.property.math | #fde68a | — |
| meta.tag | #f4f4f5 | — |
| meta.brace.square | #f4f4f5 | — |
| keyword.other.special-method | #60a5fa | — |
| entity.name.namespace | #fde68a | — |
| token.package.keyword | #c084fc | italic |
| token.package | #f4f4f5 | — |
| support.type.property-name | #7dd3fc | — |
| support.constant.property-value | #fde68a | — |
| punctuation.separator.delimiter | #f4f4f5 | — |
| punctuation.definition.string.begin,punctuation.definition.string.end | #6ee7b7 | — |
| punctuation.definition.list.begin.markdown | #7dd3fc | — |
| constant.other.character-class.regexp | #7dd3fc | — |
| keyword.operator.quantifier.regexp | #fde68a | — |
| string.regexp | #f472b6 | — |
| meta.template.expression | #f4f4f5 | — |
| inline-color-decoration rgb-value | #fde68a | — |
| less rgb-value | #fde68a | — |
| rgb-value | #c084fc | — |
| selector.sass | #7dd3fc | — |
| meta.selector | #c084fc | italic |
| source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json | #c084fc | — |
| source.json meta.structure.dictionary.json > string.quoted.json | #7dd3fc | — |
| source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string | #7dd3fc | — |
| source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation | #6ee7b7 | — |
| beginning.punctuation.definition.quote.markdown.xi | #6ee7b7 | — |
| punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded | #A1887F | — |
| string | #6ee7b7 | — |
| entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class | #c084fc | — |
| support.function | #60a5fa | — |
| support.constant.property-value.scss, support.constant.property-value.css | #c084fc | — |
| entity.name.tag | #fda4af | bold |
| punctuation.quasi.element | #c084fc | italic |
| variable.parameter.function | #f4f4f5 | — |
| token.debug-token | #c084fc | — |
| token error | #f87171 | — |
| token.info-token | #60a5fa | — |
| token.warn-token | #fde68a | — |
| entity.name.type, support.type.primitive, support.type.builtin, entity.name.class.identifier.namespace.type | #fdba74 | italic |
| invalid.unimplemented | #f4f4f5 | — |
| keyword.other.unit | #7dd3fc | — |
| variable | #7dd3fc | — |
| wikiword.xi | #fde68a | — |