Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/korynthian/chatroom/llms.txt

Use this file to discover all available pages before exploring further.

kChat ships with two built-in themes — Default (Dark) and Default (Light) — as well as an Unstyled mode that strips all visual styling. All three options are selectable directly from the Settings page under Settings → General, with no configuration files to edit.

​
How themes work

When a page loads, settings.js calls confirmCustomCSS(), which checks localStorage for a saved CSS string under the key CSS. If a saved value exists, it is injected immediately as a <style> tag, replacing any previously attached stylesheets. If no value is saved — for example, on a user’s first visit — kChat reads the OS color scheme preference using window.matchMedia and automatically fetches the matching built-in theme file. The fetched CSS is then stored in localStorage.CSS so it persists on future loads. 
if (window.matchMedia('(prefers-color-scheme: light)').matches) {
  fetch('themes/default-light.css')
    .then(response => response.text())
    .then(data => {
      localStorage.setItem('CSS', data);
      confirmCustomCSS();
    })
} else {
  fetch('themes/default-dark.css')
    .then(response => response.text())
    .then(data => {
      localStorage.setItem('CSS', data);
      confirmCustomCSS();
    })
}

​
CSS custom properties

Both built-in themes define their colors exclusively through CSS custom properties declared on the root element. stylesheet.css references these variables throughout — for example, background-color: var(--bg-color) on the body, background-color: var(--msg-bg-color) on message bubbles, and color: var(--msg-timestamp-color) on timestamps. Overriding any of these variables is all it takes to restyle the entire interface. The table below lists every variable defined in the built-in themes along with the value each theme assigns to it.
VariableDescriptionDefault (Dark)Default (Light)
--bg-colorPage background color#373736#c3c3c5
--txt-colorBody text color#c3c3c5#373737
--button-colorButton and link background#3d3d3drgb(170, 170, 170)
--button-txt-colorButton text colorwhite#3d3d3d
--button-hover-colorButton hover background#353535#e0e0e0
--msg-bg-colorMessage bubble background#5f5f5f#5f5f5f
--msg-txt-colorMessage text color#c3c3c5#c3c3c5
--msg-timestamp-colorTimestamp text colorgraygray
--footer-background-colorFooter background color#484848rgb(140, 140, 140)
stylesheet.css references the footer background as var(--footer-bg-color), but both built-in theme files define the variable as --footer-background-color. Because of this name mismatch, the footer background color variable in the theme files has no effect on the footer rule in stylesheet.css out of the box. When writing a custom theme, use --footer-bg-color if you want to control the footer background via the stylesheet rule as written.

​
Default (Dark) theme

themes/default-dark.css
root {
    --bg-color: #373736;
    --txt-color: #c3c3c5;
    --button-color: #3d3d3d;
    --button-txt-color: white;
    --button-hover-color: #353535;
    --msg-bg-color: #5f5f5f;
    --msg-txt-color: #c3c3c5;
    --msg-timestamp-color: gray;
    --footer-background-color: #484848;
}

​
Default (Light) theme

themes/default-light.css
root {
    --bg-color: #c3c3c5;
    --txt-color: #373737;
    --button-color: rgb(170, 170, 170);
    --button-txt-color: #3d3d3d;
    --button-hover-color: #e0e0e0;
    --msg-bg-color: #5f5f5f;
    --msg-txt-color: #c3c3c5;
    --msg-timestamp-color: gray;
    --footer-background-color: rgb(140, 140, 140);
}
The built-in theme files use root as a selector without the colon prefix. While :root is the standard CSS pseudo-class for custom properties, both root and :root work for the purposes of this app.
Want to go beyond the built-in palettes? Head to Custom CSS to learn how to override these variables — or write an entirely new theme — directly inside kChat’s theme editor.

Build docs developers (and LLMs) love

Get started for freeTalk to us