City Night
Publisher: jujiThemes in package: 4
A dark VS Code theme inspired by a city skyline at night.
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#080b13
- activityBar.border#2a3350
- activityBar.foreground#5fb8b0
- activityBar.inactiveForeground#4d5872
- activityBarBadge.background#0f5c66
- activityBarBadge.foreground#a8e8dc
- badge.background#7ad0ff
- badge.foreground#0b0f1a
- button.background#0f5c66
- button.foreground#a8e8dc
- button.hoverBackground#0a4048
- checkbox.background#111726
- checkbox.border#6b7590
- checkbox.foreground#5eeacc
- checkbox.selectBackground#111726
- checkbox.selectBorder#5eeacc
- descriptionForeground#8891a5
- diffEditor.insertedTextBackground#6fe3c422
- diffEditor.removedTextBackground#ff6b8122
- dropdown.background#111726
- dropdown.border#2a3350
- editor.background#0b0f1a
- editor.findMatchBackground#0f5c6655
- editor.findMatchHighlightBackground#0f5c6633
- editor.foreground#a8b2c4
- editor.inactiveSelectionBackground#2c3a5a55
- editor.lineHighlightBackground#141a2a
- editor.selectionBackground#2c3a5a99
- editor.selectionHighlightBackground#2c3a5a55
- editor.wordHighlightBackground#2c3a5a44
- editorBracketHighlight.foreground1#0f5c66
- editorBracketHighlight.foreground2#7ad0ff
- editorBracketHighlight.foreground3#7de8d4
- editorBracketHighlight.foreground4#6fe3c4
- editorBracketHighlight.foreground5#5eeacc
- editorBracketHighlight.foreground6#4dd9e8
- editorBracketMatch.background#0f5c6622
- editorBracketMatch.border#0f5c6688
- editorCursor.foreground#5eeacc
- editorGroup.border#2a3350
- editorGroupHeader.border#2a3350
- editorGroupHeader.tabsBackground#0a0e18
- editorGroupHeader.tabsBorder#2a3350
- editorGutter.addedBackground#6fe3c4
- editorGutter.background#0b0f1a
- editorGutter.deletedBackground#ff6b81
- editorGutter.modifiedBackground#7ad0ff
- editorHoverWidget.background#111726
- editorHoverWidget.border#2a3350
- editorIndentGuide.activeBackground1#4a5578
- editorIndentGuide.background1#242c40
- editorLineNumber.activeForeground#5fb8b0
- editorLineNumber.foreground#3a4256
- editorRuler.foreground#242c40
- editorSuggestWidget.background#111726
- editorSuggestWidget.border#2a3350
- editorSuggestWidget.highlightForeground#0f5c66
- editorSuggestWidget.selectedBackground#2a3350
- editorWhitespace.foreground#232b3d
- editorWidget.background#111726
- editorWidget.border#2a3350
- errorForeground#ff6b81
- focusBorder#0f5c6666
- foreground#a8b2c4
- gitDecoration.addedResourceForeground#6fe3c4
- gitDecoration.deletedResourceForeground#ff6b81
- gitDecoration.ignoredResourceForeground#3a4256
- gitDecoration.modifiedResourceForeground#7ad0ff
- gitDecoration.untrackedResourceForeground#5eeacc
- input.background#111726
- input.border#2a3350
- input.foreground#c9d3e0
- input.placeholderForeground#3a4256
- list.activeSelectionBackground#2a3350
- list.activeSelectionForeground#5eeacc
- list.focusBackground#2a3350
- list.highlightForeground#0f5c66
- list.hoverBackground#141a2a
- list.inactiveSelectionBackground#141a2a
- panel.background#0a0e18
- panel.border#2a3350
- panelSection.border#2a3350
- panelSectionHeader.background#0a0e18
- panelTitle.activeBorder#0f5c66
- panelTitle.activeForeground#5eeacc
- panelTitle.inactiveForeground#6b7590
- pickerGroup.border#2a3350
- pickerGroup.foreground#7ad0ff
- progressBar.background#0f5c66
- quickInput.background#111726
- quickInput.foreground#c9d3e0
- quickInputList.focusBackground#2a3350
- quickInputList.focusForeground#5eeacc
- quickInputTitle.background#111726
- scrollbarSlider.activeBackground#2c3a5acc
- scrollbarSlider.background#1c233466
- scrollbarSlider.hoverBackground#2c3a5a99
- sideBar.background#0a0e18
- sideBar.border#2a3350
- sideBar.foreground#8891a5
- sideBarSectionHeader.background#0a0e18
- sideBarSectionHeader.border#2a3350
- sideBarTitle.foreground#c9d3e0
- statusBar.background#080b13
- statusBar.border#080b13
- statusBar.debuggingBackground#ff6b81
- statusBar.debuggingForeground#0b0f1a
- statusBar.foreground#8891a5
- statusBar.noFolderBackground#080b13
- tab.activeBackground#0b0f1a
- tab.activeBorderTop#0f5c66
- tab.activeForeground#5eeacc
- tab.border#080b13
- tab.inactiveBackground#0a0e18
- tab.inactiveForeground#6b7590
- terminal.ansiBlack#0b0f1a
- terminal.ansiBlue#7ad0ff
- terminal.ansiBrightBlack#3a4256
- terminal.ansiBrightBlue#9adcff
- terminal.ansiBrightCyan#8ff0d6
- terminal.ansiBrightGreen#8ff0d6
- terminal.ansiBrightMagenta#a8f0e2
- terminal.ansiBrightRed#7ae8f0
- terminal.ansiBrightWhite#ffffff
- terminal.ansiBrightYellow#8ff0dc
- terminal.ansiCyan#6fe3c4
- terminal.ansiGreen#6fe3c4
- terminal.ansiMagenta#7de8d4
- terminal.ansiRed#ff6b81
- terminal.ansiWhite#a8b2c4
- terminal.ansiYellow#5eeacc
- terminal.background#0a0e18
- terminal.foreground#a8b2c4
- titleBar.activeBackground#080b13
- titleBar.activeForeground#c9d3e0
- titleBar.border#2a3350
- titleBar.inactiveBackground#080b13
- titleBar.inactiveForeground#4d5872
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| — | #a8b2c4 | — |
| comment, punctuation.definition.comment | #4d5872 | italic |
| string, string.quoted, string.template | #d9b57a | — |
| constant.numeric, constant.language, constant.character, constant.other | #6fe3c4 | — |
| keyword, keyword.control, storage, storage.type, storage.modifier | #4dd9e8 | — |
| keyword.operator | #8a97b8 | — |
| entity.name.function, support.function, meta.function-call | #3ec9a3 | — |
| entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class | #6bacd4 | — |
| variable, variable.other | #a8b2c4 | — |
| variable.parameter | #7de8d4 | — |
| variable.other.property, meta.object-literal.key, entity.other.attribute-name | #9adcff | — |
| entity.name.tag | #4dd9e8 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator | #5c6788 | — |
| markup.heading | #3ec9a3 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.underline.link, string.other.link | #7ad0ff | — |
| invalid, invalid.illegal | #ff6b81 | underline |
| — | #a8b2c4 | — |
| comment, punctuation.definition.comment | #4d5872 | italic |
| string, string.quoted, string.template | #d9b57a | — |
| constant.numeric, constant.language, constant.character, constant.other | #6fe3c4 | — |
| keyword, keyword.control, storage, storage.type, storage.modifier | #4dd9e8 | — |
| keyword.operator | #8a97b8 | — |
| entity.name.function, support.function, meta.function-call | #3ec9a3 | — |
| entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class | #6bacd4 | — |
| variable, variable.other | #a8b2c4 | — |
| variable.parameter | #7de8d4 | — |
| variable.other.property, meta.object-literal.key, entity.other.attribute-name | #9adcff | — |
| entity.name.tag | #4dd9e8 | — |
| punctuation, meta.brace, punctuation.separator, punctuation.terminator | #5c6788 | — |
| markup.heading | #3ec9a3 | bold |
| markup.bold | — | bold |
| markup.italic | — | italic |
| markup.underline.link, string.other.link | #7ad0ff | — |
| invalid, invalid.illegal | #ff6b81 | underline |