# Make a theme in the studio [The studio](https://standard.mode.place/studio/) is the no-code way to end up with a theme of your own. You set the values, watch them land on a few sample apps, and, when you're happy, save the record to your own account. Building this from code instead? See [Publish a theme with code](https://standard.mode.place/docs/guides/publish-a-theme/); it does the same thing with `@atproto/api`. ## What you'll end up with One record on your account: a `place.mode.standard.theme`, saved under a key you choose. That's the whole artifact. Any app that speaks the standard can read it and render your content your way. ## 1. Start from something real A new theme opens as a copy of one of the studio's starting themes. That's deliberate: you're always editing values that already work rather than filling in an empty grid, and every value is present from the first moment, which is what the standard requires (see [Rule 6](https://standard.mode.place/docs/contract/#rule-6--aspects-are-optional-but-each-is-complete)). Those aren't mock-ups either. Each one is a complete `place.mode.standard.theme` record, the same shape, and the same rules, as the one you'll save to your own account. ## 2. Set the values There's one field per value in the standard, and nothing is calculated behind your back. **Color, 21 values.** Every row is a *purpose*, and every purpose gets a background, a foreground and a border: - `control`: form fields. No priority; all controls are peers. - `action`: things you click: - `primary`: the one thing the screen most wants you to do. - `secondary`: a supporting choice. - `auxiliary`: the quietest choice. - `surface`: things you don't click: - `primary`: a surface that **interrupts**: a modal, a dialog, an alert, a sheet. - `secondary`: a surface **over** the page rather than instead of it: a flyout, a menu, a popover. - `auxiliary`: **the page**, and everything sitting on it rather than above it: cards, bars, panels. Most of what you see is this one. **Typography, 12 values.** Each of these carries a size, a weight, a family and a line height: - `text / primary`: headlines and titles. - `text / secondary`: body copy. - `text / auxiliary`: detail and help: captions, hints, the small print. Color isn't in the typography aspect on purpose: text takes its color from whatever surface it sits on. :::note[Why the page is `auxiliary` and not `primary`] Priority counts *down*, from the thing claiming most of a reader's attention to the thing claiming least. A modal interrupts everything, so it's primary. The page is the least important compared to other surfaces. ::: Each color has a picker and a text box. The picker is for the common case; the text box takes anything CSS understands, `#1c2540`, `oklch(0.7 0.15 250)`, `color-mix(in oklab, …)`, `transparent`. If you type something the picker can't display, your text is kept exactly as written. Every row also shows the CSS variable it becomes, `--color-action-primary-background`. That name is fixed by [Rule 1](https://standard.mode.place/docs/contract/#rule-1--every-value-becomes-a-css-variable-named-after-where-it-lives), and it's why one look can fit apps that have never heard of each other. You can include color only, typography only, or both. Leaving one out is fine; leaving one half-filled is not, which is why turning an aspect off removes it outright. ## 3. Name what it's for The identity field is the important one: **what the theme is for**. It becomes the record's key, and it's how apps match your look to a place on the page. - `default` is your everyday look, the one an app reaches for when it just wants *yours*. - `critical`, `hero`, `entity`, `development` and the like are [common words](https://standard.mode.place/docs/reference/expressions/) other people use too, so yours lines up with theirs. - A look that's yours alone reads better namespaced: `com.yourname.zine`. One theme serves exactly one of these. If you want the same look to answer to two names, save it twice; there's a "save a copy under another name" button for exactly that, and the reasoning is [here](https://standard.mode.place/docs/reference/expressions/#one-look-several-names). ## 4. Check the record The studio shows the exact JSON it would write, and checks it against the standard's own schema before anything is sent. That check matters more than it sounds: most account servers don't know this record type and will store whatever you hand them, valid or not; an invalid theme sits there looking fine and quietly fails to render. Catching it here is the point. You can copy or download that JSON without signing in at all, if you'd rather write it yourself. ## 5. Save it to your account Sign in with your handle. Your own provider asks whether you agree; you come back signed in. This site never sees your password, and holds nothing afterwards; the session lives in your browser. We ask for permission over this standard's theme records and nothing else. (Providers that predate per-collection permissions don't understand that, so on those we fall back to the older, broader "can write records" permission. The studio tells you which one you granted.) Once signed in you can: - **Save**: write the theme at the key you chose. - **Save a copy under another name**: the same values at a second key. - **Open** anything you've already saved and edit it. - **Delete** a theme you don't want any more. ## Where things are kept | What | Where | |---|---| | The theme you're working on | This browser, in local storage | | Your sign-in key | This browser: it's generated here and never leaves | | Your saved themes | Your account, on your own server | | Anything at all | Not on standard.mode.place. There's no server here to put it on. | Clearing your draft is a button in the studio. Deleting a theme is a button too, and because the record is on your account, you can also delete it with any other AT Protocol tool, without us. ## Next steps - **[Common expressions](https://standard.mode.place/docs/reference/expressions/)**: naming the concept your theme serves. - **[The Mode Contract](https://standard.mode.place/docs/contract/)**: what apps do with what you just saved. - **[Schema reference](https://standard.mode.place/docs/reference/schema/)**: every field of the record. - **[Publish a theme with code](https://standard.mode.place/docs/guides/publish-a-theme/)**: the same job, from a script.