在 PowerPoint 加载项中使用 Office 文档主题

Office 主题 一部分包括视觉协调的字体和颜色集，可将其应用于演示文稿、文档、工作表以及电子邮件。 若要在 PowerPoint 中应用或自定义演示文稿的主题，请使用功能区“设计”选项卡上的“主题和变体”组。 PowerPoint 使用默认 Office 主题分配新的空白演示文稿，但您可以选择“ 设计 ”选项卡上提供的其他主题、从 Office.com 下载其他主题，或创建和自定义自己的主题。

使用 OfficeThemes.css，以两种方式设计与 PowerPoint 协调的加载项。

• 在 PowerPoint 内容加载项中。 使用 OfficeThemes.css 的文档主题类可以指定与内容外接程序插入到的演示文稿主题相匹配的字体和颜色。 如果用户更改或自定义演示文稿的主题，这些字体和颜色将动态更新。

• 在 PowerPoint 任务窗格加载项中。 使用 OfficeThemes.css 的 Office UI 主题类指定 UI 中使用的相同字体和背景色，以便任务窗格加载项与内置任务窗格的颜色相匹配。 如果用户更改 Office UI 主题，这些颜色将动态更新。

文档主题颜色

每个 Office 文档主题定义了 12 种颜色。 通过颜色选取器在演示文稿中设置字体、背景和其他颜色设置时，可以使用其中 10 种颜色。

若要查看或自定义 PowerPoint 中完整的 12 种主题颜色集，请在“设计”选项卡上的“变体”组中展开“更多”下拉列表，然后选择“颜色>自定义颜色”以显示“创建新主题颜色”对话框。

前四种颜色适用于文本和背景。 使用浅色创建的文本始终在深色背景上清晰显示，使用深色创建的文本始终在浅色背景上清晰显示。 接下来六种颜色是个性色，始终在四种潜在背景色上可见。 最后两种颜色适用于超链接和已访问过的超链接。

文档主题字体

每个 Office 文档主题还定义了两种字体：一种用于标题，另一种用于正文文本。 PowerPoint 使用这些字体来构造自动文本样式。 此外，文本和“艺术字”的“快速样式”库使用这些相同的主题字体。 使用字体选取器选择字体时，这两种字体就是最靠上的两个选项。

若要查看或自定义 PowerPoint 中的主题字体，请在“设计”选项卡上的“变体”组中展开“更多”下拉列表，然后选择“字体>自定义字体”以显示“创建新主题字体”对话框。

Office UI 主题字体和颜色

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. 为此，请使用“ 文件>帐户>Office 主题 ”下拉列表 (任何 Office 应用程序) 。

OfficeThemes.css 包括可在 PowerPoint 的任务窗格外接程序中使用的类，以便它们使用相同的字体和颜色。 这可使您设计与内置任务窗格外观一致的任务窗格加载项。

使用OfficeThemes.css

将 OfficeThemes.css 文件与适用于 PowerPoint 的内容加载项配合使用，可以协调外接程序的外观，并将主题应用于它运行的演示文稿。 将 OfficeThemes.css 文件与适用于 PowerPoint 的任务窗格加载项配合使用，可让你使用 Office UI 的字体和颜色来协调加载项的外观。

将 OfficeThemes.css 文件添加到项目

使用以下步骤将 OfficeThemes.css 文件添加并引用到外接程序项目。

1. 在解决方案资源管理器中，右键单击“ (”或选择并按住) project_name Web 项目中的“内容”文件夹project_name，选择“添加”，然后选择“样式表”。

2. 将新的样式表命名为“OfficeThemes”。

   重要

   必须将样式表命名为 OfficeThemes，否则在用户更改主题时动态更新加载项字体和颜色的功能将无法正常运行。

