Ssera Themes

Color themes

• 

  Botany

• 

  Cosmic Sea

• 

  Cyberpunk

• 

  Dracula

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#0d1b2a
• activityBar.foreground#4dd0e1
• activityBarBadge.background#26c6da
• activityBarBadge.foreground#0d1b2a
• badge.background#26c6da
• badge.foreground#0d1b2a
• button.background#4dd0e1
• button.foreground#0d1b2a
• button.hoverBackground#80e5ff
• debugToolBar.background#0d1b2a
• dropdown.background#1b2a3a
• dropdown.border#2c5f7e
• dropdown.foreground#4dd0e1
• editor.background#0f1a2e
• editor.findMatchBackground#4dd0e140
• editor.findMatchHighlightBackground#4dd0e120
• editor.foreground#b3e5fc
• editor.selectionBackground#2c5f7e60
• editor.selectionHighlightBackground#2c5f7e30
• editor.wordHighlightBackground#4dd0e120
• editor.wordHighlightStrongBackground#4dd0e130
• editorBracketMatch.background#2c5f7e40
• editorBracketMatch.border#4dd0e1
• editorCursor.foreground#ffab40
• editorError.foreground#ff7043
• editorGroup.border#2c5f7e
• editorGroupHeader.tabsBackground#0d1b2a
• editorIndentGuide.activeBackground1#4dd0e1
• editorIndentGuide.background1#2c5f7e
• editorLineNumber.activeForeground#4dd0e1
• editorLineNumber.foreground#37474f
• editorWarning.foreground#fff59d
• editorWhitespace.foreground#2c5f7e
• focusBorder#4dd0e1
• foreground#e1f5fe
• gitDecoration.addedResourceForeground#4dd0e1
• gitDecoration.conflictingResourceForeground#ffab40
• gitDecoration.deletedResourceForeground#ff7043
• gitDecoration.ignoredResourceForeground#37474f
• gitDecoration.modifiedResourceForeground#fff59d
• gitDecoration.untrackedResourceForeground#4dd0e1
• input.background#1b2a3a
• input.border#2c5f7e
• input.foreground#4dd0e1
• inputOption.activeBorder#4dd0e1
• list.activeSelectionBackground#2c5f7e
• list.activeSelectionForeground#ffab40
• list.hoverBackground#1b2a3a
• list.inactiveSelectionBackground#1b2a3a
• panel.background#0d1b2a
• panel.border#2c5f7e
• panelTitle.activeForeground#4dd0e1
• panelTitle.inactiveForeground#546e7a
• progressBar.background#4dd0e1
• scrollbar.shadow#000000
• scrollbarSlider.background#2c5f7e80
• scrollbarSlider.hoverBackground#37474f
• sideBar.background#0d1b2a
• sideBar.foreground#b3e5fc
• sideBarSectionHeader.background#1b2a3a
• sideBarSectionHeader.foreground#4dd0e1
• statusBar.background#0d1b2a
• statusBar.foreground#4dd0e1
• statusBarItem.hoverBackground#1b2a3a
• tab.activeBackground#0f1a2e
• tab.activeForeground#4dd0e1
• tab.border#2c5f7e
• tab.inactiveBackground#0d1b2a
• tab.inactiveForeground#546e7a
• terminal.ansiBlack#263238
• terminal.ansiBlue#42a5f5
• terminal.ansiBrightBlack#37474f
• terminal.ansiBrightBlue#64b5f6
• terminal.ansiBrightCyan#4dd0e1
• terminal.ansiBrightGreen#80e5ff
• terminal.ansiBrightMagenta#ce93d8
• terminal.ansiBrightRed#ff8a65
• terminal.ansiBrightWhite#ffffff
• terminal.ansiBrightYellow#ffecb3
• terminal.ansiCyan#26c6da
• terminal.ansiGreen#4dd0e1
• terminal.ansiMagenta#ba68c8
• terminal.ansiRed#ff7043
• terminal.ansiWhite#e1f5fe
• terminal.ansiYellow#fff59d
• terminal.background#0f1a2e
• terminal.foreground#b3e5fc
• titleBar.activeBackground#0d1b2a
• titleBar.activeForeground#b3e5fc
• titleBar.inactiveBackground#0d1b2a
• titleBar.inactiveForeground#546e7a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).