Custom Pitch Accent Color

Customize the color of each pitch accent type.

_kiku_plugin.css

/* [Pick 1] */

/* ────────────────────────────────────────────────────────────────────── */
/* [1] Customize the pitch color for each pitch type */
[data-pitch-type^="heiban"] {
  --color-pitch: #3b82f6; /* Blue */
  --color-pitch-content: #ffffff;
}
[data-pitch-type^="atamadaka"] {
  --color-pitch: #ef4444; /* Red */
  --color-pitch-content: #ffffff;
}
[data-pitch-type^="nakadaka"] {
  --color-pitch: #f59e0b; /* Amber */
  --color-pitch-content: #ffffff;
}
[data-pitch-type^="odaka"] {
  --color-pitch: #10b981; /* Emerald */
  --color-pitch-content: #ffffff;
}
[data-pitch-type^="kifuku"] {
  --color-pitch: #8b5cf6; /* Violet */
  --color-pitch-content: #ffffff;
}

/* ────────────────────────────────────────────────────────────────────── */
/* [2] Only apply color to the pitch graph */
[data-pitch-type]:not(.pitch-field [data-pitch-type]) {
  --color-pitch: var(--color-base-content);
  --color-pitch-content: var(--color-base-100);
}

.sentence-field {
  b {
    --color-pitch: var(--color-base-content-primary);
  }
}

.text-pitch {
  color: var(--color-base-content);
}