【问题标题】:Use workbench.colorCustomizations in extension?在扩展中使用 workbench.colorCustomizations?
【发布时间】:2017-07-20 15:08:38
【问题描述】:
  1. 用户可以使用workbench.colorCustomizations 设置自定义用户界面。
  2. 我想在我的颜色主题中发布此类自定义 eppz! (C# theme for Unity)
  3. 怎么样?

我尝试将这些值贡献给我的扩展,但 configurationconfigurationDefaults 贡献点都不起作用。由于这些自定义实际上是工作台用户设置,我实际上是在问如何在扩展中为 settings.json 贡献值覆盖

【问题讨论】:

    标签: visual-studio-code vscode-extensions vscode-settings


    【解决方案1】:

    查找 settings.json 文件,按 CTRL + P 键并在此文件中键入 settings.json,您可以输入此信息并在引号之间将颜色设置为十六进制

    "workbench.colorCustomizations": {
        // Contrast Colors - The contrast colors are typically only set for high contrast themes. If set, they add an additional border around items across the UI to increase the contrast.
        "contrastActiveBorder": "",
        "contrastBorder": "",
        // Base Colors
        "focusBorder": "",
        "foreground": "",
        "widget.shadow": "",
        "selection.background": "",
        "descriptionForeground": "",
        "errorForeground": "",
        // Text Colors — Colors inside a text document, such as the welcome page.
        "textBlockQuote.background": "",
        "textBlockQuote.border": "",
        "textCodeBlock.background": "",
        "textLink.activeForeground": "",
        "textLink.foreground": "",
        "textPreformat.foreground": "",
        "textSeparator.foreground": "",
        // Button Control — A set of colors for button widgets such as Open Folder button in the Explorer of a new window.
        "button.background": "",
        "button.foreground": "",
        "button.hoverBackground": "",
        // Dropdown Control — A set of colors for all dropdown widgets such as in the Integrated Terminal or the Output panel. Note that the dropdown control is not used on macOS currently.
        "dropdown.background": "",
        "dropdown.listBackground": "",
        "dropdown.border": "",
        "dropdown.foreground": "",
        // Input Control — Colors for input controls such as in the Search view or the Find/Replace dialog.
        "input.background": "",
        "input.border": "",
        "input.foreground": "",
        "input.placeholderForeground": "",
        "inputOption.activeBorder": "",
        "inputValidation.errorBackground": "",
        "inputValidation.errorBorder": "",
        "inputValidation.infoBackground": "",
        "inputValidation.infoBorder": "",
        "inputValidation.warningBackground": "",
        "inputValidation.warningBorder": "",
        // Scroll Bar Control
        "scrollbar.shadow": "",
        "scrollbarSlider.activeBackground": "",
        "scrollbarSlider.background": "",
        "scrollbarSlider.hoverBackground": "",
        // Badge — Badges are small information labels, for example, search results count.
        "badge.foreground": "",
        "badge.background": "",
        // Progress Bar
        "progressBar.background": "",
        // Lists and Trees — Colors for list and trees like the File Explorer. An active list/tree has keyboard focus, an inactive does not.
        "list.activeSelectionBackground": "",
        "list.activeSelectionForeground": "",
        "list.dropBackground": "",
        "list.focusBackground": "",
        "list.focusForeground": "",
        "list.highlightForeground": "",
        "list.hoverBackground": "",
        "list.hoverForeground": "",
        "list.inactiveSelectionBackground": "",
        "list.inactiveSelectionForeground": "",
        "list.inactiveFocusBackground": "",
        "list.invalidItemForeground": "",
        // Activity Bar — The Activity Bar is displayed either on the far left or right of the workbench and allows fast switching between views of the Side Bar.
        "activityBar.background": "",
        "activityBar.dropBackground": "",
        "activityBar.foreground": "",
        "activityBar.border": "",
        "activityBarBadge.background": "",
        "activityBarBadge.foreground": "",
        // Side Bar — The Side Bar contains views like the Explorer and Search.
        "sideBar.background": "",
        "sideBar.foreground": "",
        "sideBar.border": "",
        "sideBar.dropBackground": "",
        "sideBarTitle.foreground": "",
        "sideBarSectionHeader.background": "",
        "sideBarSectionHeader.foreground": "",
        // Editor Groups & Tabs — Editor Groups are the containers of editors. There can be up to three editor groups. A Tab is the container of an editor. Multiple Tabs can be opened in one editor group.
        "editorGroup.background": "",
        "editorGroup.border": "",
        "editorGroup.dropBackground": "",
        "editorGroupHeader.noTabsBackground": "",
        "editorGroupHeader.tabsBackground": "",
        "editorGroupHeader.tabsBorder": "",
        "tab.activeBackground": "",
        "tab.activeForeground": "",
        "tab.border": "",
        "tab.activeBorder": "",
        "tab.unfocusedActiveBorder": "",
        "tab.inactiveBackground": "",
        "tab.inactiveForeground": "",
        "tab.unfocusedActiveForeground": "",
        "tab.unfocusedInactiveForeground": "",
        "tab.hoverBackground": "",
        "tab.unfocusedHoverBackground": "",
        "tab.hoverBorder": "",
        "tab.unfocusedHoverBorder": "",
        // Editor Colors — for syntax highlighting, use the editor.tokenColorCustomizations setting. All other editor colors are listed here
        "editor.background": "",
        "editor.foreground": "",
        "editorLineNumber.foreground": "",
        "editorLineNumber.activeForeground": "",
        "editorCursor.background": "",
        "editorCursor.foreground": "",
        "editor.selectionBackground": "",
        "editor.selectionForeground": "",
        "editor.inactiveSelectionBackground": "",
        "editor.selectionHighlightBackground": "",
        "editor.selectionHighlightBorder": "",
        "editor.wordHighlightBackground": "",
        "editor.wordHighlightBorder": "",
        "editor.worldHighlightStrongBackground": "",
        "editor.wordHighlightStrongBorder": "",
        "editor.findMatchBackground": "",
        "editor.findMatchHighlightBackground": "",
        "editor.findRangeHighlightBackground": "",
        "editor.findMatchBorder": "",
        "editor.findMatchHighlightBorder": "",
        "editor.hoverHighlightBackground": "",
        "editor.lineHighlightBackground": "",
        "editor.lineHighlightBorder": "",
        "editorLink.activeForeground": "",
        "editor.rangeHighlightBackground": "",
        "editor.rangeHighlightBorder": "",
        "editorWhitespace.foreground": "",
        "editorIndentGuide.background": "",
        "editorRuler.foreground": "",
        "editorCodeLens.foreground": "",
        "editorBracketMatch.background": "",
        "editorBracketMatch.border": "",
        "editorOverviewRuler.border": "",
        "editorOverviewRuler.findMatchForeground": "",
        "editorOverviewRuler.rangeHighlightForeground": "",
        "editorOverviewRuler.selectionHighlightForeground": "",
        "editorOverviewRuler.wordHighlightForeground": "",
        "editorOverviewRuler.wordHighlightStrongForeground": "",
        "editorOverviewRuler.modifiedForeground": "",
        "editorOverviewRuler.addedForeground": "",
        "editorOverviewRuler.deletedForeground": "",
        "editorOverviewRuler.errorForeground": "",
        "editorOverviewRuler.warningForeground": "",
        "editorOverviewRuler.infoForeground": "",
        "editorError.foreground": "",
        "editorError.border": "",
        "editorWarning.foreground": "",
        "editorWarning.border": "",
        "editorInfo.foreground": "",
        "editorInfo.border": "",
        "editorHint.foreground": "",
        "editorHint.border": "",
        "editorGutter.background": "",
        "editorGutter.modifiedBackground": "",
        "editorGutter.addedBackground": "",
        "editorGutter.deletedBackground": "",
        // Diff Editor Colors — For coloring inserted and removed text, use either a background or a border color but not both.
        "diffEditor.insertedTextBackground": "",
        "diffEditor.insertedTextBorder": "",
        "diffEditor.removedTextBackground": "",
        "diffEditor.removedTextBorder": "",
        // Editor Widget Colors - The Editor widget is shown in front of the editor content. Examples are the Find/Replace dialog, the suggestion widget, and the editor hover
        "editorWidget.background": "",
        "editorWidget.border": "",
        "editorSuggestWidget.background": "",
        "editorSuggestWidget.border": "",
        "editorSuggestWidget.foreground": "",
        "editorSuggestWidget.highlightForeground": "",
        "editorSuggestWidget.selectedBackground": "",
        "editorHoverWidget.background": "",
        "editorHoverWidget.border": "",
        "debugExceptionWidget.background": "",
        "debugExceptionWidget.border": "",
        "editorMarkerNavigation.background": "",
        "editorMarkerNavigationError.background": "",
        "editorMarkerNavigationWarning.background": "",
        "editorMarkerNavigationInfo.background": "",
        // Peek View Colors — Peek views are used to show references and declarations as a view inside the editor.
        "peekView.border": "",
        "peekViewEditor.background": "",
        "peekViewEditorGutter.background": "",
        "peekViewEditor.matchHighlightBackground": "",
        "peekViewResult.background": "",
        "peekViewResult.fileForeground": "",
        "peekViewResult.lineForeground": "",
        "peekViewResult.matchHighlightBackground": "",
        "peekViewResult.selectionBackground": "",
        "peekViewResult.selectionForeground": "",
        "peekViewTitle.background": "",
        "peekViewTitleDescription.foreground": "",
        "peekViewTitleLabel.foreground": "",
        // Merge Conflicts — Merge conflict decorations are shown when the editor contains special diff ranges.
        "merge.currentHeaderBackground": "",
        "merge.currentContentBackground": "",
        "merge.incomingHeaderBackground": "",
        "merge.incomingContentBackground": "",
        "merge.border": "",
        "merge.commonContentBackground": "",
        "merge.commonHeaderBackground": "",
        "editorOverviewRuler.currentContentForeground": "",
        "editorOverviewRuler.currentContentForeground": "",
        "editorOverviewRuler.commonContentForeground": "",
        // Panel Colors — Panels are shown below the editor area and contain views like Output and Integrated Terminal.
        "panel.background": "",
        "panel.border": "",
        "panel.dropBackground": "",
        "panelTitle.activeBorder": "",
        "panelTitle.activeForeground": "",
        "panelTitle.inactiveForeground": "",
        // Status Bar Colors — The Status Bar is shown in the bottom of the workbench.
        "statusBar.background": "",
        "statusBar.foreground": "",
        "statusBar.border": "",
        "statusBar.debuggingBackground": "",
        "statusBar.debuggingForeground": "",
        "statusBar.debuggingBorder": "",
        "statusBar.noFolderForeground": "",
        "statusBar.noFolderBackground": "",
        "statusBar.noFolderBorder": "",
        "statusBarItem.activeBackground": "",
        "statusBarItem.hoverBackground": "",
        "statusBarItem.prominentBackground": "",
        "statusBarItem.prominentHoverBackground": "",
        // Title Bar Colors (macOS)
        "titleBar.activeBackground": "",
        "titleBar.activeForeground": "",
        "titleBar.inactiveBackground": "",
        "titleBar.inactiveForeground": "",
        "titleBar.border": "",
        // Notification Colors — Notification toasts slide up from the bottom-right of the workbench.
        "notificationCenter.border": "",
        "notificationCenterHeader.foreground": "",
        "notificationCenterHeader.background": "",
        "notificationToast.border": "",
        "notifications.foreground": "",
        "notifications.background": "",
        "notifications.border": "",
        "notificationLink.foreground": "",
        // Extensions
        "extensionButton.prominentForeground": "",
        "extensionButton.prominentBackground": "",
        "extensionButton.prominentHoverBackground": "",
        "pickerGroup.border": "",
        "pickerGroup.foreground": "",
        // Integrated Terminal Colors
        "terminal.background": "",
        "terminal.foreground": "",
        "terminal.ansiBlack": "",
        "terminal.ansiBlue": "",
        "terminal.ansiBrightBlack": "",
        "terminal.ansiBrightBlue": "",
        "terminal.ansiBrightCyan": "",
        "terminal.ansiBrightGreen": "",
        "terminal.ansiBrightMagenta": "",
        "terminal.ansiBrightRed": "",
        "terminal.ansiBrightWhite": "",
        "terminal.ansiBrightYellow": "",
        "terminal.ansiCyan": "",
        "terminal.ansiGreen": "",
        "terminal.ansiMagenta": "",
        "terminal.ansiRed": "",
        "terminal.ansiWhite": "",
        "terminal.ansiYellow": "",
        "terminal.selectionBackground": "",
        "terminalCursor.background": "",
        "terminalCursor.foreground": "",
        // Debug
        "debugToolBar.background": "",
        // Welcome Page
        "welcomePage.buttonBackground": "",
        "welcomePage.buttonHoverBackground": "",
        "walkThrough.embeddedEditorBackground": "",
        // Git Colors
        "gitDecoration.modifiedResourceForeground": "",
        "gitDecoration.deletedResourceForeground": "",
        "gitDecoration.untrackedResourceForeground": "",
        "gitDecoration.ignoredResourceForeground": "",
        "gitDecoration.conflictingResourceForeground": ""
    }

    【讨论】:

    • 不确定如何将其放入扩展中以通过市场交付?
    • 您好,抱歉,我不知道如何在商店中发布。本站教你如何创建模板并迈出第一步。 css-tricks.com/creating-a-vs-code-theme
    • 我已经发布了一个扩展,我只是想随它一起发布工作台颜色自定义。
    • 现在我明白了:)我不知道怎么做,我会搜索
    • 不确定这是否仍然是一个有效的问题,自五年前的问题以来,我没有检查任何更新的 API。
    【解决方案2】:

    工作台颜色自定义应该由主题本身提供,而不是通过设置。

    在您主题的theme.json 中,只需创建一个名为colors 的部分:

    {
        "type": "dark",
        "colors": {
            "editor.background": "#1e1e1e",
            "editor.foreground": "#d4d4d4",
            "editorIndentGuide.background": "#404040",
            "editorRuler.foreground": "#333333",
            "activityBarBadge.background": "#007acc",
            "sideBarTitle.foreground": "#bbbbbb",
            ...
        },
        "tokenColors": "./YourTheme.tmTheme"
    }
    

    这是我们的docs on contributing workbench colors。看看examples of this 的一些内置主题。

    【讨论】:

    • 我可以在eppz-code.json这里使用这个符号吗?
    • 我已经将colors 字典放到了很多地方(顶层,settings 附近,settings 内部),但没有效果(因为我在调试模式下运行主题)。
    猜你喜欢
    • 2017-07-23
    • 2018-11-23
    • 1970-01-01
    • 2021-04-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-08-05
    • 2011-03-10
    相关资源
    最近更新 更多