Allogenes

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#ebe4d8
• activityBar.activeBorder#d4bc8d
• activityBar.background#3b4255
• activityBar.border#8d867a
• activityBar.dropBorder#d4bc8d
• activityBar.foreground#485366
• activityBar.inactiveForeground#ebe4d8
• activityBarBadge.background#e5445f
• activityBarBadge.foreground#ebe4d8
• badge.background#e5445f
• badge.foreground#ebe4d8
• button.background#3b4255
• button.foreground#ebe4d8
• button.hoverBackground#3b4255dd
• checkbox.background#3b4255
• checkbox.border#d4bc8d
• checkbox.foreground#fff
• debugIcon.breakpointForeground#e5445f
• descriptionForeground#485366
• dropdown.background#fefefe
• dropdown.foreground#3b4255
• dropdown.listBackground#fefefe
• editor.background#f4efe7
• editor.foreground#3b4255
• editor.lineHighlightBackground#ebe4d8
• editor.selectionBackground#d4bc8d
• editor.selectionForeground#d4bc8d
• editor.selectionHighlightBackground#48536644
• editorBracketHighlight.foreground1#3b4255
• editorBracketHighlight.foreground2#946a3f
• editorCursor.background#ebe4d8
• editorCursor.foreground#3b4255
• editorError.foreground#e5445f
• editorGroup.border#8d867a
• editorGroupHeader.tabsBackground#d4bc8d
• editorGroupHeader.tabsBorder#0000
• editorInfo.foreground#3b4255
• editorLineNumber.activeForeground#3b4255
• editorLineNumber.foreground#d4bc8d
• editorSuggestWidget.background#ebe4d8
• editorSuggestWidget.border#ce9f6f
• editorSuggestWidget.focusHighlightForeground#ce9f6f
• editorSuggestWidget.foreground#3b4255
• editorSuggestWidget.highlightForeground#2f3948
• editorSuggestWidget.selectedBackground#3b4255
• editorSuggestWidget.selectedForeground#ebe4d8
• editorSuggestWidget.selectedIconForeground#ebe4d8
• editorWarning.foreground#864300
• editorWidget.background#ebe4d8
• editorWidget.border#d4bc8d
• editorWidget.foreground#3b4255
• extensionButton.background#3b4255
• extensionButton.foreground#ebe4d8
• extensionButton.hoverBackground#b4a58f
• extensionButton.prominentBackground#3b4255
• extensionButton.prominentForeground#ebe4d8
• extensionButton.prominentHoverBackground#b4a58f
• extensionButton.separator#b4a58f
• gitDecoration.addedResourceForeground#3b4255
• gitDecoration.deletedResourceForeground#e5445f
• gitDecoration.ignoredResourceForeground#3b425588
• gitDecoration.modifiedResourceForeground#3b4255
• gitDecoration.renamedResourceForeground#3b4255
• gitDecoration.untrackedResourceForeground#3b4255
• input.background#fefefe
• input.border#c1c1c1
• input.foreground#333333
• inputOption.activeBackground#3b4255
• inputOption.activeForeground#ebe4d8
• inputOption.hoverBackground#b4a58f
• list.activeSelectionBackground#fff
• list.activeSelectionForeground#3b4255
• list.focusAndSelectionOutline#ce9f6f
• list.focusHighlightForeground#3b4255
• list.focusOutline#ce9f6f
• list.highlightForeground#ce9f6f
• list.hoverBackground#fff
• list.hoverForeground#3b4255
• list.inactiveSelectionBackground#fff
• list.inactiveSelectionForeground#3b4255
• list.inactiveSelectionIconForeground#3b4255
• menu.background#ebe4d8
• menu.border#ce9f6f
• menu.foreground#3b4255
• menu.selectionBackground#3b4255
• menu.selectionForeground#ebe4d8
• menu.separatorBackground#ce9f6f
• menubar.selectionBackground#ebe4d8
• menubar.selectionForeground#3b4255
• quickInput.background#3b4255
• quickInput.foreground#ebe4d8
• quickInputList.focusBackground#ebe4d8
• quickInputList.focusForeground#3b4255
• settings.focusedRowBackground#fefefe
• settings.focusedRowBorder#ce9f6f
• settings.rowHoverBackground#fefefe
• sideBar.background#ebe4d8
• sideBar.border#8d867a
• sideBar.foreground#3b4255
• sideBarSectionHeader.background#d4bc8d
• sideBarSectionHeader.border#8d867a
• sideBarSectionHeader.foreground#3b4255
• statusBar.background#3b4255
• statusBar.border#8d867a
• statusBar.debuggingBackground#d4bc8d
• statusBar.debuggingForeground#3b4255
• statusBar.noFolderBackground#8d867a
• tab.activeBackground#ebe4d8
• tab.activeForeground#3b4255
• tab.border#8d867a
• tab.inactiveBackground#48536633
• tab.inactiveForeground#ebe4d8
• textLink.activeForeground#9f7a56
• textLink.foreground#9f7a56
• titleBar.activeBackground#3b4255
• titleBar.activeForeground#ebe4d8
• titleBar.border#8d867a
• titleBar.inactiveBackground#3b4255dd
• titleBar.inactiveForeground#ebe4d8dd
• toolbar.activeBackground#ebe4d8
• toolbar.hoverBackground#ebe4d8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...