Did you know that you can customize the theme of the Grammarly Text Editor Plugin so that it looks and feels like the rest of your app? Theming the plugin is a useful feature, and, honestly, quite fun to tinker with. To give you some examples, I decided to look for inspiration from one of my favorite artists of all time: the incredible Taylor Swift.

When Taylor announced her new album Midnights, I knew I needed to find a way to celebrate. Watching her TikToks to get clues about the track list was a good start (how long has Karma been in her vault, and is the song about Kanye?), but it wasn’t sufficient. And then it hit me: I could customize the theme of the Grammarly Text Editor Plugin to match every one of her albums. So that’s what I did.

I began by creating a web app where you can journal about Taylor’s albums. Inside the app, I created uniquely styled pages inspired by each of her albums. On each page, I included a text editor that uses the Grammarly Text Editor Plugin. Then I themed the plugin to match.

In this post, I’ll share the themes I selected for a few of her albums. I hope you enjoy my love story with Taylor Swift.

Live stream

If you prefer watching a video over reading a blog post, don’t worry. I’ve got you covered. Check out this recording of a live stream I hosted with Brian Schiller, where we created the themes described below.

Fearless

I was inspired by Taylor’s bedazzled guitar as I designed the webpage for her sophomore album Fearless. I found a picture of a sparkly guitar with gold trim for the page’s background. 

The Text Editor Plugin has several customization options. In this case, I chose to customize the plugin’s interactive color (used for things like buttons and menu selection background colors), the default border radius (defines how round the edges of buttons are), and the default card border radius (defines how round the edges of suggestion cards are).

I reused the guitar’s gold trim color in both the button color and the plugin’s interactive color. I replicated the curves of the guitar in the round edges of the text editor, the button, and the plugin elements by setting the border radius of each to 10px.

1989

1989 was the first of Taylor’s albums I purchased (previously, I stuck to singles), and I loved all of the polaroids Taylor included in the album’s art. As I developed the page for 1989, including polaroids was a must, so I found an image with a collection of polaroids to use as the background picture. (I may have been more than a little excited when I realized one of the polaroid pictures is of a person holding a cat!) 

In addition to customizing the plugin’s interactive color, default border radius, and card border radius as I did with the pages for the earlier albums, I decided to customize the plugin’s default font family. I chose a handwriting font that mimicked the handwritten captions on the polaroids in the album art. 

Lover

Taylor reinvented herself with her release of Lover. Her album art featured soft, pink clouds, so I included those on the page. Many of the songs on Lover were happy and light, so I gave the elements on the page large, rounded corners. I chose various shades of pink for the page and gave the text editor plugin a dark pink interactive color to match the theme. 

The theme customizations I set for the <grammarly-editor-plugin> are automatically applied to both the suggestion cards and the Grammarly button menu, which creates a cohesive experience. Note that if I explicitly added the <grammarly-button> web component to my page, I would need to set the theme customizations for both the <grammarly-editor-plugin> and the <grammarly-button>. See the docs on customization for more information.

Folklore

Folklore was my 2020 soundtrack. I played it when I needed a long, hard cry. It’s a vibe. The album cover features a black and white portrait of Taylor standing in the woods. This portrait inspired me as I selected a black and white photo of the forest for my page. 

The plugin’s light mode would have looked out of place on this dark page, so I chose to use the plugin’s dark mode. Note that the plugin has options for rendering in light mode, dark mode, or light or dark mode based on the end user’s operating system preference. Check out the customization docs for more information. 

Wrapping Up

In this post, I shared some of the Grammarly Text Editor Plugin themes I created for my journal app inspired by Taylor Swift’s albums. You can try out the app for yourself and see the themes I created for every one of her albums on CodeSandbox.

I’d love to see your plugin themes inspired by Taylor Swift or your other favorite artists! You can learn more about all the ways you can customize the plugin to match your app’s UI on the customization page in our docs. Create a webpage (you can start by forking mine if you’d like), and share a link or a screenshot in a new discussion in the Grammarly for Developers repo. I can’t wait to see what you create!

Take the plugin and make it your own!