在 PowerPoint 加载项中使用文档主题Use document themes in your PowerPoint add-ins

Office 主题在某种程度上包括一组视觉协调的字体和颜色,可应用于演示文稿、文档、工作表和电子邮件。若要在 PowerPoint 中应用或自定义演示文稿的主题,请使用功能区上“设计”**** 选项卡中的“主题”**** 和“变量”**** 组。虽然 PowerPoint 向新空白演示文稿分配默认的“Office 主题”****,但也可以选择“设计”**** 选项卡上的其他主题、从 Office.com 下载其他主题,或创建并自定义自己的主题。An Office theme consists, in part, of a visually coordinated set of fonts and colors that you can apply to presentations, documents, worksheets, and emails. To apply or customize the theme of a presentation in PowerPoint, you use the Themes and Variants groups on Design tab of the ribbon. PowerPoint assigns a new blank presentation with the default Office Theme, but you can choose other themes available on the Design tab, download additional themes from Office.com, or create and customize your own theme.

使用 OfficeThemes.css,有助于以两种方式设计与 PowerPoint 相协调的加载项:Using OfficeThemes.css, helps you design add-ins that are coordinated with PowerPoint in two ways:

  • 在 PowerPoint 内容加载项中。使用 OfficeThemes.css 的文档主题类指定字体和颜色,与内容加载项要插入到的演示文稿的主题匹配(这些颜色和字体将在用户更改或自定义演示文稿主题时动态更新)。In content add-ins for PowerPoint. Use the document theme classes of OfficeThemes.css to specify fonts and colors that match the theme of the presentation your content add-in is inserted into - and those fonts and colors will dynamically update if a user changes or customizes the presentation's theme.

  • 在 PowerPoint 任务窗格加载项中。使用 OfficeThemes.css 的 Office UI 主题类,指定 UI 中使用的相同字体和背景颜色,这样任务窗格加载项就会与内置任务窗格的颜色匹配(这些颜色将在用户更改 Office UI 主题时动态更新)。In task pane add-ins for PowerPoint. Use the Office UI theme classes of OfficeThemes.css to specify the same fonts and background colors used in the UI so that your task pane add-ins will match the colors of built-in task panes - and those colors will dynamically update if a user changes the Office UI theme.

文档主题颜色Document theme colors

每个 Office 文档主题定义了 12 种颜色。通过颜色选取器在演示文稿中设置字体、背景和其他颜色设置时,可以使用其中 10 种颜色。Every Office document theme defines 12 colors. Ten of these colors are available when you set font, background, and other color settings in a presentation with the color picker.

调色板

若要在 PowerPoint 中查看或自定义一套完整的 12 种主题颜色,请在“设计”**** 选项卡的“变量”**** 组中,单击“更多”**** 下拉菜单,然后选择“颜色”**** > “自定义颜色”****,以调出“新建主题颜色”****。To view or customize the full set of 12 theme colors in PowerPoint, in the Variants group on the Design tab, click the More drop-down - then select Colors > Customize Colors to display the Create New Theme Colors dialog box.

“新建主题颜色”对话框

前四种颜色适用于文本和背景。使用浅色创建的文本始终在深色背景上清晰显示,使用深色创建的文本始终在浅色背景上清晰显示。接下来六种颜色是个性色,始终在四种潜在背景色上可见。最后两种颜色适用于超链接和已访问过的超链接。The first four colors are for text and backgrounds. Text that is created with the light colors will always be legible over the dark colors, and text that is created with dark colors will always be legible over the light colors. The next six are accent colors that are always visible over the four potential background colors. The last two colors are for hyperlinks and followed hyperlinks.

文档主题字体Document theme fonts

每个 Office 文档主题还定义两种字体:一种用于标题,另一种用于正文文本。PowerPoint 使用这些字体来构造自动文本样式。此外,文本和艺术字快速样式库也使用这些相同的主题字体。使用字体选取器选择字体时,这两种字体就是最靠上的两个选项。Every Office document theme also defines two fonts -- one for headings and one for body text. PowerPoint uses these fonts to construct automatic text styles. In addition, Quick Styles galleries for text and WordArt use these same theme fonts. These two fonts are available as the first two selections when you select fonts with the font picker.

