diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts index 37fce5dcf397b..b35a466ad0b80 100644 --- a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts +++ b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStarted.ts @@ -13,9 +13,7 @@ import { $, addDisposableListener, append, clearNode, Dimension, reset } from 'v import { ICommandService } from 'vs/platform/commands/common/commands'; import { IProductService } from 'vs/platform/product/common/productService'; import { hiddenEntriesConfigurationKey, IResolvedWalkthrough, IResolvedWalkthroughStep, IWalkthroughsService } from 'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedService'; -import { IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService'; -import { welcomePageBackground, welcomePageProgressBackground, welcomePageProgressForeground, welcomePageTileBackground, welcomePageTileHoverBackground, welcomePageTileShadow } from 'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedColors'; -import { activeContrastBorder, buttonBackground, buttonForeground, buttonHoverBackground, contrastBorder, descriptionForeground, focusBorder, foreground, checkboxBackground, checkboxBorder, checkboxForeground, textLinkActiveForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry'; +import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { firstSessionDateStorageKey, ITelemetryService, TelemetryLevel } from 'vs/platform/telemetry/common/telemetry'; import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; @@ -55,7 +53,6 @@ import { Schemas } from 'vs/base/common/network'; import { IEditorOptions } from 'vs/platform/editor/common/editor'; import { coalesce, equals, flatten } from 'vs/base/common/arrays'; import { ThemeSettings } from 'vs/workbench/services/themes/common/workbenchThemeService'; -import { ACTIVITY_BAR_BADGE_BACKGROUND, ACTIVITY_BAR_BADGE_FOREGROUND } from 'vs/workbench/common/theme'; import { startEntries } from 'vs/workbench/contrib/welcomeGettingStarted/common/gettingStartedContent'; import { MarkdownRenderer } from 'vs/editor/contrib/markdownRenderer/browser/markdownRenderer'; import { GettingStartedIndexList } from './gettingStartedList'; @@ -1457,131 +1454,3 @@ export class GettingStartedInputSerializer implements IEditorSerializer { return new GettingStartedInput({}); } } - -registerThemingParticipant((theme, collector) => { - - const backgroundColor = theme.getColor(welcomePageBackground); - if (backgroundColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer { background-color: ${backgroundColor}; }`); - } - - const foregroundColor = theme.getColor(foreground); - if (foregroundColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer { color: ${foregroundColor}; }`); - } - - const descriptionColor = theme.getColor(descriptionForeground); - if (descriptionColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .description { color: ${descriptionColor}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message { color: ${descriptionColor}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-footer { color: ${descriptionColor}; }`); - } - - const iconColor = theme.getColor(textLinkForeground); - if (iconColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .icon-widget { color: ${iconColor} }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked { color: ${iconColor} } `); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon-getting-started-step-unchecked { color: ${iconColor} } `); - } - - const buttonColor = theme.getColor(welcomePageTileBackground); - if (buttonColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button { background: ${buttonColor}; }`); - } - - const shadowColor = theme.getColor(welcomePageTileShadow); - if (shadowColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category { filter: drop-shadow(2px 2px 2px ${buttonColor}); }`); - } - - const buttonHoverColor = theme.getColor(welcomePageTileHoverBackground); - if (buttonHoverColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { background: ${buttonHoverColor}; }`); - } - if (buttonColor && buttonHoverColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.expanded:hover { background: ${buttonColor}; }`); - } - - const emphasisButtonForeground = theme.getColor(buttonForeground); - if (emphasisButtonForeground) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { color: ${emphasisButtonForeground}; }`); - } - - const emphasisButtonBackground = theme.getColor(buttonBackground); - if (emphasisButtonBackground) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { background: ${emphasisButtonBackground}; }`); - } - - const pendingStepColor = theme.getColor(descriptionForeground); - if (pendingStepColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked { color: ${pendingStepColor} } `); - } - - const emphasisButtonHoverBackground = theme.getColor(buttonHoverBackground); - if (emphasisButtonHoverBackground) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis:hover { background: ${emphasisButtonHoverBackground}; }`); - } - - const link = theme.getColor(textLinkForeground); - if (link) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button) { color: ${link}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link { color: ${link}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon { color: ${link}; }`); - } - const activeLink = theme.getColor(textLinkActiveForeground); - if (activeLink) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):hover { color: ${activeLink}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):active { color: ${activeLink}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover { color: ${activeLink}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover .codicon { color: ${activeLink}; }`); - } - const focusColor = theme.getColor(focusBorder); - if (focusColor) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.codicon-close):focus { outline-color: ${focusColor}; }`); - } - const border = theme.getColor(contrastBorder); - if (border) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button { border: 1px solid ${border}; }`); - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link { border: inherit; }`); - } - const activeBorder = theme.getColor(activeContrastBorder); - if (activeBorder) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { outline-color: ${activeBorder}; }`); - } - - const progressBackground = theme.getColor(welcomePageProgressBackground); - if (progressBackground) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-outer { background-color: ${progressBackground}; }`); - } - const progressForeground = theme.getColor(welcomePageProgressForeground); - if (progressForeground) { - collector.addRule(`.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-inner { background-color: ${progressForeground}; }`); - } - - const newBadgeForeground = theme.getColor(ACTIVITY_BAR_BADGE_FOREGROUND); - if (newBadgeForeground) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { color: ${newBadgeForeground}; }`); - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon { color: ${newBadgeForeground}; }`); - } - - const newBadgeBackground = theme.getColor(ACTIVITY_BAR_BADGE_BACKGROUND); - if (newBadgeBackground) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { background-color: ${newBadgeBackground}; }`); - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured { border-top-color: ${newBadgeBackground}; }`); - } - - const checkboxBackgroundColor = theme.getColor(checkboxBackground); - if (checkboxBackgroundColor) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { background-color: ${checkboxBackgroundColor} !important; }`); - } - - const checkboxForegroundColor = theme.getColor(checkboxForeground); - if (checkboxForegroundColor) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { color: ${checkboxForegroundColor} !important; }`); - } - - const checkboxBorderColor = theme.getColor(checkboxBorder); - if (checkboxBorderColor) { - collector.addRule(`.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { border-color: ${checkboxBorderColor} !important; }`); - } -}); diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css index d9136fe108a89..23cb924678c57 100644 --- a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css +++ b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css @@ -820,3 +820,141 @@ .monaco-workbench .part.editor>.content .gettingStartedContainer .hide-category-button:hover { background-color: var(--vscode-toolbar-hoverBackground); } + +.monaco-workbench .part.editor > .content .gettingStartedContainer { + background: var(--vscode-welcomePage-background); + color: var(--vscode-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .description { + color: var(--vscode-descriptionForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .category-progress .message { + color: var(--vscode-descriptionForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-footer { + color: var(--vscode-descriptionForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .icon-widget { + color: var(--vscode-textLink-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-checked { + color: var(--vscode-textLink-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step.expanded .codicon-getting-started-step-unchecked { + color: var(--vscode-textLink-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button { + background: var(--vscode-welcomePage-tileBackground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category { + filter: drop-shadow(2px 2px 2px var(--vscode-welcomePage-tileShadow)); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button:hover { + background: var(--vscode-welcomePage-tileHoverBackground); + outline-color: var(--vscode-contrastActiveBorder, var(--vscode-focusBorder)); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button.expanded:hover { + background: var(--vscode-welcomePage-tileBackground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { + color: var(--vscode-button-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis { + background: var(--vscode-button-background); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-step .codicon-getting-started-step-unchecked { + color: var(--vscode-descriptionForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button.emphasis:hover { + background: var(--vscode-button-hoverBackground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button) { + color: var(--vscode-textLink-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link { + color: var(--vscode-textLink-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .button-link .codicon { + color: var(--vscode-textLink-foreground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):hover { + color: var(--vscode-textLink-activeForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.hide-category-button):active { + color: var(--vscode-textLink-activeForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover { + color: var(--vscode-textLink-activeForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link:hover .codicon { + color: var(--vscode-textLink-activeForeground); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer a:not(.codicon-close):focus { + outline-color: var(--vscode-focusBorder); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button { + border: 1px solid var(--vscode-contrastBorder); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer button.button-link { + border: inherit; +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-outer { + background-color: var(--vscode-welcomePage-progress-background); +} + +.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .progress-bar-inner { + background-color: var(--vscode-welcomePage-progress-foreground); +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { + color: var(--vscode-activityBarBadge-foreground); +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured .featured-icon { + color: var(--vscode-activityBarBadge-foreground); +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .new-badge { + background-color: var(--vscode-activityBarBadge-background); +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .featured { + border-top-color: var(--vscode-activityBarBadge-background); +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { + background-color: var(--vscode-checkbox-background) !important; +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { + color: var(--vscode-checkbox-foreground) !important; +} + +.monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-checkbox { + border-color: var(--vscode-checkbox-border) !important; +}