genshin impact & hsr color themes

Color themes

• 

  Genshin Impact - Columbina

• 

  Genshin Impact - Columbina (Dark)

• 

  Genshin Impact - Furina

• 

  Genshin Impact - Furina (Dark)

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#0a1520
• activityBar.foreground#d4e6f0
• activityBar.inactiveForeground#5a7090
• activityBarBadge.background#7dc5f0
• activityBarBadge.foreground#FFFFFF
• badge.background#7dc5f0
• badge.foreground#FFFFFF
• breadcrumb.activeSelectionForeground#7dc5f0
• breadcrumb.background#1a2535
• breadcrumb.focusForeground#d4e6f0
• breadcrumb.foreground#708090
• button.background#3a7fc4
• button.foreground#FFFFFF
• button.hoverBackground#5a95d4
• button.secondaryBackground#16255f
• button.secondaryForeground#d4e6f0
• button.secondaryHoverBackground#2a4f7f
• charts.blue#98b4e0
• charts.foreground#d4e6f0
• charts.green#70c8a8
• charts.lines#2a3a4880
• charts.orange#a8d0f0
• charts.purple#98b4e0
• charts.red#e886a8
• charts.yellow#d8b880
• checkbox.background#0a1520
• checkbox.border#2a3a4880
• checkbox.foreground#d4e6f0
• checkbox.selectBackground#3a7fc4
• checkbox.selectBorder#3a7fc4
• commandCenter.activeBackground#25374d
• commandCenter.activeBorder#3a7fc4
• commandCenter.activeForeground#7dc5f0
• commandCenter.background#1a2535
• commandCenter.border#25374d
• commandCenter.debuggingBackground#3a7fc420
• commandCenter.foreground#d4e6f0
• commandCenter.inactiveBorder#25374d80
• commandCenter.inactiveForeground#5a7090
• debugConsole.errorForeground#e886a8
• debugConsole.infoForeground#98b4e0
• debugConsole.sourceForeground#708090
• debugConsole.warningForeground#d8b880
• debugConsoleInputIcon.foreground#7dc5f0
• debugIcon.breakpointCurrentStackframeForeground#7dc5f0
• debugIcon.breakpointDisabledForeground#5a7090
• debugIcon.breakpointForeground#e886a8
• debugIcon.breakpointStackframeForeground#70c8a8
• debugIcon.breakpointUnverifiedForeground#d8b880
• debugIcon.continueForeground#70c8a8
• debugIcon.disconnectForeground#e886a8
• debugIcon.pauseForeground#d8b880
• debugIcon.restartForeground#70c8a8
• debugIcon.startForeground#70c8a8
• debugIcon.stepBackForeground#7dc5f0
• debugIcon.stepIntoForeground#7dc5f0
• debugIcon.stepOutForeground#7dc5f0
• debugIcon.stepOverForeground#7dc5f0
• debugIcon.stopForeground#e886a8
• debugTokenExpression.boolean#7dc5f0
• debugTokenExpression.error#e886a8
• debugTokenExpression.name#d4e6f0
• debugTokenExpression.number#98b4e0
• debugTokenExpression.string#a8c8d8
• debugTokenExpression.value#7dc5f0
• debugToolBar.background#1a2535
• debugToolBar.border#25374d
• debugView.exceptionLabelBackground#e887a0
• debugView.exceptionLabelForeground#FFFFFF
• debugView.stateLabelBackground#3a7fc4
• debugView.stateLabelForeground#FFFFFF
• debugView.valueChangedHighlight#7dc5f060
• descriptionForeground#708090
• diffEditor.diagonalFill#25374d40
• diffEditor.insertedLineBackground#70c8a815
• diffEditor.insertedTextBackground#70c8a820
• diffEditor.insertedTextBorder#70c8a800
• diffEditor.removedLineBackground#e887a015
• diffEditor.removedTextBackground#e887a020
• diffEditor.removedTextBorder#e887a000
• diffEditorGutter.insertedLineBackground#70c8a830
• diffEditorGutter.removedLineBackground#e887a030
• diffEditorOverview.insertedForeground#70c8a8
• diffEditorOverview.removedForeground#e887a0
• dropdown.background#0a1520
• dropdown.border#2a3a4880
• dropdown.foreground#d4e6f0
• dropdown.listBackground#1a2535
• editor.background#0f1823
• editor.findMatchBackground#7dc5f050
• editor.findMatchHighlightBackground#7dc5f025
• editor.focusedStackFrameHighlightBackground#70c8a830
• editor.foldBackground#3a7fc415
• editor.foreground#d4e6f0
• editor.lineHighlightBackground#15202d
• editor.lineHighlightBorder#2a3a4840
• editor.selectionBackground#5eb3e450
• editor.stackFrameHighlightBackground#d8b88030
• editor.wordHighlightBackground#3a7fc430
• editor.wordHighlightStrongBackground#5eb3e450
• editorBracketHighlight.foreground1#7dc5f0
• editorBracketHighlight.foreground2#e886a8
• editorBracketHighlight.foreground3#98b4e0
• editorBracketHighlight.foreground4#70c8a8
• editorBracketHighlight.foreground5#d8b880
• editorBracketHighlight.foreground6#98b4e0
• editorBracketHighlight.unexpectedBracket.foreground#e886a8
• editorBracketMatch.background#3a7fc440
• editorBracketMatch.border#3a7fc4
• editorCodeLens.foreground#5a7090
• editorCursor.foreground#7dc5f0
• editorError.border#e886a800
• editorError.foreground#e886a8
• editorGroup.border#25374d
• editorGroup.dropBackground#3a7fc430
• editorGroup.dropIntoPromptBackground#1a2535
• editorGroup.dropIntoPromptBorder#3a7fc4
• editorGroup.dropIntoPromptForeground#d4e6f0
• editorGroup.emptyBackground#1a2535
• editorGroup.focusedEmptyBorder#3a7fc4
• editorGroupHeader.tabsBackground#1a2535
• editorGutter.addedBackground#70c8a8
• editorGutter.deletedBackground#e887a0
• editorGutter.modifiedBackground#98b4e0
• editorHint.border#70c8a800
• editorHint.foreground#70c8a8
• editorHoverWidget.background#1a2535
• editorHoverWidget.border#2a3a4880
• editorIndentGuide.activeBackground1#3a7fc4
• editorIndentGuide.background1#2a3a4880
• editorInfo.border#98b4e000
• editorInfo.foreground#98b4e0
• editorInlayHint.background#25374d80
• editorInlayHint.foreground#849cb0
• editorInlayHint.parameterForeground#98b4e0
• editorInlayHint.typeForeground#7dc5f0
• editorLineNumber.activeForeground#7dc5f0
• editorLineNumber.foreground#5a7090
• editorOverviewRuler.addedForeground#70c8a8
• editorOverviewRuler.background#1a2535
• editorOverviewRuler.border#25374d
• editorOverviewRuler.bracketMatchForeground#3a7fc4
• editorOverviewRuler.commonContentForeground#708090
• editorOverviewRuler.currentContentForeground#70c8a8
• editorOverviewRuler.deletedForeground#e887a0
• editorOverviewRuler.errorForeground#e886a8
• editorOverviewRuler.findMatchForeground#7dc5f080
• editorOverviewRuler.incomingContentForeground#98b4e0
• editorOverviewRuler.infoForeground#98b4e0
• editorOverviewRuler.modifiedForeground#98b4e0
• editorOverviewRuler.rangeHighlightForeground#3a7fc440
• editorOverviewRuler.selectionHighlightForeground#5eb3e460
• editorOverviewRuler.warningForeground#d8b880
• editorOverviewRuler.wordHighlightForeground#5eb3e460
• editorOverviewRuler.wordHighlightStrongForeground#3a7fc480
• editorStickyScroll.background#1a2535
• editorStickyScrollHover.background#25374d
• editorSuggestWidget.background#1a2535
• editorSuggestWidget.foreground#d4e6f0
• editorSuggestWidget.highlightForeground#7dc5f0
• editorSuggestWidget.selectedBackground#3a7fc4
• editorWarning.border#d8b88000
• editorWarning.foreground#d8b880
• editorWhitespace.foreground#2a3a4860
• editorWidget.background#1a2535
• editorWidget.border#2a3a4880
• editorWidget.foreground#d4e6f0
• errorForeground#e886a8
• extensionBadge.remoteBackground#3a7fc4
• extensionBadge.remoteForeground#FFFFFF
• extensionButton.prominentBackground#3a7fc4
• extensionButton.prominentForeground#FFFFFF
• extensionButton.prominentHoverBackground#16255f
• extensionIcon.preReleaseForeground#7dc5f0
• extensionIcon.sponsorForeground#7dc5f0
• extensionIcon.starForeground#d8b880
• extensionIcon.verifiedForeground#70c8a8
• focusBorder#3a7fc4
• gitDecoration.addedResourceForeground#70c8a8
• gitDecoration.conflictingResourceForeground#e886a8
• gitDecoration.deletedResourceForeground#e886a8
• gitDecoration.ignoredResourceForeground#5a7090
• gitDecoration.modifiedResourceForeground#98b4e0
• gitDecoration.untrackedResourceForeground#d8b880
• icon.foreground#d4e6f0
• input.background#0a1520
• input.border#2a3a4880
• input.foreground#d4e6f0
• input.placeholderForeground#5a7090
• inputOption.activeBackground#3a7fc4
• inputOption.activeForeground#FFFFFF
• keybindingLabel.background#25374d
• keybindingLabel.border#25374d
• keybindingLabel.bottomBorder#5a7090
• keybindingLabel.foreground#d4e6f0
• list.activeSelectionBackground#3a7fc4
• list.activeSelectionForeground#FFFFFF
• list.activeSelectionIconForeground#FFFFFF
• list.focusBackground#5eb3e450
• list.focusForeground#d4e6f0
• list.hoverBackground#25374d
• list.hoverForeground#d4e6f0
• list.inactiveSelectionBackground#25374d80
• list.inactiveSelectionForeground#d4e6f0
• menu.background#0a1520
• menu.border#25374d
• menu.foreground#d4e6f0
• menu.selectionBackground#3a7fc4
• menu.selectionBorder#3a7fc400
• menu.selectionForeground#FFFFFF
• menu.separatorBackground#2a3a4880
• menubar.selectionBackground#25374d
• menubar.selectionForeground#d4e6f0
• merge.border#25374d
• merge.commonContentBackground#70809020
• merge.commonHeaderBackground#70809040
• merge.currentContentBackground#70c8a820
• merge.currentHeaderBackground#70c8a840
• merge.incomingContentBackground#98b4e020
• merge.incomingHeaderBackground#98b4e040
• mergeEditor.change.background#98b4e020
• mergeEditor.change.word.background#98b4e040
• mergeEditor.conflict.handledFocused.border#70c8a8
• mergeEditor.conflict.handledUnfocused.border#70c8a880
• mergeEditor.conflict.unhandledFocused.border#d8b880
• mergeEditor.conflict.unhandledUnfocused.border#d8b88080
• minimap.background#1a2535
• minimap.selectionHighlight#5eb3e460
• notifications.background#1a2535
• notifications.border#25374d
• notifications.foreground#d4e6f0
• notificationsErrorIcon.foreground#e886a8
• notificationsInfoIcon.foreground#98b4e0
• notificationsWarningIcon.foreground#d8b880
• panel.background#1a2535
• panel.border#25374d
• panelTitle.activeBorder#3a7fc4
• panelTitle.activeForeground#d4e6f0
• panelTitle.inactiveForeground#708090
• peekView.border#3a7fc4
• peekViewEditor.background#1a2535
• peekViewResult.background#1a2535
• peekViewResult.matchHighlightBackground#7dc5f050
• peekViewTitle.background#25374d
• peekViewTitleLabel.foreground#d4e6f0
• progressBar.background#3a7fc4
• quickInput.background#1a2535
• quickInput.foreground#d4e6f0
• quickInputList.focusBackground#3a7fc4
• quickInputList.focusForeground#FFFFFF
• quickInputList.focusIconForeground#FFFFFF
• quickInputTitle.background#25374d
• scrollbarSlider.activeBackground#3a7fc4
• scrollbarSlider.background#2a3a4880
• scrollbarSlider.hoverBackground#48404a
• selection.background#5eb3e460
• settings.checkboxBackground#0a1520
• settings.checkboxBorder#3a7fc4
• settings.checkboxForeground#d4e6f0
• settings.dropdownBackground#0a1520
• settings.dropdownBorder#25374d
• settings.dropdownForeground#d4e6f0
• settings.dropdownListBorder#25374d
• settings.focusedRowBackground#25374d40
• settings.focusedRowBorder#3a7fc480
• settings.headerForeground#d4e6f0
• settings.modifiedItemIndicator#3a7fc4
• settings.numberInputBackground#0a1520
• settings.numberInputBorder#3a7fc4
• settings.numberInputForeground#d4e6f0
• settings.rowHoverBackground#25374d20
• settings.sashBorder#25374d
• settings.textInputBackground#0a1520
• settings.textInputBorder#3a7fc4
• settings.textInputForeground#d4e6f0
• sideBar.background#1a2535
• sideBar.border#25374d
• sideBar.foreground#d4e6f0
• sideBarSectionHeader.background#25374d
• sideBarSectionHeader.foreground#d4e6f0
• sideBarTitle.foreground#7dc5f0
• statusBar.background#3a7fc4
• statusBar.debuggingBackground#16255f
• statusBar.debuggingForeground#FFFFFF
• statusBar.foreground#FFFFFF
• statusBar.noFolderBackground#0f1823
• statusBar.noFolderForeground#d4e6f0
• symbolIcon.arrayForeground#d4e6f0
• symbolIcon.booleanForeground#7dc5f0
• symbolIcon.classForeground#98b4e0
• symbolIcon.colorForeground#a8d0f0
• symbolIcon.constantForeground#98b4e0
• symbolIcon.constructorForeground#7dc5f0
• symbolIcon.enumeratorForeground#d8b880
• symbolIcon.enumeratorMemberForeground#98b4e0
• symbolIcon.eventForeground#d8b880
• symbolIcon.fieldForeground#98b4e0
• symbolIcon.fileForeground#708090
• symbolIcon.folderForeground#d8b880
• symbolIcon.functionForeground#7dc5f0
• symbolIcon.interfaceForeground#70c8a8
• symbolIcon.keyForeground#d4e6f0
• symbolIcon.keywordForeground#7dc5f0
• symbolIcon.methodForeground#7dc5f0
• symbolIcon.moduleForeground#98b4e0
• symbolIcon.namespaceForeground#98b4e0
• symbolIcon.nullForeground#e886a8
• symbolIcon.numberForeground#98b4e0
• symbolIcon.objectForeground#d4e6f0
• symbolIcon.operatorForeground#708090
• symbolIcon.packageForeground#98b4e0
• symbolIcon.propertyForeground#98b4e0
• symbolIcon.referenceForeground#98b4e0
• symbolIcon.snippetForeground#708090
• symbolIcon.stringForeground#a8c8d8
• symbolIcon.structForeground#d4e6f0
• symbolIcon.textForeground#d4e6f0
• symbolIcon.typeParameterForeground#70c8a8
• symbolIcon.unitForeground#98b4e0
• symbolIcon.variableForeground#98b4e0
• tab.activeBackground#0f1823
• tab.activeBorder#3a7fc4
• tab.activeForeground#7dc5f0
• tab.border#25374d
• tab.hoverBackground#25374d
• tab.hoverForeground#d4e6f0
• tab.inactiveBackground#1a2535
• tab.inactiveForeground#708090
• terminal.ansiBlack#25374d
• terminal.ansiBlue#98b4e0
• terminal.ansiBrightBlack#708090
• terminal.ansiBrightBlue#a8c0e8
• terminal.ansiBrightCyan#98d0e8
• terminal.ansiBrightGreen#90d8b8
• terminal.ansiBrightMagenta#a8d0f0
• terminal.ansiBrightRed#f0a8c0
• terminal.ansiBrightWhite#FFFFFF
• terminal.ansiBrightYellow#e8c898
• terminal.ansiCyan#7dc5f0
• terminal.ansiGreen#70c8a8
• terminal.ansiMagenta#7dc5f0
• terminal.ansiRed#e886a8
• terminal.ansiWhite#d4e6f0
• terminal.ansiYellow#d8b880
• terminal.background#0f1823
• terminal.foreground#d4e6f0
• testing.iconErrored#e887a0
• testing.iconFailed#e887a0
• testing.iconPassed#70c8a8
• testing.iconQueued#d8b880
• testing.iconSkipped#5a7090
• testing.iconUnset#5a7090
• testing.peekBorder#e887a0
• testing.peekHeaderBackground#e887a020
• testing.runAction#70c8a8
• textLink.activeForeground#a8d0f0
• textLink.foreground#7dc5f0
• titleBar.activeBackground#1a2535
• titleBar.activeForeground#d4e6f0
• titleBar.inactiveBackground#0f1823
• titleBar.inactiveForeground#5a7090
• walkThrough.embeddedEditorBackground#1a2535
• welcomePage.background#0f1823
• welcomePage.progress.background#25374d
• welcomePage.progress.foreground#3a7fc4
• welcomePage.tileBackground#1a2535
• welcomePage.tileBorder#25374d
• welcomePage.tileHoverBackground#25374d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).