字体选取器

若要在 PowerPoint 中查看或自定义主题字体,请在“设计”选项卡**** 的“变量”**** 组中,单击“更多”**** 下拉菜单,然后选择“字体”**** > “自定义字体”**** 以显示“新建主题字体”**** 对话框。To view or customize theme fonts in PowerPoint, in the Variants group on the Design tab, click the More drop-down - then select Fonts > Customize Fonts to display the Create New Theme Fonts dialog box.

“新建主题字体”对话框

Office UI 主题字体和颜色Office UI theme fonts and colors

Office 还让你在几个预定义主题之间进行选择,指定用于所有 Office 应用程序 UI 中的一些颜色和字体。若要执行此操作,请使用“文件” > “帐户” > “Office 主题”下拉菜单(在任意 Office 应用程序中)。Office also lets you choose between several predefined themes that specify some of the colors and fonts used in the UI of all Office applications. To do that, you use the File > Account > Office Theme drop-down (from any Office application).

Office 主题下拉菜单

OfficeThemes.css 包含您可在 PowerPoint 任务窗格加载项中使用的类,以便它们使用这些相同的字体和颜色。这可使您设计与内置任务窗格外观一致的任务窗格加载项。OfficeThemes.css includes classes that you can use in your task pane add-ins for PowerPoint so they will use these same fonts and colors. This lets you design your task pane add-ins that match the appearance of built-in task panes.

使用 OfficeThemes.cssUsing OfficeThemes.css

使用 OfficeThemes.css 文件处理 PowerPoint 内容加载项,使您可将 外接程序 的外观与它运行的演示文稿所应用的主题相协调。使用 OfficeThemes.css 文件处理 PowerPoint 任务窗格加载项,使您可将您 外接程序 的外观与 Office UI 的字体和颜色相协调。Using the OfficeThemes.css file with your content add-ins for PowerPoint lets you coordinate the appearance of your add-in with the theme applied to the presentation it's running with. Using the OfficeThemes.css file with your task pane add-ins for PowerPoint lets you coordinate the appearance of your add-in with the fonts and colors of the Office UI.

将 OfficeThemes.css 文件添加到您的项目中Adding the OfficeThemes.css file to your project

使用以下步骤将 OfficeThemes.css 文件添加到您的 外接程序 项目中并进行引用。Use the following steps to add and reference the OfficeThemes.css file to your add-in project.

将 OfficeThemes.css 添加到 Visual Studio 项目中的具体步骤To add OfficeThemes.css to your Visual Studio project

备注

