Urban Glow
Publisher: RanfurlyThemes in package: 1
A vibrant, city lights colour palette for code and UI.
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.activeBackground#2c332c
- activityBar.activeBorder#87b084
- activityBar.activeFocusBorder#87b084
- activityBar.background#1b1c1c
- activityBar.foreground#c7c7c7
- activityBar.inactiveForeground#929292
- activityBarBadge.background#2e3238cc
- activityBarBadge.foreground#e6e6e6
- badge.background#686cbc50
- badge.foreground#c7c7c7
- breadcrumb.activeSelectionForeground#ff8b47
- breadcrumb.background#000000
- breadcrumb.focusForeground#c7c7c7
- breadcrumb.foreground#929292
- breadcrumbPicker.background#0f0e0e
- button.background#ff8b47
- button.foreground#000000
- button.hoverBackground#febd98
- button.secondaryBackground#929292
- button.secondaryForeground#000000
- button.secondaryHoverBackground#c7c7c7
- commandCenter.background#0f0e0e
- commandCenter.border#30afae
- commandCenter.foreground#c7c7c7
- debugConsole.errorForeground#f0727d
- debugConsole.infoForeground#73A264
- debugConsole.sourceForeground#c7c7c7
- debugConsole.warningForeground#ffc64c
- debugToolBar.background#1b1c1c
- diffEditor.insertedTextBackground#a3ce9e40
- diffEditor.removedTextBackground#ee6a6f40
- dropdown.background#0f0e0e
- dropdown.border#30afae
- dropdown.foreground#c7c7c7
- dropdown.listBackground#343d46
- editor.background#000000
- editor.findMatchBackground#686cbc05
- editor.findMatchHighlightBackground#686cbc20
- editor.findRangeHighlightBackground#ff8b4720
- editor.foreground#dddddd
- editor.hoverHighlightBackground#cfebfd21
- editor.inactiveSelectionBackground#45674185
- editor.lineHighlightBackground#ffffff10
- editor.lineHighlightBorder#000
- editor.rangeHighlightBackground#cfebfd21
- editor.selectionBackground#324c2f
- editor.selectionHighlightBackground#45674160
- editor.selectionHighlightBorder#00000000
- editor.wordHighlightBackground#00000000
- editor.wordHighlightStrongBackground#45674105
- editorCursor.foreground#ff8b47
- editorError.border#00000000
- editorError.foreground#ee6a6f
- editorGroup.border#303841
- editorGroup.dropBackground#303841
- editorGroupHeader.noTabsBackground#303841
- editorGroupHeader.tabsBackground#0f0e0e
- editorGroupHeader.tabsBorder#434646
- editorGutter.addedBackground#a3ce9e
- editorGutter.background#000
- editorGutter.deletedBackground#ee6a6f
- editorGutter.modifiedBackground#ebcb8b
- editorHoverWidget.background#0f0e0e
- editorHoverWidget.border#73A264
- editorIndentGuide.activeBackground1#af75b2
- editorIndentGuide.background#cfebfd21
- editorIndentGuide.background1#454545
- editorInfo.foreground#a3ce9e
- editorLineNumber.activeForeground#ff8b47
- editorLineNumber.foreground#929292
- editorOverviewRuler.addedForeground#a3ce9e
- editorOverviewRuler.border#929292
- editorOverviewRuler.bracketMatchForeground#cfebfd3d
- editorOverviewRuler.currentContentForeground#cfebfd3d
- editorOverviewRuler.deletedForeground#ee6a6f
- editorOverviewRuler.errorForeground#ee6a6f
- editorOverviewRuler.findMatchForeground#cfebfd3d
- editorOverviewRuler.incomingContentForeground#cff4fd3d
- editorOverviewRuler.infoForeground#cfebfd3d
- editorOverviewRuler.modifiedForeground#ebcb8b
- editorOverviewRuler.rangeHighlightForeground#cfebfd3d
- editorOverviewRuler.selectionHighlightForeground#cfebfd3d
- editorOverviewRuler.warningForeground#ebcb8b
- editorOverviewRuler.wordHighlightForeground#cfebfd3d
- editorOverviewRuler.wordHighlightStrongForeground#cfebfd3d
- editorRuler.foreground#838383
- editorSuggestWidget.background#0f0e0e
- editorSuggestWidget.border#73A264
- editorSuggestWidget.foreground#c7c7c7
- editorSuggestWidget.highlightForeground#ff8b47
- editorSuggestWidget.selectedBackground#686cbc50
- editorWarning.border#00000000
- editorWarning.foreground#fab763
- editorWhitespace.foreground#454545
- editorWidget.background#1c1c1c
- editorWidget.border#73A264
- editorWidget.foreground#fff
- extensionButton.prominentBackground#ff8b47
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#333333
- focusBorder#cfebfd3d
- foreground#e6e6e6
- gitDecoration.conflictingResourceForeground#C695C6
- gitDecoration.deletedResourceForeground#f0727d
- gitDecoration.ignoredResourceForeground#838383
- gitDecoration.modifiedResourceForeground#ffc64c
- gitDecoration.submoduleResourceForeground#73A264
- gitDecoration.untrackedResourceForeground#8bc98f
- input.background#0f0e0e
- input.border#323232
- input.foreground#c7c7c7
- input.placeholderForeground#929292
- inputOption.activeBorder#ff8b47
- inputValidation.errorBorder#f0727d
- inputValidation.infoBorder#73A264
- inputValidation.warningBorder#ffc64c
- list.activeSelectionBackground#686cbc50
- list.activeSelectionForeground#c7c7c7
- list.dropBackground#cfebfd21
- list.errorForeground#ee6a6f
- list.focusBackground#ff8b4730
- list.focusForeground#e6e6e6
- list.highlightForeground#e6e6e6
- list.hoverBackground#686cbc20
- list.hoverForeground#e6e6e6
- list.inactiveSelectionBackground#686cbc50
- list.inactiveSelectionForeground#e6e6e6
- list.warningForeground#fab763
- menu.background#0f0e0e
- menu.foreground#c7c7c7
- menu.selectionBackground#686cbc50
- menu.selectionForeground#c7c7c7
- menu.separatorBackground#73A264
- merge.border#30afae
- merge.currentContentBackground#8bc98f20
- merge.currentHeaderBackground#8bc98f40
- merge.incomingContentBackground#73A26420
- merge.incomingHeaderBackground#73A26440
- minimap.background#000000
- minimap.selectionHighlight#687785
- minimapSlider.activeBackground#696c6f59
- minimapSlider.background#696c6f59
- minimapSlider.hoverBackground#696c6f59
- notificationCenter.border#73A264
- notificationCenterHeader.background#0f0e0e
- notificationCenterHeader.foreground#c7c7c7
- notifications.background#1b1c1c
- notifications.border#73A264
- notifications.foreground#c7c7c7
- panel.background#1b1c1c
- panel.border#73A264
- panelTitle.activeBorder#ff8b47
- panelTitle.activeForeground#c7c7c7
- panelTitle.inactiveForeground#929292
- peekView.border#73A264
- peekViewEditor.background#000000
- peekViewEditor.matchHighlightBackground#cfebfd3d
- peekViewEditorGutter.background#23292e
- peekViewResult.background#0f0e0e
- peekViewTitle.background#1b1c1c
- pickerGroup.border#6699cc
- pickerGroup.foreground#6699cc
- progressBar.background#ff8b47
- scrollbar.shadow#00000050
- scrollbarSlider.activeBackground#ff8b4760
- scrollbarSlider.background#92929240
- scrollbarSlider.hoverBackground#686cbc50
- selection.background#ffffff80
- settings.checkboxBackground#0f0e0e
- settings.checkboxBorder#73A264
- settings.checkboxForeground#c7c7c7
- settings.dropdownBackground#0f0e0e
- settings.dropdownBorder#73A264
- settings.dropdownForeground#c7c7c7
- settings.headerForeground#c7c7c7
- settings.modifiedItemIndicator#ff8b47
- settings.numberInputBackground#0f0e0e
- settings.numberInputBorder#73A264
- settings.numberInputForeground#c7c7c7
- settings.textInputBackground#0f0e0e
- settings.textInputBorder#30afae
- settings.textInputForeground#c7c7c7
- sideBar.background#0f0e0e
- sideBar.border#434646
- sideBar.foreground#dddddd
- sideBarSectionHeader.background#0f0e0e
- sideBarSectionHeader.border#30afae
- sideBarSectionHeader.foreground#c7c7c7
- sideBarTitle.foreground#c7c7c7
- statusBar.background#1b1c1c
- statusBar.border#434646
- statusBar.debuggingBackground#ff8b47
- statusBar.debuggingForeground#000000
- statusBar.foreground#929292
- statusBar.noFolderBackground#1b1c1c
- statusBar.noFolderForeground#e6e6e6
- statusBarItem.activeBackground#ff8b47
- statusBarItem.hoverBackground#333333
- statusBarItem.prominentBackground#ff8b47
- statusBarItem.prominentHoverBackground#333333
- tab.activeBackground#000000
- tab.activeBorder#1c1c1c
- tab.activeBorderTop#87b084
- tab.activeForeground#c7c7c7
- tab.activeModifiedBorder#ff8b47
- tab.border#434646
- tab.hoverBackground#00000050
- tab.inactiveBackground#0f0e0e
- tab.inactiveBorder#434646
- tab.inactiveForeground#929292
- tab.inactiveModifiedBorder#000000
- tab.unfocusedActiveBorder#303841
- tab.unfocusedActiveBorderTop#5e7f5d
- tab.unfocusedActiveForeground#ffffff70
- tab.unfocusedInactiveForeground#ffffff70
- terminal.ansiBlack#000000
- terminal.ansiBlue#559ad1
- terminal.ansiBrightBlack#838383
- terminal.ansiBrightBlue#559ad1
- terminal.ansiBrightCyan#30afae
- terminal.ansiBrightGreen#8bc98f
- terminal.ansiBrightMagenta#C695C6
- terminal.ansiBrightRed#f0727d
- terminal.ansiBrightWhite#c7c7c7
- terminal.ansiBrightYellow#ffc64c
- terminal.ansiCyan#30afae
- terminal.ansiGreen#8bc98f
- terminal.ansiMagenta#C695C6
- terminal.ansiRed#f0727d
- terminal.ansiWhite#c7c7c7
- terminal.ansiYellow#ffc64c
- terminal.background#000000
- terminal.foreground#c7c7c7
- terminal.selectionBackground#ffffff30
- terminalCursor.background#ffffff30
- terminalCursor.foreground#e6e6e6
- textLink.activeForeground#6699cc
- textLink.foreground#6699cc
- textPreformat.foreground#6699cc
- titleBar.activeBackground#1b1c1c
- titleBar.activeForeground#c7c7c7
- titleBar.inactiveBackground#1b1c1c
- titleBar.inactiveForeground#929292
- walkThrough.embeddedEditorBackground#000000
- welcomePage.background#000000
- widget.shadow#00000000
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.property-value.scss, punctuation.accessor, punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.comment, punctuation.definition.dictionary.begin.json, punctuation.definition.dictionary.end.json, punctuation.separator, punctuation.terminator | #A6ACB9 | — |
| markup.inserted, meta.attribute-selector.scss, punctuation.definition.string.begin.html, punctuation.definition.string.begin.js, punctuation.definition.string.begin.php, punctuation.definition.string.begin.scss, punctuation.definition.string.begin.ts, punctuation.definition.string.begin.xml, punctuation.definition.string.end.html, punctuation.definition.string.end.js, punctuation.definition.string.end.php, punctuation.definition.string.end.scss, punctuation.definition.string.end.ts, punctuation.definition.string.end.xml, punctuation.definition.string.template.begin, punctuation.definition.string.template.end.js, punctuation.definition.string.template.end.ts, punctuation.definition.string.begin.json, punctuation.definition.string.end.json, string, support.type.property-name.json | #99C794 | — |
| entity.name.function, entity.name.tag.yaml, entity.other.inherited-class, keyword.operator.new.js, keyword.operator.new.ts, punctuation.definition, punctuation.definition.annotation, punctuation.definition.keyword.scss, support.class.dollar.only.js, variable.other.dollar.only.js, variable.other.object.dollar.only.js, variable.type.dollar.only.js | #5FB4B4 | — |
| constant.language, constant.numeric.line-number.match, entity.name.tag, entity.name.tag.html, entity.name.tag.reference.scss, keyword.operator.arithmetic.js, keyword.operator.arithmetic.php, keyword.operator.arithmetic.ts, keyword.operator.assignment.js, keyword.operator.assignment.php, keyword.operator.assignment.ts, keyword.operator.comparison.js, keyword.operator.comparison.php, keyword.operator.comparison.ts, keyword.operator.logical.js, keyword.operator.logical.not.silverstripe, keyword.operator.logical.php, keyword.operator.logical.silverstripe, keyword.operator.logical.ts, keyword.operator.relational.js, keyword.operator.relational.php, keyword.operator.relational.ts, keyword.other.important.scss, markup.deleted, markup.heading punctuation.definition.heading, markup.heading.1 punctuation.definition.heading, message.error, meta.entity.tag.liquid, storage, storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.js, storage.type.function.ts, storage.type.php, token.error-token, variable.language, variable.language.this.js, variable.member | #ff8891 | — |
| (text punctuation.definition.italic | text punctuation.definition.bold), constant.character, constant.other, entity.other.attribute-name, entity.other.attribute-name.pseudo-element.css, keyword, keyword.control, keyword.control.at-rule.include.scss, keyword.operator.word, keyword.other.use.php, meta.diff, meta.diff.header, meta.property-list.scss, punctuation.definition, storage.modifier.extends.php, storage.modifier.php, storage.type, storage.type.js, storage.type.ts, support.constant | #e8b8e8 | — |
| string.template.js meta.template.expression.js meta.embedded.line.js | #E6E6E6 | — |
| constant.language.boolean.false.js, constant.language.boolean.false.ts, constant.language.boolean.true.js, constant.language.boolean.true.ts, constant.language.null.js, constant.language.null.ts, constant.language.php, constant.language.undefined.js, constant.language.undefined.ts, constant.numeric, entity.name.silverstripe variable.silverstripe, keyword, keyword.control.import.include.ss, keyword.control.ss, keyword.operator, support.constant, variable.parameter.ss | #f6ac81 | — |
| markup.underline.link, meta.object-literal.key.js, string.other.link, support.class, support.function, support.macro, support.type, variable.annotation, variable.function | #6699CC | — |
| entity.name, entity.name.type.silverstripe, markup.list punctuation.definition.list_item, markup.quote punctuation.definition.blockquote, meta.import.js, meta.import.ts, punctuation.definition.thematic-break, support.class.php, support.other.namespace.php, support.type.property-name.css, support.type.property-name.media.css, token.warn-token, variable.language.liquid, variable.other.object.js, variable.other.object.ts, variable.parameter, variable.parameter.ts | #e8c268 | — |
| invalid | #FFFFFF70 | — |
| invalid.deprecated, source.yaml string.unquoted, support.type.property-name | #FFFFFFDD | — |
| markup.list.numbered.bullet | #A3CE9E | — |
| markup.changed | #EBCB8B | — |
| keyword.operator.class.php, keyword.operator.scss, keyword.operator.string.php, keyword.operator.ternary.js, keyword.operator.ternary.php, keyword.operator.ternary.ts, keyword.other.new.php, meta.brace.round.js, meta.brace.round.ts, meta.brace.square.js, meta.brace.square.ts, meta.entity.tag.case.liquid, meta.entity.tag.conditional.liquid, meta.entity.tag.render.liquid, meta.object.liquid, punctuation.definition.arguments.begin.bracket.round.php, punctuation.definition.arguments.end.bracket.round.php, punctuation.definition.attribute-selector.begin.bracket.square.scss, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.begin.bracket.curly.php, punctuation.definition.begin.bracket.round.scss, punctuation.definition.block.js, punctuation.definition.block.ts, punctuation.definition.end.bracket.curly.php, punctuation.definition.end.bracket.round.scss, punctuation.definition.entity.begin.bracket.square.css, punctuation.definition.entity.end.bracket.square.css, punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.media-query.begin.bracket.round.scss, punctuation.definition.media-query.end.bracket.round.scss, punctuation.definition.parameters.begin.bracket.round.php, punctuation.definition.parameters.begin.bracket.round.scss, punctuation.definition.parameters.begin.js, punctuation.definition.parameters.begin.ts, punctuation.definition.parameters.end.bracket.round.php, punctuation.definition.parameters.end.bracket.round.scss, punctuation.definition.parameters.end.js, punctuation.definition.parameters.end.ts, punctuation.definition.silverstripe, punctuation.definition.tag.begin.html, punctuation.definition.tag.begin.liquid, punctuation.definition.tag.end.html, punctuation.definition.tag.end.liquid, punctuation.definition.tag.xml, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.js, punctuation.definition.template-expression.end.ts, punctuation.definition.variable.php, punctuation.section.embedded.begin.php, punctuation.section.function.begin.bracket.round.css, punctuation.section.function.end.bracket.round.css, punctuation.section.function.scss, punctuation.section.property-list.begin.bracket.curly.scss, punctuation.section.property-list.end.bracket.curly.scss, punctuation.separator.key-value.scss, punctuation.terminator.statement.js, punctuation.terminator.statement.ts, storage.modifier.async, token.info-token, variable.silverstripe.brace | #729aa7 | — |
| token.debug-token | #B267E6 | — |
| entity.name.function.js, entity.name.function.php, entity.name.function.scss, entity.name.function.ts, entity.other.attribute-name.pseudo-class.css, keyword.silverstripe, meta.at-rule.function.scss, variable.other.member.liquid, variable.other.object.property.js, variable.other.object.property.ts, variable.other.property.js, variable.other.property.ts | #6ca8da | — |
| variable.parameter.js, entity.name.function.silverstripe, support.constant.property-value.css | #f0e6ba | — |
| comment, comment meta.silverstripe, punctuation.definition.comment | #888888 | — |
| meta.tag.xml, punctuation.section, variable.other.liquid, variable.scss | #dddddd | — |
| constant.language, entity.name.silverstripe variable.silverstripe, keyword.other.important.scss, markup.italic, storage.modifier.async, storage.type, storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.type.function.js, storage.type.function.ts, storage.type.php, support.constant, support.function, support.macro, variable.parameter.js, variable.language, variable.scss | — | italic |
| entity.other.inherited-class | — | italic underline |
| constant.language.boolean.false.js, constant.language.boolean.false.ts, constant.language.boolean.silverstripe, constant.language.boolean.true.js, constant.language.boolean.true.ts, constant.language.null.js, constant.language.null.ts, constant.language.php, constant.language.undefined.js, constant.language.undefined.ts, constant.numeric, entity.name.function.silverstripe, entity.name.tag, entity.other.inherited-class.php, keyword, keyword.control.import.include.ss, keyword.control.ss, meta.property-value.scss, punctuation.definition.silverstripe, storage.type, support.constant, support.function, support.type.property-name, variable.annotation, variable.function, variable.parameter, variable.parameter.ss, variable.parameter.ts, variable.silverstripe.brace | — | |
| markup.bold, markup.heading | — | bold |
| markup.italic markup.bold | markup.bold markup.italic | — | bold italic |