--- title: "Theming · Sanity × Nuxt UI" description: "Colors, fonts, component styles and the motion utilities of the Swiss theme." canonical_url: "https://sanity-nuxtui.vercel.app/id/docs/theming" meta: "og:description": "Colors, fonts, component styles and the motion utilities of the Swiss theme." "og:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Theming%2Cdescription_~Q29sb3JzLCBmb250cywgY29tcG9uZW50IHN0eWxlcyBhbmQgdGhlIG1vdGlvbiB1dGlsaXRpZXMgb2YgdGhlIFN3aXNzIHRoZW1lLg%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9pZC9kb2NzL3RoZW1pbmci%2Cs_t8kKo3ZCUEjLInUf.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Theming · Sanity × Nuxt UI" "twitter:image": "https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Theming%2Cdescription_~Q29sb3JzLCBmb250cywgY29tcG9uZW50IHN0eWxlcyBhbmQgdGhlIG1vdGlvbiB1dGlsaXRpZXMgb2YgdGhlIFN3aXNzIHRoZW1lLg%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9pZC9kb2NzL3RoZW1pbmci%2Cs_t8kKo3ZCUEjLInUf.png" --- > Index of every page on this site: [llms.txt](https://sanity-nuxtui.vercel.app/llms.txt) Halaman ini belum tersedia dalam bahasa Indonesia. [Docs](https://sanity-nuxtui.vercel.app/id/docs) # **Theming** Colors, fonts, component styles and the motion utilities of the Swiss theme. The template ships a Swiss-style theme: a strict grid, large tight headings, square corners and one red accent. Everything is set in two files. ## Colors `apps/web/app/app.config.ts` maps Nuxt UI's semantic colors to palettes: apps/web/app/app.config.ts ``` export default defineAppConfig({ ui: { colors: { primary: 'swiss', neutral: 'mauve' } }}) ``` `swiss` is a custom scale defined in `app/assets/css/main.css` with `@theme`; `mauve` comes with Tailwind. Swap them for any Tailwind palette or your own scale. Components use semantic classes such as `text-muted`, `bg-elevated` and `border-default`, so light and dark mode follow automatically. ## Fonts Fonts load through `@nuxt/fonts`, configured in `nuxt.config.ts` under `fonts.families`: ****Funnel Display**** for headings, ****Funnel Sans**** for text and ****JetBrains Mono**** for code. `main.css` assigns them to `--font-heading`, `--font-sans` and `--font-mono`. Fonts registered with `global: true` are also available to the generated social images. ## Component styles `app.config.ts` also restyles Nuxt UI components globally: the hero and section sizes, the 12-column header layout of sections, the press effect of buttons, accordion spacing. Each entry overrides the slots of a component's theme; see the [**Nuxt UI theme docs**](https://ui.nuxt.com/docs/getting-started/theme). Per instance, pass the `ui` prop instead. The corner radius is set once, with `--ui-radius: 0rem` in `main.css`. ## Motion Animations use CSS scroll-driven animations: no JavaScript, and they run off the main thread. Visitors who prefer reduced motion, and browsers without support, get the content without animation. These utilities live in `main.css`: | **Utility** | **Effect** | | --- | --- | | `reveal` | Fades and rises as it scrolls into view. Set `--reveal-index` (or use `revealIndex()`) to stagger items in a row | | `reveal-wipe` | Uncovers an image from the top | | `parallax` | A slow vertical drift for images inside an `overflow-hidden` frame | | `intro`, `intro-mask` | Plays once on page load, for the first block. `--intro-index` staggers | | `scroll-progress` | The reading progress line on entries | | `link-underline` | An underline that draws in on hover | Page transitions are a short fade, set in `nuxt.config.ts` (`app.pageTransition`) with styles in `main.css`. ## Social images The generated social image is a Vue component, `app/components/OgImage/Page.takumi.vue`. Its colors mirror the theme; update them when you change the palette. [**Queries and types** How GROQ queries are organized, typed with TypeGen and used in components.](https://sanity-nuxtui.vercel.app/id/docs/queries-and-types) [**Languages** How document translations, language prefixes, fallbacks and translated interface text work.](https://sanity-nuxtui.vercel.app/id/docs/languages) ```json {"@context":"https://schema.org","@graph":[{"@id":"https://sanity-nuxtui.vercel.app/#website","@type":"WebSite","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app/","publisher":{"@id":"https://sanity-nuxtui.vercel.app/#identity"}},{"@id":"https://sanity-nuxtui.vercel.app/id/docs/theming#webpage","@type":"WebPage","dateModified":"2026-10-16T02:29:18Z","description":"Colors, fonts, component styles and the motion utilities of the Swiss theme.","name":"Theming","url":"https://sanity-nuxtui.vercel.app/id/docs/theming","isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://sanity-nuxtui.vercel.app/id/docs/theming"]}]},{"@id":"https://sanity-nuxtui.vercel.app/#identity","@type":"Organization","name":"Sanity × Nuxt UI","url":"https://sanity-nuxtui.vercel.app"},{"@id":"https://sanity-nuxtui.vercel.app/id/docs/theming#article","@type":"Article","dateModified":"2026-10-16T02:29:18Z","description":"Colors, fonts, component styles and the motion utilities of the Swiss theme.","headline":"Theming","inLanguage":"en","thumbnailUrl":"https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Theming%2Cdescription_~Q29sb3JzLCBmb250cywgY29tcG9uZW50IHN0eWxlcyBhbmQgdGhlIG1vdGlvbiB1dGlsaXRpZXMgb2YgdGhlIFN3aXNzIHRoZW1lLg%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9pZC9kb2NzL3RoZW1pbmci%2Cs_t8kKo3ZCUEjLInUf.png","author":{"@id":"https://sanity-nuxtui.vercel.app/#identity"},"image":{"@id":"https://sanity-nuxtui.vercel.app/#/schema/image/1"},"isPartOf":{"@id":"https://sanity-nuxtui.vercel.app/id/docs/theming#webpage"},"mainEntityOfPage":{"@id":"https://sanity-nuxtui.vercel.app/id/docs/theming#webpage"},"publisher":{"@id":"https://sanity-nuxtui.vercel.app/#identity"}},{"@id":"https://sanity-nuxtui.vercel.app/#/schema/image/1","@type":"ImageObject","contentUrl":"https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Theming%2Cdescription_~Q29sb3JzLCBmb250cywgY29tcG9uZW50IHN0eWxlcyBhbmQgdGhlIG1vdGlvbiB1dGlsaXRpZXMgb2YgdGhlIFN3aXNzIHRoZW1lLg%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9pZC9kb2NzL3RoZW1pbmci%2Cs_t8kKo3ZCUEjLInUf.png","inLanguage":"en","url":"https://sanity-nuxtui.vercel.app/_og/d/c_Page%2Ctitle_Theming%2Cdescription_~Q29sb3JzLCBmb250cywgY29tcG9uZW50IHN0eWxlcyBhbmQgdGhlIG1vdGlvbiB1dGlsaXRpZXMgb2YgdGhlIFN3aXNzIHRoZW1lLg%2Cheadline_Docs%2CsiteName_~U2FuaXR5IMOXIE51eHQgVUk%2Cp_Ii9pZC9kb2NzL3RoZW1pbmci%2Cs_t8kKo3ZCUEjLInUf.png"}]} ``` ## Sitemap See the full [sitemap](https://sanity-nuxtui.vercel.app/sitemap.md) for all pages.