此过程中的步骤仅适用于 Visual Studio 2015。The steps in this procedure only apply to Visual Studio 2015. 如果你使用的是 Visual Studio 2017,则会自动为你创建的任何新 PowerPoint 加载项项目创建 OfficeThemes.css 文件。If you are using Visual Studio 2017, the OfficeThemes.css file is created automatically for any new PowerPoint add-in projects that you create.

  1. 在“解决方案资源管理器”**** 中,右键单击 project_nameWeb 项目中的“内容”**** 文件夹,选择“添加”****,然后选择“样式表”****。In Solution Explorer, right-click the Content folder in the project_nameWeb project, choose Add, and then select Style Sheet.

  2. 将新的样式表命名为“OfficeThemes”****。Name the new style sheet OfficeThemes.

    重要

    必须将样式表命名为 OfficeThemes,否则在用户更改主题时动态更新加载项字体和颜色的功能将无法正常运行。The style sheet must be named OfficeThemes, or the feature that dynamically updates add-in fonts and colors when a user changes the theme won't work.

  3. 删除文件中的默认 body 类 (body {}),并将以下 CSS 代码复制并粘贴到文件中。Delete the default body class (body {}) in the file, and copy and paste the following CSS code into the file.

    /* The following classes describe the common theme information for office documents */ 
    
    /* Basic Font and Background Colors for text */ 
    .office-docTheme-primary-fontColor { color:#000000; } 
    .office-docTheme-primary-bgColor { background-color:#ffffff; } 
    .office-docTheme-secondary-fontColor { color: #000000; } 
    .office-docTheme-secondary-bgColor { background-color: #ffffff; } 
    
    /* Accent color definitions for fonts */ 
    .office-contentAccent1-color { color:#5b9bd5; } 
    .office-contentAccent2-color { color:#ed7d31; } 
    .office-contentAccent3-color { color:#a5a5a5; } 
    .office-contentAccent4-color { color:#ffc000; } 
    .office-contentAccent5-color { color:#4472c4; } 
    .office-contentAccent6-color { color:#70ad47; } 
    
    /* Accent color for backgrounds */ 
    .office-contentAccent1-bgColor { background-color:#5b9bd5; } 
    .office-contentAccent2-bgColor { background-color:#ed7d31; } 
    .office-contentAccent3-bgColor { background-color:#a5a5a5; } 
    .office-contentAccent4-bgColor { background-color:#ffc000; } 
    .office-contentAccent5-bgColor { background-color:#4472c4; } 
    .office-contentAccent6-bgColor { background-color:#70ad47; } 
    
    /* Accent color for borders */ 
    .office-contentAccent1-borderColor { border-color:#5b9bd5; } 
    .office-contentAccent2-borderColor { border-color:#ed7d31; } 
    .office-contentAccent3-borderColor { border-color:#a5a5a5; } 
    .office-contentAccent4-borderColor { border-color:#ffc000; } 
    .office-contentAccent5-borderColor { border-color:#4472c4; } 
    .office-contentAccent6-borderColor { border-color:#70ad47; } 
    
    /* links */ 
    .office-a { color: #0563c1; } 
    .office-a:visited { color: #954f72; } 
    
    /* Body Fonts */ 
    .office-bodyFont-eastAsian { } /* East Asian name of the Font */ 
    .office-bodyFont-latin { font-family:"Calibri"; } /* Latin name of the Font */ 
    .office-bodyFont-script { } /* Script name of the Font */ 
    .office-bodyFont-localized { font-family:"Calibri"; } /* Localized name of the Font. Corresponds to the default font of the culture currently used in Office.*/ 
    
    /* Headers Font */ 
    .office-headerFont-eastAsian { } 
    .office-headerFont-latin { font-family:"Calibri Light"; } 
    .office-headerFont-script { } 
    .office-headerFont-localized { font-family:"Calibri Light"; } 
    
    /* The following classes define font and background colors for Office UI themes. These classes should only be used in task pane add-ins */ 
    
    /* Basic Font and Background Colors for PPT */ 
    .office-officeTheme-primary-fontColor { color:#b83b1d; } 
    .office-officeTheme-primary-bgColor { background-color:#dedede; } 
    .office-officeTheme-secondary-fontColor { color:#262626; } 
    .office-officeTheme-secondary-bgColor { background-color:#ffffff; }
    
  4. 如果您使用非 Visual Studio 的工具来创建您的 外接程序,请将步骤 3 的 CSS 代码复制到文本文件中,确保将文件保存为 OfficeThemes.css。If you are using a tool other than Visual Studio to create your add-in, copy the CSS code from step 3 into a text file, making sure to save the file as OfficeThemes.css.

在加载项的 HTML 页面中引用 OfficeThemes.cssReferencing OfficeThemes.css in your add-in's HTML pages

若要在加载项项目中使用 OfficeThemes.css 文件,请在网页(如 .html、.aspx 或 .php 文件)的 <head> 标记内,添加引用 OfficeThemes.css 文件的 <link> 标记,网页按照下面的格式实现加载项 UI:To use the OfficeThemes.css file in your add-in project, add a <link> tag that references the OfficeThemes.css file inside the <head> tag of the web pages (such as an .html, .aspx, or .php file) that implement the UI of your add-in in this format:

<link href="<local_path_to_OfficeThemes.css>" rel="stylesheet" type="text/css" />

为此,请在 Visual Studio 中执行以下步骤。To do this in Visual Studio, follow these steps.

在 PowerPoint 加载项中引用 OfficeThemes.css 的具体步骤To reference OfficeThemes.css in your add-in for PowerPoint

  1. 在 Visual Studio 2017 中,打开或创建新的 Office 加载项项目。In Visual Studio 2017, open or create a new Office Add-in project.

  2. 在实现加载项 UI 的 HTML 页面(如默认模板中的 Home.html)中,在 <head> 标记内添加以下引用 OfficeThemes.css 文件的 <link> 标记:In the HTML pages that implement the UI of your add-in, such as Home.html in the default template, add the following <link> tag inside the <head> tag that references the OfficeThemes.css file:

    <link href="../../Content/OfficeThemes.css" rel="stylesheet" type="text/css" />
    

若要使用非 Visual Studio 工具创建加载项,请添加相同格式的 <link> 标记,同时指定与加载项一起部署的 OfficeThemes.css 副本的相对路径。If you are creating your add-in with a tool other than Visual Studio, add a <link> tag with the same format specifying a relative path to the copy of OfficeThemes.css that will be deployed with your add-in.

在内容加载项的 HTML 页面中使用 OfficeThemes.css 文档主题类Using OfficeThemes.css document theme classes in your content add-in's HTML page

以下演示了使用 OfficeTheme.css 文档主题类的内容 外接程序 中的 HTML 简单示例。有关与文档主题中 12 种颜色和 2 种字体对应的 OfficeThemes.css 类的详细信息,请参阅 适用于内容加载项的主题类The following shows a simple example of HTML in a content add-in that uses the OfficeTheme.css document theme classes. For details about the OfficeThemes.css classes that correspond to the 12 colors and 2 fonts used in a document theme, see Theme classes for content add-ins.

<body>
    <div id="themeSample" class="office-docTheme-primary-fontColor ">
        <h1 class="office-headerFont-latin">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent1-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent2-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent3-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent4-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent5-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent6-bgColor">Hello world!</h1> 
        <p class="office-bodyFont-latin office-docTheme-secondary-fontColor">Hello world!</p> 
    </div>
</body>

在运行时,如果插入到的演示文稿使用默认“Office 主题”****,内容加载项如下所示:At runtime, when inserted into a presentation that uses the default Office Theme, the content add-in is rendered like this.

运行 Office 主题的内容应用

如果将演示文稿更改为使用其他主题或自定义演示文稿主题,OfficeThemes.css 类指定的字体和颜色会动态更新为,与演示文稿主题的字体和颜色相对应。使用与上述相同的 HTML 示例,如果加载项插入到的演示文稿使用 Facet 主题,加载项如下所示。If you change the presentation to use another theme or customize the presentation's theme, the fonts and colors specified with OfficeThemes.css classes will dynamically update to correspond to the fonts and colors of the presentation's theme. Using the same HTML example as above, if the presentation the add-in is inserted into uses the Facet theme, the add-in rendering will look like this.

运行 Facet 主题的内容应用

在任务窗格加载项的 HTML 页面中使用 OfficeThemes.css Office UI 主题类Using OfficeThemes.css Office UI theme classes in your task pane add-in's HTML page

除文档主题之外,用户还可以为所有 Office 应用的 Office 用户界面自定义颜色主题,具体方法是使用“文件”**** > “帐户”**** > “Office 主题”**** 下拉框。In addition to the document theme, users can customize the color scheme of the Office user interface for all Office applications using the File > Account > Office Theme drop-down box.

以下演示了 HTML 的简单示例,该示例在任务窗格 外接程序 中使用 OfficeTheme.css 类指定字体颜色和背景色。有关与 Office UI 主题字体和颜色对应的 OfficeThemes.css 类的详细信息,请参阅 适用于任务窗格加载项的主题类The following shows a simple example of HTML in a task pane add-in that uses OfficeTheme.css classes to specify font color and background color. For details about the OfficeThemes.css classes that correspond to fonts and colors of the Office UI theme, see Theme classes for task pane add-ins.

<body> 
    <div id="content-header" class="office-officeTheme-primary-fontColor office-officeTheme-primary-bgColor"> 
        <div class="padding">
            <h1>Welcome</h1>
        </div> 
    </div> 
    <div id="content-main" class="office-officeTheme-secondary-fontColor office-officeTheme-secondary-bgColor"> 
        <div class="padding"> 
            <p>Add home screen content here.</p> 
            <p>For example:</p> 
            <button id="get-data-from-selection">Get data from selection</button> 
            <p><a target="_blank" class="office-a" href="https://go.microsoft.com/fwlink/?LinkId=276812">Find more samples online...</a></p>
        </div>
    </div>
</body> 

当在 PowerPoint 中运行时,如果“文件”**** > “帐户”**** > “Office 主题”**** 设置为“白色”****,任务窗格加载项如下所示。When running in PowerPoint with File > Account > Office Theme set to White, the task pane add-in is rendered like this.

使用 Office 白色主题的任务窗格


如果将 Office 主题更改为深灰色,OfficeThemes.css 类指定的字体和颜色会动态更新,如下所示。If you change OfficeTheme to Dark Gray, the fonts and colors specified with OfficeThemes.css classes will dynamically update to render like this.

使用 Office 深灰色主题的任务窗格


OfficeTheme.css 类OfficeTheme.css classes

OfficeThemes.css 文件包括两组类,您可用于 PowerPoint 内容和任务窗格加载项。The OfficeThemes.css file contains two sets of classes you can use with your content and task pane add-ins for PowerPoint.

适用于内容加载项的主题类Theme classes for content add-ins

OfficeThemes.css 文件提供与文档主题中的 2 种字体和 12 种颜色对应的类。这些类很适合用于 PowerPoint 内容加载项,以便您的加载项字体和颜色与它要插入的演示文稿相协调。The OfficeThemes.css file provides classes that correspond to the 2 fonts and 12 colors used in a document theme. These classes are appropriate to use with content add-ins for PowerPoint so that your add-in's fonts and colors will be coordinated with the presentation it's inserted into.

适用于内容加载项的主题字体Theme fonts for content add-ins

Class 说明Description
office-bodyFont-eastAsian 正文字体的东亚名称。East Asian name of the body font.
office-bodyFont-latin 正文字体的拉丁名称。默认为"Calabri"Latin name of the body font. Default "Calabri"
office-bodyFont-script 正文字体的脚本名称。Script name of the body font.
office-bodyFont-localized 正文字体的本地化名称。根据当前在 Office 中使用的区域性,指定默认字体名称。Localized name of the body font. Specifies the default font name according to the culture currently used in Office.
office-headerFont-eastAsian 标题字体的东亚名称。East Asian name of the headers font.
office-headerFont-latin 标题字体的拉丁名称。默认为"Calabri Light"Latin name of the headers font. Default "Calabri Light"
office-headerFont-script 标题字体的脚本名称。Script name of the headers font.
office-headerFont-localized 标题字体的本地化名称。根据当前在 Office 中使用的区域性,指定默认字体名称。Localized name of the headers font. Specifies the default font name according to the culture currently used in Office.

适用于内容加载项的主题颜色Theme colors for content add-ins

Class 说明Description
office-docTheme-primary-fontColor 首选字体颜色。默认为 #000000Primary font color. Default #000000
office-docTheme-primary-bgColor 首选字体背景色。默认为 #FFFFFFPrimary font background color. Default #FFFFFF
office-docTheme-secondary-fontColor 辅助字体颜色。默认为 #000000Secondary font color. Default #000000
office-docTheme-secondary-bgColor 辅助字体背景色。默认为 #FFFFFFSecondary font background color. Default #FFFFFF
office-contentAccent1-color 字体个性色 1。默认为 #5B9BD5Font accent color 1. Default #5B9BD5
office-contentAccent2-color 字体个性色 2。默认为 #ED7D31Font accent color 2. Default #ED7D31
office-contentAccent3-color 字体个性色 3。默认为 #A5A5A5Font accent color 3. Default #A5A5A5
office-contentAccent4-color 字体个性色 4。默认为 #FFC000Font accent color 4. Default #FFC000
office-contentAccent5-color 字体个性色 5。默认为 #4472C4Font accent color 5. Default #4472C4
office-contentAccent6-color 字体个性色 6。默认为 #70AD47Font accent color 6. Default #70AD47
office-contentAccent1-bgColor 背景个性色 1。默认为 #5B9BD5Background accent color 1. Default #5B9BD5
office-contentAccent2-bgColor 背景个性色 2。默认为 #ED7D31Background accent color 2. Default #ED7D31
office-contentAccent3-bgColor 背景个性色 3。默认为 #A5A5A5Background accent color 3. Default #A5A5A5
office-contentAccent4-bgColor 背景个性色 4。默认为 #FFC000Background accent color 4. Default #FFC000
office-contentAccent5-bgColor 背景个性色 5。默认为 #4472C4Background accent color 5. Default #4472C4
office-contentAccent6-bgColor 背景个性色 6。默认为 #70AD47Background accent color 6. Default #70AD47
office-contentAccent1-borderColor 边框个性色 1。默认为 #5B9BD5Border accent color 1. Default #5B9BD5
office-contentAccent2-borderColor 边框个性色 2。默认为 #ED7D31Border accent color 2. Default #ED7D31
office-contentAccent3-borderColor 边框个性色 3。默认为 #A5A5A5Border accent color 3. Default #A5A5A5
office-contentAccent4-borderColor 边框强调文字颜色 4。默认为 #FFC000Border accent color 4. Default #FFC000
office-contentAccent5-borderColor 边框个性色 5。默认为 #4472C4Border accent color 5. Default #4472C4
office-contentAccent6-borderColor 边框个性色 6。默认为 #70AD47Border accent color 6. Default #70AD47
office-a 超链接颜色。默认为 #0563C1Hyperlink color. Default #0563C1
office-a:visited 已访问的超链接颜色。默认为 #954F72Followed hyperlink color. Default #954F72

以下屏幕截图显示,在使用默认 Office 主题时,分配给 外接程序 文本的所有主题颜色类(两种超链接颜色除外)的示例。The following screenshot shows examples of all of the theme color classes (except for the two hyperlink colors) assigned to add-in text when using the default Office theme.

默认 Office 主题颜色示例

适用于任务窗格加载项的主题类Theme classes for task pane add-ins

OfficeThemes.css 文件提供的类与分配给 Office 应用程序 UI 主题所使用的字体和背景的 4 种颜色对应。这些类很适合用于 PowerPoint 相关的任务加载项,以便您的加载项颜色与其他 Office 内置的任务窗格协调。The OfficeThemes.css file provides classes that correspond to the 4 colors assigned to fonts and backgrounds used by the Office application UI theme. These classes are appropriate to use with task add-ins for PowerPoint so that your add-in's colors will be coordinated with the other built-in task panes in Office.

适用于任务窗格加载项的主题字体和背景色Theme font and background colors for task pane add-ins

Class 说明Description
office-officeTheme-primary-fontColor 首选字体颜色。默认为 #B83B1DPrimary font color. Default #B83B1D
office-officeTheme-primary-bgColor 首选背景色。默认为 #DEDEDEPrimary background color. Default #DEDEDE
office-officeTheme-secondary-fontColor 辅助字体颜色。默认为 #262626Secondary font color. Default #262626
office-officeTheme-secondary-bgColor 辅助背景色。默认为 #FFFFFFSecondary background color. Default #FFFFFF

另请参阅See also