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.tsx. Components automatically adapt to dark/light mode through CSS variables in app/styles/variables.scss.

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.scss. 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.