Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Illustration of three heads, side on, with light illuminating from their glasses. by Parham Marandi

Dark mode for the TinyMCE rich text editor

Ben Long

December 15th, 2019

Written by

Ben Long
Ben Long

Artwork by

Parham Marandi

Once upon a time, dark mode was not an option — it was the only option in early UIs. We especially remember coding green on black, and writing white on blue, before the radical switch to black on white. And following that, for the last twenty years or so, developers everywhere have been setting up their own environments to revert back to a preferred dark mode.

But, now, it’s not just developers who are keen for this mod. More people want to flick the switch on their devices and go dark.

 

I'll stop wearing black when they make a darker color.

Emmanuelle Alt

 

Dark mode has been growing in popularity, being one of the most common customizations of 2019. It’s been introduced in loads of apps including Microsoft Outlook, Gmail for Android, Twitter, Facebook Messenger, Reddit, Slack, and YouTube.

Three reasons people say they want to use dark mode:

  • It’s easier on your eyes (especially at night)
  • For improved readability of text
  • To save battery life when using a mobile device

We also think it’s just plain cool. 😎

But, more importantly, we want to make sure we're providing our developers with what they need to keep delighting their end users.

 

TinyMCE dark mode

To keep up with the growing trend, we now provide options to configure dark mode for the TinyMCE rich text editor to match your applications and user preferences.

TinyMCE 5.1 with dark mode configured.

 

Configure dark mode for TinyMCE

There are two ways to configure dark mode for TinyMCE.

You can initialize the editor with the following settings:

skin: "oxide-dark",
content_css: "dark"

Alternatively, you can initialize the mode depending on the user’s preference as specified in their operating system:

skin: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "oxide-dark" : ""),
content_css: (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "")

For more information, refer to our documentation about dark mode and customizing skins.

 

Try it now

Paste the following code into a TinyMCE fiddle and click Run:

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    skin: "oxide-dark",
    content_css: "dark"
});
</script>

<form method="post" action="dump.php">
    <textarea name="content"></textarea>
</form>

 

What’s next?

While you’re here, find out more about the Tiny Skins and Icon Packs premium plugin.

By the way, did you see the wicked Halloween skin we put out this year? It was developed with our skin tool, which is currently under development. Stay tuned for its release...

TinyMCE 5 Skin Tool (coming soon).

 

TinyMCEDesign
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Snow capped mountains with perfect reflection in water below.
    Trends & Inspiration

    The invention of copy and paste

    by Ben Long in Trends & Inspiration
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor