DarkLight Hybrid Theme

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#11151C
• activityBar.foreground#D7DEE8
• activityBar.inactiveForeground#738093
• activityBarBadge.background#B45309
• activityBarBadge.foreground#F8FBFF
• badge.background#2F3B4D
• badge.foreground#F8FBFF
• button.background#0F766E
• button.foreground#F8FBFF
• button.hoverBackground#0D9488
• button.secondaryBackground#1E293B
• button.secondaryForeground#F8FBFF
• button.secondaryHoverBackground#334155
• chat.editedFileForeground#1F2430
• descriptionForeground#8E99A8
• dropdown.background#1A2030
• dropdown.foreground#D7DEE8
• editor.background#F8F5EF
• editor.findMatchBackground#F59E0BCC
• editor.findMatchBorder#B45309
• editor.findMatchForeground#1F2430
• editor.findMatchHighlightBackground#FCD34DB3
• editor.findMatchHighlightBorder#D97706
• editor.foreground#1F2430
• editor.inactiveSelectionBackground#7DD3A74D
• editor.lineHighlightBackground#EFF4FA
• editor.selectionBackground#7DD3A780
• editor.selectionHighlightBackground#34D39966
• editor.wordHighlightBackground#F7ECD999
• editor.wordHighlightStrongBackground#F2DFC099
• editorBracketHighlight.foreground1#3B82F6
• editorBracketHighlight.foreground2#8B5CF6
• editorBracketHighlight.foreground3#EC4899
• editorBracketHighlight.foreground4#60A5FA
• editorBracketHighlight.foreground5#A78BFA
• editorBracketHighlight.foreground6#F472B6
• editorBracketHighlight.unexpectedBracket.foreground#DB2777
• editorCursor.foreground#EA580C
• editorGroup.border#222A37
• editorGroupHeader.tabsBackground#11151C
• editorHoverWidget.background#FFFDF8
• editorHoverWidget.border#CCD6E2
• editorHoverWidget.foreground#1F2430
• editorIndentGuide.activeBackground1#B7AFA0
• editorIndentGuide.background1#D8D0C3
• editorLineNumber.activeForeground#5C6673
• editorLineNumber.foreground#A8B1BC
• editorRuler.foreground#D9D2C6
• editorWhitespace.foreground#D7D2C8
• errorForeground#F28B82
• focusBorder#10B981
• foreground#D7DEE8
• icon.foreground#4B5563
• input.background#FFFDF8
• input.border#C9D2DE
• input.foreground#1F2430
• input.placeholderForeground#7F8A99
• inputOption.activeBackground#134E4A
• inputOption.activeBorder#10B981
• inputOption.activeForeground#F8FBFF
• inputOption.hoverBackground#1E293B26
• list.activeSelectionBackground#214238
• list.activeSelectionForeground#F8FBFF
• list.focusBackground#2C4A40
• list.hoverBackground#202836
• notificationCenterHeader.background#161B24
• notifications.background#161B24
• notifications.foreground#D7DEE8
• panel.background#10151B
• panel.border#232A36
• panelTitle.activeForeground#F8FBFF
• panelTitle.inactiveForeground#8E99A8
• scrollbarSlider.activeBackground#738093CC
• scrollbarSlider.background#73809366
• scrollbarSlider.hoverBackground#73809399
• selection.background#2C405B
• sideBar.background#161B24
• sideBar.border#232A36
• sideBar.foreground#C7D0DD
• sideBarSectionHeader.background#1A2030
• sideBarSectionHeader.foreground#D7DEE8
• statusBar.background#0F1218
• statusBar.border#232A36
• statusBar.foreground#D7DEE8
• tab.activeBackground#F8F5EF
• tab.activeBorderTop#10B981
• tab.activeForeground#1F2430
• tab.border#222A37
• tab.inactiveBackground#171D27
• tab.inactiveForeground#9AA6B5
• terminal.background#10151B
• terminal.foreground#D7DEE8
• textLink.activeForeground#14B8A6
• textLink.foreground#0F766E
• textSeparator.foreground#273142
• titleBar.activeBackground#11151C
• titleBar.activeForeground#D7DEE8
• titleBar.inactiveBackground#11151C
• titleBar.inactiveForeground#748091
• toolbar.activeBackground#94A3B833
• toolbar.hoverBackground#CBD5E133
• walkThrough.embeddedEditorBackground#131925
• welcomePage.background#131925
• welcomePage.progress.background#2A364A
• welcomePage.progress.foreground#10B981
• welcomePage.tileBackground#1A2230
• welcomePage.tileHoverBackground#233047

tokenColors

TextMate scopes and font styles (syntax highlighting rules).