Skip to main content

Styles Guide


Open the extension setting page, then switch to "Style" tab.

The menu items in the "Theme Style" menu on the video page, is the menu items in the "Theme Style" sidebar.

Modify the data of "Them Style" will be automatically saved and updated to the menus of the opened video page.

Get Started

After the first installation, there will be some data by default. To start this tutorial, click "Clear" button to delete all data.

You can click the "Default" button to restore the default data at any time.

You can drag the setting page tab out to create a new window, and open a video page on another window, so that you can check the style settings be applied immediately.

Setup Different Fonts

On video page, when all the "Theme Style" menus are "Close", all subtitles font size by default is 36px. Now we want to change to use different font sizes:

  • The first subtitle use 42px font size.
  • The sencond subtitle use 30px font size.

Define Style

First, switch to the "Component Style" tab, create a new menu item:

  • On the "Name" field, input Large Font.
  • On the "Component" field, select "Whole Text".
  • On the "Font Size" field, click the "+" button to activate the input widget, then set the value to 42 pixel.

Then switch back to the "Theme Style" tab, create a new menu item:

  • On the "Name" field, input First Subtitle.
  • On the "Component Style" field, check the Large Font checkbox, which is created on previous step.

Similar operations:

  • Create a new component style, name is Small Font, font size is 30 pixel.
  • Create a new theme style, name is Sencondary Subtitle, check the component style Small Font checkbox.

Apply Style

Go back to the video page, in the "Theme Style" menu, you can see the menu items First Subtitle and Second Subtitle which are just created, select them for the subtitles, you can see the font size has changed.

Setup Font Color

The default font color is white, now we need to change to another color, such as blue. Continue from above settings, there are two methods.

Method One

In the component style Large Font and Small Font, activate the "Font Color" field and change the color value.

Of course, you can change the name as well to suit the value changes, for example, Large Blue Font, but after renaming, you need to re-check the new name in the "Theme Style" tab.

Method Two

Create a new component style with the name Blue Font, activate the "Font Color" field, and change the color value.

Then in the theme style First subtitle and Second Subtitle, both check the new component style Blue Font checkbox.

The Difference

Both methods can implement the same requirements, depending on your preference:

  • Method one prefers to use different colors separately.
  • Method two prefers to change to a same color by single operation.

If you have many style fileds are set to same value, it is better to use the method two, different theme styles share a same component style.

Rename Issue

If a component style name is AAA, and later it is renamed to BBB, you need to re-check BBB in the theme style. The previously checked but renamed AAA will be grayed out, click it to delete it.


A theme style just a collection of component style, so the latter can be applied with batch, the same as condition style.

You can define multiple theme styles to suit different videos and languages for quick switching.

You can also export the style data, share it with other users or restore it later.