Customization

You can customize the Grammarly Text Editor Plugin to match the rest of your application. The visual appearance is managed using CSS variables (officially called CSS custom propertiesopen in new window).

Theming

Beginning in version 1.8.0, you can theme the plugin by customizing:

  • The font family
  • The color of interactive elements (buttons and links)
  • The border-radiusopen in new window for buttons and cards to create rounded or square corners

Here are three examples of how suggestion cards can be styled (the default is on the left):

Three versions of themed suggestion cards. The card on the right uses the Optima font, a pink button, rounded edges on buttons, and square edges on the card.

Note that theming will also apply to settings menus in the plugin.

NameDefaultDescription
--grammarly-default-font-familyArial, sans-serifDefault font family
--grammarly-interactive-color#2551DAPrimary color of interactive elements
--grammarly-default-border-radius4pxBorder radius for buttons
--grammarly-card-border-radius8pxBorder radius for suggestion cards

For example, you can theme the plugin as shown in the right-most card in the image above:

grammarly-editor-plugin {
  --grammarly-default-font-family: Optima, sans-serif;
  --grammarly-interactive-color: #e00697;
  --grammarly-default-border-radius: 30px;
  --grammarly-card-border-radius: 0px;
}

Grammarly’s default theme is designed to meet WCAG 2.1open in new window AA color contrast guidelines for font sizes 14px and below. When customizing the colors of your theme, we recommend choosing a color that passes a color contrast ratio of 4.5:1.

Light and dark modes

Beginning in version 1.8.0, the plugin supports both light and dark modes. In light mode, the background is white and the Grammarly button has a black background. In dark mode, the background is dark gray and the Grammarly button has a white background.

Screenshots of a suggestion card and the Grammarly button menu in both light and dark modes

You can configure whether the plugin renders in light or dark mode using the color-schemeopen in new window CSS property. color-scheme is an inherited propertyopen in new window, so setting the color-scheme on parent elements will impact how the plugin is rendered.

color-schemeDescription
normal (default)Render the plugin in light mode
lightRender the plugin in light mode
darkRender the plugin in dark mode
light darkRender the plugin in light or dark mode based on the end user’s operating system preference

Here is an example of how to set the plugin to render in light or dark mode based on the end user’s operating system preference:

grammarly-editor-plugin {
  color-scheme: light dark;
}

Note that if you use the <grammarly-button> web component to set a custom position for the Grammarly button, <grammarly-button> will not inherit the color scheme from <grammarly-editor-plugin>. In this case, you will need to set the color-scheme on both <grammarly-editor-plugin> and <grammarly-button> or on an element that is a parent to both of them:

grammarly-editor-plugin,
grammarly-button {
  color-scheme: dark;
}

If you choose to customize the plugin’s interactive color, be mindful of how the color will look against the plugin’s light or dark mode rendering. If you use the light dark color scheme, you may want to set a different interactive color for each scheme. You can set the interactive color based on the user’s preference for light or dark mode using the prefers-color-schemeopen in new window CSS media feature:

@media (prefers-color-scheme: light) {
  grammarly-editor-plugin {
    --grammarly-interactive-color: #e00697;
  }
}

@media (prefers-color-scheme: dark) {
  grammarly-editor-plugin {
    --grammarly-interactive-color: #f7b2e0;
  }
}

Grammarly button

By default, the Grammarly button appears in a fixed position relative to the bottom right of the viewport. If fixed positioning works for your app, but the bottom right isn't ideal, you can customize it using Grammarly’s predefined CSS variables.

Alternatively, you can take complete control and place the Grammarly button on the page.

Fixed position

You can customize the position of the Grammarly button using the following CSS variables:

NameDefaultDescription
--grammarly-button-position-bottom24pxGrammarly button fixed position relative to bottom edge of viewport
--grammarly-button-position-leftGrammarly button fixed position relative to left edge of viewport
--grammarly-button-position-right24pxGrammarly button fixed position relative to right edge of viewport
--grammarly-button-position-topGrammarly button fixed position relative to top edge of viewport
--grammarly-button-z-index1000Grammarly button z-indexopen in new window

For example, to shift the Grammarly button over to avoid conflicting with an existing button:

grammarly-editor-plugin {
  --grammarly-button-position-right: 100px;
}
Grammarly button shifted to the left

Custom position

Another option for positioning the Grammarly button is to use the <grammarly-button> custom element. The Grammarly button will render wherever that element is found.

Note that if you do not include the <grammarly-button> custom element, the Grammarly button will still be displayed.

The following example positions the Grammarly button in the footer beside the Submit button.

<form class="feedback">
  <grammarly-editor-plugin>
    <textarea></textarea>
  </grammarly-editor-plugin>

  <footer>
    <grammarly-button></grammarly-button>
    <button type="submit">Submit feedback</button>
  </footer>
</form>
Grammarly button shifted to the left

The <grammarly-button> element is available as a component in the React and Vue SDK packages.

Underlines

You can customize the z-indexopen in new window of suggestion underlines if they are not appearing correctly in your app. This may happen if your app already includes z-index values that the Editor SDK cannot automatically detect.

NameDefaultDescription
--grammarly-underline-z-indexautoUnderline z-index

Introductory text

To provide context for users who are less familiar with Grammarly, suggestion cards include introductory text that appears until users accept or dismiss a suggestion for the first time.

This text can be customized using the introText option to include, for example, your app name:

Suggestion card with custom intro text

English dialect

By default, Grammarly sets the English dialect of a user according to their browser's preferred language settingopen in new window, but if you already have a good idea, then it's best to specify it using documentDialect.

Note that the user can always override the dialect via the Grammarly button menu:

Grammarly button menu with dialect selected

Dynamic CSS updates

CSS variables can be accessed and updated using getPropertyValueopen in new window and setPropertyopen in new window:

const element = document.querySelector("grammarly-editor-plugin");
element.style.setProperty("--grammarly-button-position-left", "8px");

console.log(element.style.getPropertyValue("--grammarly-button-position-left"));

If you want to update the CSS variables after the Grammarly Text Editor SDK has already initialized, you may need to dispatch the following event for the UI to update:

document.documentElement.dispatchEvent(
  new Event("grammarly-theme-change", { bubbles: true })
);
Last Updated: 11/8/2022, 7:34:16 PM