3. 删除文件中的默认 body 类 (body {})，并将以下 CSS 代码复制并粘贴到文件中。

   /* 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 以外的工具创建加载项，请将上一步中的 CSS 代码复制到文本文件中。 然后，将文件另存为 OfficeThemes.css。

加载项 HTML 页面中的引用OfficeThemes.css

若要在外接程序项目中使用 OfficeThemes.css 文件，请在网页的 标记内<head>添加一个<link>引用 OfficeThemes.css 文件的标记， (如 .html、.aspx或.php文件) ，以此格式实现外接程序的 UI。

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

若要在 Visual Studio 中执行此作，请执行以下步骤：

1. 选择“创建新项目”。

2. 使用搜索框，输入“加载项”。 选择“PowerPoint 外接程序”，然后选择“下一步”。

3. 对项目命名，然后选择“创建”。

4. 在“创建 Office 加载项”对话框窗口中，选择“将新功能添加到 PowerPoint”，再选择“完成”以创建项目。

5. 此时，Visual Studio 创建解决方案，且它的两个项目显示在“解决方案资源管理器”中。 Home.html 文件将在 Visual Studio 中打开。

6. 在实现外接程序 UI 的 HTML 页（例如默认模板中的 Home.html）中，在引用 OfficeThemes.css 文件的标记中添加<head>以下<link>标记。

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

如果要使用 Visual Studio 以外的工具创建外接程序，请添加具有相同 <link> 格式的标记，以指定将随外接程序一起部署的 OfficeThemes.css 副本的相对路径。

在内容外接程序的 HTML 页面中使用OfficeThemes.css文档主题类

以下演示了使用 OfficeTheme.css 文档主题类的内容 外接程序 中的 HTML 简单示例。 有关与文档主题中使用的 12 种颜色和 2 种字体对应的 OfficeThemes.css 类的详细信息，请参阅 内容外接程序的主题类。

<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 主题的演示文稿时，内容加载项将如下所示呈现。

如果将演示文稿更改为使用其他主题或自定义演示文稿的主题，则 使用OfficeThemes.css 类指定的字体和颜色将动态更新为对应于演示文稿主题的字体和颜色。 使用与上述相同的 HTML 示例，如果加载项插入到的演示文稿使用 Facet 主题，加载项如下所示。

在任务窗格加载项的 HTML 页面中使用OfficeThemes.css Office UI 主题类

除了文档主题外，用户还可以使用“文件>帐户> Office 主题”下拉框为所有 Office 应用程序自定义Office 用户界面的配色方案。

以下演示了 HTML 的简单示例，该示例在任务窗格 外接程序 中使用 OfficeTheme.css 类指定字体颜色和背景色。 有关与 Office UI 主题的字体和颜色对应的 OfficeThemes.css 类的详细信息，请参阅 任务窗格加载项的主题类。

<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 主题”设置为“白色”，任务窗格加载项如下所示。

如果将 OfficeTheme 更改为 深灰色，则 使用 OfficeThemes.css 类指定的字体和颜色将动态更新为如下所示的呈现。

OfficeTheme.css 类

OfficeThemes.css 文件包含两组类，可用于 PowerPoint 的内容和任务窗格加载项。

适用于内容加载项的主题类

OfficeThemes.css 文件提供对应于文档主题中使用的 2 种字体和 12 种颜色的类。 这些类很适合用于 PowerPoint 内容加载项，以便您的加载项字体和颜色与它要插入的演示文稿相协调。

适用于内容加载项的主题字体

适用于内容加载项的主题颜色

以下屏幕截图显示，在使用默认 Office 主题时，分配给 外接程序 文本的所有主题颜色类（两种超链接颜色除外）的示例。

适用于任务窗格加载项的主题类

OfficeThemes.css 文件提供的类对应于分配给 Office 应用程序 UI 主题使用的字体和背景的四种颜色。 这些类适合用于 PowerPoint 的任务外接程序，以便外接程序的颜色与 Office 中的其他内置任务窗格协调。

适用于任务窗格加载项的主题字体和背景色

另请参阅

• 创建 PowerPoint 内容和任务窗格加载项