Yomichan Custom CSS

This is an optional tutorial.

If you want to setup Yomichan, you can find that here

Yomichan Update

Yomichan has been updated and since changed old classes and added new ones. This guide will no longer work. Please come back later when this message has been removed.

The appearance of the Yomichan pop-up window can be modified with custom CSS found in the settings.

In the v2 settings page, it can be accessed by going into "Appearance" then "Configure custom CSS" and "Popup CSS"

There are many, many advanced modifications you can make with custom CSS, however, I will only go through a few examples.

Headword

The headword can be modified with the classes below:

/* For kanji */
.kanji-link {

}

/* For kana & alphanumeric characters */
.source-text {

}

/* For furigana */
ruby {

}

Furigana Color

If no color is specified for the ruby selector, it will be overridden by the source-text class.

Example: changing font size and color of the headword

With the following CSS:

.kanji-link {
    font-size: 25px;
    color: #00FBFF;

}

.source-text {
    font-size: 25px;
    color: #FA73FF;

}

The result:

This demonstrates differing font colors for kanji and kana. You may edit this to your heart's content.

Definition

The definition can be modified with the class below:

.glossary {

}

Example: changing font of definitions

Custom Fonts

To use a certain font in Yomichan, the font must be installed on your system. You can find installed fonts in:
Windows: C:\Windows\Fonts
Linux: /usr/share/fonts or /usr/share/local/fonts or $HOME/.fonts
macOS: /System/Library/Fonts or $HOME/Library/Fonts
Newly installed fonts may require a system restart to be detected by Yomichan.

With the following CSS:

.glossary {
    font-family: MS Mincho; /* Japanese serif font provided in Windows */

}

The result:

This demonstrates the changing of font for definitions to MS Mincho. Linux users may be able to use Noto Serif CJK JP as an alternative.

Font installed, but not detecting?

Try using quotation marks "" e.g. font-family: "07やさしさゴシック";

Example: Using DJT's quiz font (funny)

With the following CSS:

/* You must have 衡山毛筆フォント行書 installed on your system for this to work. */
.glossary {
       font-family: "衡山毛筆フォント行書";

}

The result:

You may edit this to your heart's content.

Tags

Tags can be modified with the classes below:

.tag {

}

.tag-label {

}

.tag-label-content {

}

Example: Removing all tags

With the following CSS:

.tag {
    display: none;

}

The result:

You may edit this to your heart's content.

Example: Changing color of tags

You can change the color of tags by changing the following variables below:

:root { /* Light Theme */ 
# :root[data-theme="dark"]  { /* Uncomment for dark theme */

    --tag-text-color:
    --tag-border-color:
    --tag-default-background-color:
    --tag-name-background-color:
    --tag-expression-background-color:
    --tag-popular-background-color:
    --tag-frequent-background-color:
    --tag-archaism-background-color:
    --tag-dictionary-background-color:
    --tag-frequency-background-color:
    --tag-part-of-speech-background-color:
    --tag-search-background-color:
    --tag-pitch-accent-dictionary-background-color:

}

Example: Full Nord Theme

A full Nord theme I made for Yomichan can be found below:

body {
    background: #2E3440;

}

.kanji-link {
    color: #ebffff;

}

.source-text {
    color: #ebffff;

}


.glossary {
    color: #ebffff;

}


