vscode-theme-generator
vscode-theme-generator copied to clipboard
Published
20 hours ago •
Tyriar
Tyriar
Refine background fallback values
Right now background fallback colors are very rough based on a quick run through of the Dark+ theme. Maybe we can improve upon it?
The fallbacks we land on may eventually be upstreamed to VS Code.
Related: #22
I went through the colors in https://github.com/Microsoft/vscode/issues/25327#issue-224236610 and came up with the following notes.
{
"colors": {
"foreground": "", // A base color
"editorForeground": "",
"inputBoxForeground": "",
"dropdownForeground": "",
"listActiveSelectionForeground": "",
"listFocusAndSelectionForeground": "",
"peekViewResultsMatchForeground": "",
"peekViewResultsSelectionForeground": "",
"peekViewResultsFileForeground": "",
"titleBarActiveForeground": "",
"titleBarInactiveForeground": "",
"activeTabActiveGroupForeground": "",
"activeTabInactiveGroupForeground": "",
"inactiveTabActiveGroupForeground": "",
"inactiveTabInactiveGroupForeground": "",
"activityBarForeground": "",
"activityBadgeForeground": "",
"panelActiveTitleForeground": "",
"panelInactiveTitleForeground": "",
"sideBarTitleForeground": "",
"statusBarForeground": "",
"notificationsForeground": "",
"pickerGroupForeground": "",
"editorCursor": "",
"editorLineNumbers": "",
"peekViewTitle": "",
"peekViewTitleInfo": "",
// color1 (primary accent color)
"editorActiveLinkForeground": "",
"focusedElementOutline": "",
"highContrastBorder": "",
"highContrastOutline": "",
"inputBoxActiveOptionBorder": "",
"buttonBackground": "", // Message box button
"buttonHoverBackground": "", // Message box button
"statusBarDebuggingBackground": "",
"peekViewBorder": "", // Draw attention to the peek view with accent
"peekViewResultsSelectionBackground": "",
// background
"editorBackground": "",
"inputBoxBackground": "",
"dropdownBackground": "",
"editorWidgetBackground": "",
"errorBackground": "",
"infoBackground": "",
"warningBackground": "",
"errorBorder": "",
"infoBorder": "",
"warningBorder": "",
"editorHoverBackground": "",
"editorHoverBorder": "",
"editorMarkerNavigationBackground": "", // F8
"editorSuggestWidgetBackground": "", // Intellisense, how to set active item? https://github.com/Microsoft/vscode/issues/23506#issuecomment-297538193
"editorSuggestWidgetBorder": "",
"editorGroupBorder": "", // Thin border between editor groups
"tabBorder": "", // 1px border between tabs
"tabsContainerBackground": "",
"activeTabBackground": "",
"inactiveTabBackground": "",
"activityBarBackground": "",
"activityBadgeBackground": "",
"panelBackground": "",
"panelTopBorder": "",
"sideBarBackground": "",
"statusBarBackground": "",
"statusBarNoFolderBackground": "",
"debugToolBarBackground": "",
"debugExceptionWidgetBackground": "",
"debugExceptionWidgetBorder": "",
"notificationsBackground": "",
"peekViewResultsBackground": "",
"peekViewEditorBackground": "",
"peekViewTitleBackground": "",
// Transparent white
"listActiveSelectionBackground": "",
"listDropBackground": "",
"listFocusAndSelectionBackground": "",
"listFocusBackground": "",
"listHoverBackground": "",
"listInactiveFocusBackground": "",
"listInactiveSelectionBackground": "",
"editorLineHighlight": "",
"editorLineHighlightBorder": "",
"editorRangeHighlight": "", // Highlight on rows on find
"editorDragAndDropBackground": "", // DND overlay
"activityBarDragAndDropBackground": "",
"panelActiveTitleBorder": "",
"sideBarSectionHeaderBackground": "", // eg. Debug collapsible sections
"statusBarItemActiveBackground": "", // Mouse down
"statusBarItemHoverBackground": "",
"pickerGroupBorder": "",
// Defaults
"widgetShadow": "",
"inputBoxBorder": "",
"dropdownBorder": "",
"buttonForeground": "", // How can we ensure contrast is sufficient?
"scrollbarShadow": "",
"scrollbarSliderActiveBackground": "",
"scrollbarSliderBackground": "",
"scrollbarSliderHoverBackground": "",
"editorWhitespaces": "",
"editorSelection": "",
"editorIndentGuides": "",
"editorMarkerNavigationError": "", // F8
"editorMarkerNavigationWarning": "", // F8
"editorFindMatch": "",
"editorFindMatchHighlight": "",
"editorFindRangeHighlight": "",
"editorHoverHighlight": "",
"editorInactiveSelection": "",
"editorLinkForeground": "", // Do we need this? https://github.com/Microsoft/vscode/issues/25474
"editorSelectionHighlight": "",
"editorSuggestMatchHighlight": "", // Intellisen, not sure what this does https://github.com/Microsoft/vscode/issues/23506#issuecomment-297538193
"editorWordHighlight": "",
"editorWordHighlightStrong": "",
"diffInserted": "",
"diffInsertedOutline": "",
"diffRemoved": "",
"diffRemovedOutline": "",
"titleBarActiveBackground": "", // macOS only
"titleBarInactiveBackground": "", // macOS only
"terminalAnsiBlack": "",
"terminalAnsiBlue": "",
"terminalAnsiBrightBlack": "",
"terminalAnsiBrightBlue": "",
"terminalAnsiBrightCyan": "",
"terminalAnsiBrightGreen": "",
"terminalAnsiBrightMagenta": "",
"terminalAnsiBrightRed": "",
"terminalAnsiBrightWhite": "",
"terminalAnsiBrightYellow": "",
"terminalAnsiCyan": "",
"terminalAnsiGreen": "",
"terminalAnsiMagenta": "",
"terminalAnsiRed": "",
"terminalAnsiWhite": "",
"terminalAnsiYellow": "",
"editorHeaderBackground": "", // Falls back nicely
"editorSideBySideBorder": "", // BinaryResourceDiffEditor...?
"editorGroupBackground": "", // Not sure when this applies
"statusBarInfoItemBackground": "", // ???
"statusBarInfoItemHoverBackground": "", // ???
"peekViewEditorMatchHighlight": "",
"peekViewResultsMatchHighlight": "",
}
}
Discussion here https://github.com/Microsoft/vscode/issues/25482#issuecomment-298773156
Another option is a hybrid of the multiple-level deriving:
background
> selection, +x% light
> sidebar selection background
...
> strong background, +x% light
> sidebar background
....
Minimum requirements is just background here, but it's recommended that you fill in all the "core colors" (selection, strong background, focus, etc.).
Some other thoughts I had on this was the idea of introducing "templates" which would need different sets of color, and color the different components differently (imagine the current model vs a flatter UI using the same color on sidebar, panel, editor, etc.