> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devias.io/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> The docs are served at https://docs.devias.io. Every path in these docs is relative to that root: /llms.txt is https://docs.devias.io/llms.txt.
> Devias is an open-source platform that works as an operating system for a business: a core (records, views, workflows, agents, permissions) with installable modules.
> Pages are typed by folder. concepts/ explains what things are, guides/ gives procedures, reference/ is exhaustive (SDK, CLI, HTTP API), operate/ covers hosting. Use /start/glossary for exact terms.
> Every id in a module (module, object, field, view, action, workflow, step, connection, variable, event, policy) is a uuid. Generate them with `devias id <count>`. Never invent dotted or readable ids.
> Run `devias plan` and read its output before `devias apply`. Apply only what the plan says.
> The OpenAPI document, including the routes of the modules in the reference setup, is at /reference/api/openapi.json.
> Devias is young and changes quickly. If a page and the source repository (github.com/devias-io/devias) disagree, the repository is right.

# Theming

> How to change the look of the Devias studio by redefining CSS variables from @devias/ui after importing its styles. Lists each variable group, how dark mode values work, the per-person light, dark or system choice, and the @source line needed for Tailwind classes in a module.

The studio's look comes from a small set of CSS variables in `@devias/ui`. The app imports them once, and redefining values after that import changes the look.

```css theme={"dark"}
@import "@devias/ui/styles.css";

:root {
  --brand: #2563eb;
  --brand-foreground: #ffffff;
}
```

## What you can change

| Variable | What it controls |
| - | - |
| `--brand`, `--brand-foreground` | The accent colour and the text on it. |
| `--background`, `--foreground` | The page and its text. |
| `--card`, `--border` | Panels and hairlines. |
| `--primary`, `--primary-foreground` | Primary buttons. |
| `--radius-*` | The roundness of corners. |
| `--font-sans`, `--font-mono` | The fonts. Devias uses Inter and Geist Mono. |

Dark mode has its own values under the `.dark` selector, so a variable is set in both places to change it everywhere.

## Light, dark and system

Each person chooses light, dark or follow-the-system under **Settings → Appearance**. The choice applies to that browser only.

## Tailwind classes in a module's studio code

If a module's studio code uses Tailwind classes, the app needs to know where to find them. A `@source` line for the module's folder goes in `apps/studio/src/styles.css`, next to the existing ones. Without it the module's styles are not generated.

## Related

* [Blocks](https://docs.devias.io/guides/customize-studio/blocks.md): build something to style.
* [Customize the studio](https://docs.devias.io/guides/customize-studio/what-you-can-customize.md): all settings.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.