:root {
    --background-color: #2E3440;
    --tag-text-color: white;
    --tag-border-color: transparent
    --tag-default-background-color: #88C0D0;
    --tag-name-background-color: #88C0D0;
    --tag-expression-background-color: #88C0D0;
    --tag-popular-background-color: #88C0D0;
    --tag-frequent-background-color: #88C0D0;
    --tag-archaism-background-color: #88C0D0;
    --tag-dictionary-background-color: #8FBCBB;
    --tag-frequency-background-color: #81A1C1;
    --tag-part-of-speech-background-color: #88C0D0;
    --tag-search-background-color: #88C0D0;
    --tag-pitch-accent-dictionary-background-color: #5E81AC;
    --accent-color: #8FBCBB;
    --text-color: #ebffff;
    --pitch-accent-annotation-color: #ebffff;
    --input-background-color: #3B4252;
    --reason-text-color: #5E81AC;
    --notification-text-color: #ebffff;
    --notification-background-color: #3B4252;
    --progress-bar-track-color: #D8DEE9;
    --light-border-color: #E5E9F0;
    --sidebar-background-color: #2E3440;
    --sidebar-button-background-color: transparent;
    --sidebar-button-background-color-hover: #81A1C1;
    --sidebar-button-background-color-active: #6d88a3;
    --sidebar-button-danger-background-color: transparent;
    --sidebar-button-danger-background-color-hover: #BF616A;
    --sidebar-button-danger-background-color-active: #8a373f;
    --sidebar-button-icon-color: #ebffff;
    --sidebar-button-disabled-icon-color: #808c8c;
    --sidebar-button-danger-icon-color: #ebffff;

}

::-webkit-scrollbar {
    display: none;

}

The result:

Background

Background can be edited with the selector below:

body {

}

Example: Changing background color

With the following CSS:

body {
    background: #FFA8F8;

}

The result:

You may edit this to your heart's content.

Using image as background

Chromium instructions for now

To do this, you must install Yomichan dev build from GitHub instead of the Chrome Web Store, this is because we will be tampering with the files of the extension, which will be flagged if you get it from the Chrome Web Store.
You can find it below.
[GitHub]

Yomichan Data

All Yomichan data including dictionaries will be reset, you may be able to just copy the files over from your current Yomichan installation though.

Download yomichan-chrome-dev.zip and unzip it anywhere on your computer.
Now go to chrome://extensions and enable Developer Mode in the top right.
Now click "Load Unpacked" and select the folder the .zip was extracted to.

Now go to your Yomichan path which should be the same place you unzipped it and put your desired image in the fg folder.

Now you can do the following CSS below.

body {
   background-image: url("name_of_file.png") !important;

}

The result:

Miscellaneous

Some misc. modifications you can do which I found cool.

Removing current entry indicator

Since Yomichan was updated, a blue indicator has been added. Which has been an annoyance for many long time Yomichan users.

With the following CSS:

.term-expression-current-indicator {
    display: none;

}

The result:

Removing progress bar

With the following CSS:

.top-progress-bar-container {
    display: none;

}

Indicator and progress bar colors

Alternatively, if you don't like the current color of the indicator and bar, you can change it rather than removing it.
You can add the pseudo-class selector and custom property below:

:root {
    --accent-color: #FF00DD; /* Change color to a pink */
    --progress-bar-track-color: #00F7FF; /* Change bar track color to a blue */

}

If you are using dark theme you need to have this instead:

:root[data-theme="dark"]  {

The result:

Removing Edict markers

In Edict dictionaries such as JMdict and KireiCake, there are markers that look like ○ which can be annoying for some.
You can remove it by using the CSS below:

.term-glossary-list {
  padding: 0;
  list-style-type: none;

} 

The result:

Light / Dark mode varying CSS

An example of varying CSS for light / dark modes can be found below.

:root[data-theme="dark"] {
    --glossary-color: #a89984;
    --ruby-color: #b8bb26;
    --kanji-text-color: #fabd2f;
    --background-color: #282828;
    --accent-color: #689d6a;
    --progress-bar-track-color: #458588;

}

:root {
    --glossary-color: #504945;
    --ruby-color: #98971a;
    --kanji-text-color: #d79921;
    --background-color: #fbf1c7;
    --accent-color: #689d6a;
    --progress-bar-track-color: #458588;

}

.kanji-link {
    font-family: UD Digi Kyokasho N-R;

}

ruby {
    color: var(--ruby-color);

}

.source-text {
    font-family: UD Digi Kyokasho N-R;

}

.term-glossary {
    color: var(--glossary-color);

}