---
title: "tinymce.Theme"
description: "TinyMCE theme pseudo class. Allows for a custom theme to be used with TinyMCE when registered using the ThemeManager."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/apis/tinymce.theme/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/apis/tinymce.theme/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 346
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../../latest/apis/tinymce.theme/).
# tinymce.Theme

TinyMCE theme pseudo class. Allows for a custom theme to be used with TinyMCE when registered using the ThemeManager.

This is a pseudo class that describes how to create a custom theme for TinyMCE.

See AddOnManager for more information about the methods available on the ThemeManager instance.

**Warning**: Much of TinyMCE’s functionality is provided by the default Silver theme. Creating a custom theme may require the re-implementation of this functionality. To change TinyMCE’s appearance, Tiny recommends changing the Skin instead.

## Examples

```javascript
tinymce.ThemeManager.add('MyTheme', function(editor) {
    // Setup up custom UI elements in the dom
    var div = document.createElement('div');
    var iframe = document.createElement('iframe');
    document.body.appendChild(div);
    document.body.appendChild(iframe);

    // Themes should fire the SkinLoaded event once the UI has been created and all StyleSheets have been loaded.
    editor.on('init', function() {
        editor.fire('SkinLoaded');
    });

    // Themes must return a renderUI function that returns the editorContainer. If the editor is not running in inline mode, an iframeContainer should also be returned.
    var renderUI = function() {
        return {
            editorContainer: div,
            iframeContainer: iframe
        };
    };

    // Return the renderUI function
    return {
        renderUI: renderUI
    };
});
```