wuthering waves color themes

Color themes

• 

  Wuthering Waves : Changli

• 

  Wuthering Waves : Changli (Dark)

• 

  Wuthering Waves : Chisa

• 

  Wuthering Waves : Chisa (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#141210
• activityBar.border#28221E
• activityBar.foreground#f8d7bd
• activityBar.inactiveForeground#8A7D78
• activityBarBadge.background#9f252c
• activityBarBadge.foreground#ffffff
• badge.background#9f252c
• badge.foreground#ffffff
• breadcrumb.activeSelectionForeground#f8d7bd
• breadcrumb.background#1A1816
• breadcrumb.focusForeground#F5F0EB
• breadcrumb.foreground#8A7D78
• breadcrumbPicker.background#1A1816
• button.background#9f252c
• button.border#f8d7bd60
• button.foreground#ffffff
• button.hoverBackground#B8353C
• button.secondaryBackground#342C28
• button.secondaryForeground#F5F0EB
• button.secondaryHoverBackground#443C38
• descriptionForeground#8A7D78
• dropdown.background#1A1816
• dropdown.border#443C38
• dropdown.foreground#F5F0EB
• dropdown.listBackground#141210
• editor.background#1A1816
• editor.findMatchBackground#f8d7bd60
• editor.findMatchBorder#f8d7bd
• editor.findMatchHighlightBackground#9f252c35
• editor.foreground#F5F0EB
• editor.inactiveSelectionBackground#342C2830
• editor.lineHighlightBackground#28221E
• editor.lineHighlightBorder#342C2800
• editor.rangeHighlightBackground#28221E80
• editor.selectionBackground#9f252c40
• editor.wordHighlightBackground#9f252c25
• editor.wordHighlightBorder#9f252c60
• editor.wordHighlightStrongBackground#9f252c45
• editor.wordHighlightStrongBorder#9f252c80
• editorBracketMatch.background#9f252c35
• editorBracketMatch.border#9f252c
• editorCursor.foreground#9f252c
• editorGroupHeader.tabsBackground#141210
• editorGroupHeader.tabsBorder#28221E
• editorGutter.addedBackground#70A070
• editorGutter.background#1A1816
• editorGutter.deletedBackground#9f252c
• editorGutter.modifiedBackground#C88850
• editorHoverWidget.background#1A1816
• editorHoverWidget.border#443C38
• editorHoverWidget.statusBarBackground#28221E
• editorIndentGuide.activeBackground1#645C58
• editorIndentGuide.background1#342C28
• editorLineNumber.activeForeground#f8d7bd
• editorLineNumber.foreground#544C48
• editorOverviewRuler.addedForeground#70A070
• editorOverviewRuler.border#28221E
• editorOverviewRuler.deletedForeground#9f252c
• editorOverviewRuler.errorForeground#C83540
• editorOverviewRuler.findMatchForeground#f8d7bd80
• editorOverviewRuler.modifiedForeground#C88850
• editorOverviewRuler.warningForeground#C88850
• editorRuler.foreground#342C28
• editorSuggestWidget.background#1A1816
• editorSuggestWidget.border#443C38
• editorSuggestWidget.focusHighlightForeground#9f252c
• editorSuggestWidget.foreground#F5F0EB
• editorSuggestWidget.highlightForeground#f8d7bd
• editorSuggestWidget.selectedBackground#342C28
• editorWidget.background#28221E
• editorWidget.border#443C38
• editorWidget.foreground#F5F0EB
• editorWidget.resizeBorder#9f252c
• errorForeground#C83540
• focusBorder#9f252c80
• gitDecoration.addedResourceForeground#80B080
• gitDecoration.conflictingResourceForeground#f8d7bd
• gitDecoration.deletedResourceForeground#C83540
• gitDecoration.ignoredResourceForeground#645C58
• gitDecoration.modifiedResourceForeground#C88850
• gitDecoration.stageDeletedResourceForeground#C83540
• gitDecoration.stageModifiedResourceForeground#C88850
• gitDecoration.submoduleResourceForeground#8898A8
• gitDecoration.untrackedResourceForeground#9f252c
• icon.foreground#f8d7bd
• input.background#141210
• input.border#443C38
• input.foreground#F5F0EB
• input.placeholderForeground#8A7D78
• inputOption.activeBackground#9f252c
• inputOption.activeBorder#f8d7bd
• inputOption.activeForeground#ffffff
• inputValidation.errorBackground#C8354020
• inputValidation.errorBorder#C83540
• inputValidation.infoBackground#f8d7bd20
• inputValidation.infoBorder#f8d7bd
• inputValidation.warningBackground#C8885020
• inputValidation.warningBorder#C88850
• list.activeSelectionBackground#9f252c
• list.activeSelectionForeground#ffffff
• list.activeSelectionIconForeground#ffffff
• list.focusBackground#342C28
• list.hoverBackground#28221E
• list.inactiveSelectionBackground#342C28
• list.inactiveSelectionForeground#D5CFC8
• minimap.background#1A1816
• minimap.errorHighlight#C83540
• minimap.findMatchHighlight#f8d7bd80
• minimap.selectionHighlight#9f252c50
• minimap.warningHighlight#C88850
• minimapGutter.addedBackground#80B080
• minimapGutter.deletedBackground#9f252c
• minimapGutter.modifiedBackground#C88850
• notificationCenter.border#443C38
• notificationCenterHeader.background#28221E
• notificationCenterHeader.foreground#F5F0EB
• notifications.background#28221E
• notifications.border#443C38
• notifications.foreground#F5F0EB
• notificationsErrorIcon.foreground#C83540
• notificationsInfoIcon.foreground#f8d7bd
• notificationsWarningIcon.foreground#C88850
• panel.background#141210
• panel.border#443C38
• panelTitle.activeBorder#9f252c
• panelTitle.activeForeground#F5F0EB
• panelTitle.inactiveForeground#8A7D78
• peekView.border#9f252c
• peekViewEditor.background#1A1816
• peekViewEditor.matchHighlightBackground#9f252c40
• peekViewEditorGutter.background#28221E
• peekViewResult.background#28221E
• peekViewResult.fileForeground#F5F0EB
• peekViewResult.lineForeground#D5CFC8
• peekViewResult.matchHighlightBackground#9f252c50
• peekViewResult.selectionBackground#9f252c35
• peekViewResult.selectionForeground#F5F0EB
• peekViewTitle.background#141210
• peekViewTitleDescription.foreground#8A7D78
• peekViewTitleLabel.foreground#f8d7bd
• progressBar.background#f8d7bd
• sash.hoverBorder#9f252c
• scrollbar.shadow#00000040
• scrollbarSlider.activeBackground#9f252c
• scrollbarSlider.background#645C5850
• scrollbarSlider.hoverBackground#645C5870
• selection.background#9f252c45
• sideBar.background#141210
• sideBar.foreground#D5CFC8
• sideBarSectionHeader.background#28221E
• sideBarSectionHeader.border#443C38
• sideBarSectionHeader.foreground#F5F0EB
• sideBarTitle.foreground#f8d7bd
• statusBar.background#9f252c
• statusBar.border#443C38
• statusBar.debuggingBackground#C83540
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#ffffff
• statusBar.noFolderBackground#28221E
• statusBar.noFolderForeground#F5F0EB
• tab.activeBackground#1A1816
• tab.activeBorder#9f252c
• tab.activeBorderTop#9f252c
• tab.activeForeground#f8d7bd
• tab.border#28221E
• tab.hoverBackground#1E1A18
• tab.hoverBorder#9f252c80
• tab.hoverForeground#f8d7bd
• tab.inactiveBackground#141210
• tab.inactiveForeground#8A7D78
• tab.unfocusedActiveForeground#D5CFC8
• terminal.ansiBlack#1A1816
• terminal.ansiBlue#8898A8
• terminal.ansiBrightBlack#645C58
• terminal.ansiBrightBlue#98A8B8
• terminal.ansiBrightCyan#8E8C98
• terminal.ansiBrightGreen#90C090
• terminal.ansiBrightMagenta#D89098
• terminal.ansiBrightRed#E84550
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#FFE8D0
• terminal.ansiCyan#6e6c78
• terminal.ansiGreen#80B080
• terminal.ansiMagenta#B87888
• terminal.ansiRed#C83540
• terminal.ansiWhite#F5F0EB
• terminal.ansiYellow#f8d7bd
• terminal.background#1A1816
• terminal.border#28221E
• terminal.foreground#F5F0EB
• textBlockQuote.background#28221E
• textBlockQuote.border#9f252c
• textCodeBlock.background#28221E
• textLink.activeForeground#FFE8D0
• textLink.foreground#f8d7bd
• textPreformat.foreground#C88850
• textSeparator.foreground#443C38
• titleBar.activeBackground#141210
• titleBar.activeForeground#F5F0EB
• titleBar.border#28221E
• titleBar.inactiveBackground#1A1816
• titleBar.inactiveForeground#8A7D78

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...