Styling recipes

Below are examples of style customizations for the Kamite web browser client. They are CSS styles that are read from the custom.css file directly under your config directory. To apply your customizations, save the custom.css file and refresh Kamite’s client browser tab.

Black theme

:root {
  --color-bgm2: #080706;
  --color-bgm1: #0a0908;
  --color-bg: #1d1c1a;
  --color-bg-hl: #252422;
  --color-bg2: #2d2c2a;
  --color-bg2-hl: #363431;
  --color-bg3: #3e3c39;
  --color-bg3-hl: #464441;
  --color-bg4: #4e4c49;
  --color-med: #5e5c59;
  --color-med2: #6e6c6a;
  --color-med3: #7f7b79;
  --color-fg: #e6e6e6;
  --color-fg2: #e6dcd1;
  --color-fg3: #d1ccc6;
  --color-fg4: #b0aca7;
  --color-fg5: #8c8886;
  --color-accA: #fffc63;
  --color-accA2: #cfcd5d;
  --color-accB: #ee98d0;
  --color-accB2: #9a5984;
  --color-accB2-hl: #a85f8f;
  --color-accB2-hl2: #b26999;
  --color-accC: #b5b183;
  --color-success: #81c220;
  --color-warning: #a18236;
  --color-warning-hl: #b59136;
  --color-error: #ba281d;
  --color-error2: #a13d36;
  --color-error2-hl: #b53e36;
}

Note: for the theme to also apply to embedded DeepL, jpdb, etc. frames, the above colour definitions must also be pasted into the corresponding .user.js scripts.

Font faces

:root {
  --font-ui: 'Segoe UI';
  --font-jp: Meiryo;
}

“Current chunk” font sizing

:root {
  --chunk-font-size: 1.5rem;

  /* The default scaling is `1.0`. Note that furigana also scales with
  `--chunk-font-size` */
  --chunk-furigana-font-scale: 1.2;
}

There is also additional dynamic downscaling applied to the furigana text. If you wish to override it, you can set the furigana font size directly instead of using the variables above, like so:

#chunk-label rt {
  font-size: 0.85rem;
}

“Current chunk” font weight

:root {
  --chunk-font-weight: 300;
  --chunk-furigana-font-weight: 300;
}

This would change the respective fonts to a thinner variant. Note that it will not work by itself by default, because a thinner variant of the default font is not included with the program.

“Current chunk” line height

:root {
  /* The default scaling is 1.0. Higher values increase the line height and
    lower values decrease it */
  --chunk-line-height-scale: 0.9;
}

Always reveal chunk translation

/* .profile-vn #chunk-translation { - use this line instead to only reveal it
                                      for the `vn` profile, for example */
#chunk-translation {
  filter: none;
  text-shadow: none;
}