# Styling and Theming

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`](https://github.com/betterbugs/dev-tools/blob/main/app/contexts/themeContext.tsx). Components automatically adapt to dark/light mode through CSS variables in [`app/styles/variables.scss`](https://github.com/betterbugs/dev-tools/blob/main/app/styles/variables.scss).

When styling, use Tailwind's dark mode support:

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

**Component styles**

For component-specific styles, use SCSS modules:

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

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

**Global styles**

Global styles are in [`app/styles/global.scss`](https://github.com/betterbugs/dev-tools/blob/main/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.