Использование тем документов в надстройках PowerPointUse 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, чтобы цвета ваших надстроек области задач соответствовали цветам встроенных областей задач. Эти цвета будут динамически обновляться при изменении темы интерфейса Office.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 цветов. Десять из них доступны при выборе шрифта, фона и других цветовых настроек презентации с помощью палитры.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.

Цветовая палитра

Чтобы просмотреть или настроить все 12 цветов темы в PowerPoint, в группе Варианты на вкладке Дизайн нажмите кнопку раскрывающегося меню Дополнительные параметры и выберите Цвета > Настроить цвета, чтобы открыть диалоговое окно Создание новых цветов темы.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 использует их для создания автоматических текстовых стилей. Кроме того, они используются в коллекциях текстовых экспресс-стилей и WordArt. Эти два шрифта отображаются вверху средства выбора шрифтов.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.

Диалоговое окно "Создание новых шрифтов темы"

Шрифты и цвета темы для пользовательского интерфейса OfficeOffice UI theme fonts and colors

Office также позволяет выбирать между несколькими стандартными темами, которые определяют несколько цветов и шрифтов, используемых в пользовательском интерфейсе всех приложений Office. Для этого воспользуйтесь выпадающим меню, которое находится в меню Файл > Учетная запись > Тема 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 позволит вам согласовать внешний вид надстройка с темой презентации, а использование этого файла с надстройками областей задач для PowerPoint позволит согласовать внешний вид надстройка со шрифтами и цветами пользовательского интерфейса Office.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 StudioTo 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, файл OfficeThemes.css создается автоматически для любых создаваемых проектов надстроек PowerPoint.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. В обозревателе решений щелкните правой кнопкой мыши папку Content в проекте **имя_проекта****Web** и выберите Добавить > Таблица стилей.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 инструмент для создания надстройка, скопируйте 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.

Добавление ссылок на файл OfficeThemes.css в HTML-страницах надстройкиReferencing OfficeThemes.css in your add-in's HTML pages

Чтобы использовать файл OfficeThemes.css в проекте надстройки, добавьте тег <link>, который ссылается на файл OfficeThemes.css, внутри тега <head> веб-страницы надстройки (HTML, ASPX или PHP) в следующем формате: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.

Добавление ссылки на OfficeThemes.css в надстройке для PowerPointTo 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. На HTML-страницах надстройки, например Home.html в шаблоне по умолчанию, добавьте следующий тег <link>, который ссылается на файл OfficeThemes.css, внутри тега <head>: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" />
    

При использовании другого инструмента добавьте тег <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.

Использование классов OfficeThemes.css для темы документа на HTML-странице контентной надстройкиUsing OfficeThemes.css document theme classes in your content add-in's HTML page

Ниже представлен простой пример HTML-кода в контентной надстройке, которая использует классы OfficeTheme.css для темы документа. Более подробные сведения о классах OfficeThemes.css, которые соответствуют используемым в теме документа 12 цветам и 2 шрифтам, можно узнать в разделе Классы тем для контентных надстроек.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-страница надстройки будет выглядеть так: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.

Контентное приложение, в котором используется тема "Аспект"

Использование классов OfficeThemes.css для темы пользовательского интерфейса Office в HTML-странице надстройки области задачUsing OfficeThemes.css Office UI theme classes in your task pane add-in's HTML page

Помимо темы документа, пользователи могут настраивать цветовую схему приложения 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 для указания цвета шрифта и фона. Более подробную информацию о классах OfficeThemes.css, которые соответствуют шрифтам и цветам темы пользовательского интерфейса Office, можно получить в разделе Классы тем для надстроек области задач.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.cssOfficeTheme.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 Локализованное имя шрифта основного текста. Задает название шрифта по умолчанию в соответствии с текущей культурой, используемой в OfficeLocalized 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 Локализованное название шрифта заголовков. Задает название шрифта по умолчанию в соответствии с текущей культурой, используемой в OfficeLocalized 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 представлены классы, соответствующие 4 цветам, которые указаны для шрифтов и фонов, использующихся темой пользовательского интерфейса приложения Office. Эти классы предназначены для использования с надстройками области задач для 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 Основной цвет шрифта. Значение по умолчанию — #B83B1D.Primary font color. Default #B83B1D
office-officeTheme-primary-bgColor Основной цвет фона. Значение по умолчанию — #DEDEDE.Primary background color. Default #DEDEDE
office-officeTheme-secondary-fontColor Дополнительный цвет шрифта. По умолчанию #262626Secondary font color. Default #262626
office-officeTheme-secondary-bgColor Дополнительный цвет фона. Значение по умолчанию — #FFFFFF.Secondary background color. Default #FFFFFF

См. такжеSee also