Appearance
Customize accent color, typography, layout behavior, and custom CSS
Appearance
Appearance settings control how Cothon looks: accent color, fonts, layout behavior, and optional custom CSS. Changes apply immediately.
Theme
Cothon uses a professional dark theme. The color scheme itself is fixed; you personalize it through the accent color and typography options below.
Accent Color
The accent color is used for highlights, active states, and primary buttons.
- Pick from 10 preset color swatches, or
- Choose a custom color with the color picker or by entering a hex value
Typography
Font Family
Choose the interface font:
- Inter (default)
- SF Pro
- Roboto
- JetBrains Mono
- System default (system-ui)
Font Size
Choose the base text size: Small, Medium, or Large. A live preview shows how the selected font family and size will look.
Layout & Behavior
Toggle interface behaviors on or off:
- Collapsed sidebar — start with the navigation sidebar collapsed
- Smooth animations — enable interface transition animations
- High contrast mode — increase contrast for readability
- Reduce motion — minimize animation for motion sensitivity
Tip
If you find animations distracting or use assistive technology, combine Reduce motion with High contrast mode for a calmer, more readable interface.
Custom CSS
For advanced personalization, you can add your own CSS rules in the Custom CSS text area. These styles are applied on top of the app's built-in styles.
Warning
Custom CSS can break the interface layout if a rule conflicts with app styles. If something looks wrong after adding custom CSS, clear the text area to restore the default appearance.
Related Pages
- General Settings — calendar and default preferences
- Settings overview — all available sections
Was this page helpful?