Styling and Theming

How styles works in our code

The project uses:

  • Tailwind CSS — Utility classes for quick styling

  • SCSS Modules — For component-specific styles

  • CSS variables — For theming colors and spacing

Dark mode

Theme is managed globally in app/contexts/themeContext.tsxarrow-up-right. Components automatically adapt to dark/light mode through CSS variables in app/styles/variables.scssarrow-up-right.

When styling, use Tailwind's dark mode support:

<div className="bg-white dark:bg-gray-900">

Component styles

For component-specific styles, use SCSS modules:

import styles from "./MyTool.module.scss";

export default () => (
  <div className={styles.container}>
    ...
  </div>
);

Global styles

Global styles are in app/styles/global.scssarrow-up-right. Only add global styles if they affect the entire app. Keep most styling in component-level modules or Tailwind.

Design consistency

Look at existing tools to match:

  • Colors and spacing

  • Input field styles

  • Button sizes and shapes

  • Typography (headings, labels, hints)

Use the same color, not slightly different shades. Consistency > customization.

Last updated