Kagi Translate currently does not support the Custom CSS feature in a consistent way with other Kagi services like Search and Assistant. This limits users’ ability to apply global themes or custom color schemes across all Kagi tools. Specifically, Kagi Translate uses TailwindCSS with hardcoded utility classes instead of CSS variables, making it incompatible with Custom CSS-based theming.
Unlike the Assistant and Search, which both support theming via a shared set of CSS variables (e.g., --primary-100, --primary-800), Kagi Translate uses TailwindCSS classes directly in the markup. As a result:
- Users cannot override colors or themes via CSS variables.
- Atomic class names in Tailwind make global styling through custom CSS difficult or sometimes impossible.
- There is no unified visual experience when switching between Kagi services.
Currently, a user applying the following CSS:
:root {
--primary-25: #1e1e1e;
--primary-100: #252526;
--primary-800: #d4d4d4;
}
will see Kagi Search and Assistant rendered with a custom theme, but Kagi Translate will remain in its default themed Tailwind layout, breaking visual consistency. If Kagi Translate also used these variables, users could achieve a seamless, unified appearance.
