{"_path":"/guide/introduction","_draft":false,"_partial":false,"_locale":"en","_empty":false,"title":"Introduction","description":"How does theming work in Nuxt ?","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since Nuxt 3 introduced "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" feature, it is now possible to merge two or more Nuxt projects."}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  extends: ['@nuxt-themes/docus']\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n  extends: ['@nuxt-themes/docus']\n})\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"extremely"}]},{"type":"text","value":" powerful, especially if you are trying to implement a theming system."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@nuxt-themes/config"}]},{"type":"text","value":" offers is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"opt-in"}]},{"type":"text","value":" features that makes the life of theme authors easier."}]},{"type":"element","tag":"h2","props":{"id":"-theme-configuration"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"icon-park:file-settings"},"children":[]},{"type":"text","value":" Theme configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can see a theme like a Nuxt project with a configurable UI and feature set."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While building your theme, you might want your users to have an easy way to toggle or configure some features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt-themes/config"}]},{"type":"text","value":" solves that issue by providing a common API for all themes to do that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's take an easy example on how @nuxt-themes/config helps with that."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Define the configuration option."},{"type":"element","tag":"code","props":{"code":" export default defineThemeConfig({\n   theme: {\n     // Theme options\n     options: {\n       header: {\n         title: 'My Theme'\n       }\n     },\n     // Design Tokens\n     tokens: {\n       colors: {\n         primary: '#A288A6'\n       }\n     }\n   }\n })\n","filename":"theme/theme.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" export default defineThemeConfig({\n   theme: {\n     // Theme options\n     options: {\n       header: {\n         title: 'My Theme'\n       }\n     },\n     // Design Tokens\n     tokens: {\n       colors: {\n         primary: '#A288A6'\n       }\n     }\n   }\n })\n"}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the configuration key in your components."},{"type":"element","tag":"code","props":{"code":"<template>\n<!-- Template usage -->\n<main>\n <header v-if=\"hasHeader\">\n   <h1>{{ $theme.value.title }}</h1>\n </header>\n</main>\n</template>\n\n<script setup lang=\"ts\">\n// Composable usage\nconst theme = useTheme()\nconst hasHeader = computed(() => theme.value.header)\n</script>\n","filename":"layout/default.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<template>\n<!-- Template usage -->\n<main>\n <header v-if=\"hasHeader\">\n   <h1>{{ $theme.value.title }}</h1>\n </header>\n</main>\n</template>\n\n<script setup lang=\"ts\">\n// Composable usage\nconst theme = useTheme()\nconst hasHeader = computed(() => theme.value.header)\n</script>\n"}]}]}]}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"@nuxt-themes/config will automatically extract and generate a typing file from your theme options object.\n"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThis ensures any access to your theme via "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useTheme()"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$theme"}]},{"type":"text","value":" stays type-safe."}]}]},{"type":"element","tag":"h2","props":{"id":"-design-tokens"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:artist-palette"},"children":[]},{"type":"text","value":" Design Tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design Tokens support is offered by the "},{"type":"element","tag":"a","props":{"href":"https://design-tokens.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]}]},{"type":"text","value":" module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can visit the "},{"type":"element","tag":"a","props":{"href":"https://design-tokens.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt-commnunity/design-tokens","rel":["nofollow"]},"children":[{"type":"text","value":"repository"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These will learn you how to go even deeper in making your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"theme appearance"}]},{"type":"text","value":" configurable."}]},{"type":"element","tag":"h2","props":{"id":"-theme-metas"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:detective"},"children":[]},{"type":"text","value":" Theme Metas"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As for now, the theme only supports basic informations like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"author"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme metas exists to prepare your theme to be ready to be referenced and categorized by Nuxt themes website."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is also used to display the name of the theme to the user that uses it."}]}]},"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since Nuxt 3 introduced "},{"type":"element","tag":"a","props":{"href":""},"children":[{"type":"text","value":"extends"}]},{"type":"text","value":" feature, it is now possible to merge two or more Nuxt projects."}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  extends: ['@nuxt-themes/docus']\n})\n","filename":"nuxt.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90a98a"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-90a98a"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-85c6f3"},"children":[{"type":"text","value":"defineNuxtConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"extends"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": ["}]},{"type":"element","tag":"span","props":{"class":"ct-d8d98d"},"children":[{"type":"text","value":"'@nuxt-themes/docus'"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This feature is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"extremely"}]},{"type":"text","value":" powerful, especially if you are trying to implement a theming system."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"@nuxt-themes/config"}]},{"type":"text","value":" offers is "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"opt-in"}]},{"type":"text","value":" features that makes the life of theme authors easier."}]},{"type":"element","tag":"h2","props":{"id":"-theme-configuration"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"icon-park:file-settings"},"children":[]},{"type":"text","value":" Theme configuration"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can see a theme like a Nuxt project with a configurable UI and feature set."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While building your theme, you might want your users to have an easy way to toggle or configure some features."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt-themes/config"}]},{"type":"text","value":" solves that issue by providing a common API for all themes to do that."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's take an easy example on how @nuxt-themes/config helps with that."}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Define the configuration option."},{"type":"element","tag":"code","props":{"code":" export default defineThemeConfig({\n   theme: {\n     // Theme options\n     options: {\n       header: {\n         title: 'My Theme'\n       }\n     },\n     // Design Tokens\n     tokens: {\n       colors: {\n         primary: '#A288A6'\n       }\n     }\n   }\n })\n","filename":"theme/theme.config.ts","language":"ts"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-90a98a"},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-90a98a"},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-85c6f3"},"children":[{"type":"text","value":"defineThemeConfig"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"   "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"     "}]},{"type":"element","tag":"span","props":{"class":"ct-7d19af"},"children":[{"type":"text","value":"// Theme options"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"     "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"options"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"         "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d8d98d"},"children":[{"type":"text","value":"'My Theme'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"       }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"     },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"     "}]},{"type":"element","tag":"span","props":{"class":"ct-7d19af"},"children":[{"type":"text","value":"// Design Tokens"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"     "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"tokens"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"       "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"colors"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"         "}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"primary"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":": "}]},{"type":"element","tag":"span","props":{"class":"ct-d8d98d"},"children":[{"type":"text","value":"'#A288A6'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"       }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"     }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"   }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" })"}]}]}]}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use the configuration key in your components."},{"type":"element","tag":"code","props":{"code":"<template>\n<!-- Template usage -->\n<main>\n <header v-if=\"hasHeader\">\n   <h1>{{ $theme.value.title }}</h1>\n </header>\n</main>\n</template>\n\n<script setup lang=\"ts\">\n// Composable usage\nconst theme = useTheme()\nconst hasHeader = computed(() => theme.value.header)\n</script>\n","filename":"layout/default.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"<!-- "}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"Template"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"usage"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" -->"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"v-if"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"hasHeader"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"   <"}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"1>{{ $"}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" }}</"}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"1>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" </"}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"main"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-26fce7"},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-d8d98d"},"children":[{"type":"text","value":"\"ts\""}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-7d19af"},"children":[{"type":"text","value":"// Composable usage"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90a98a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18225"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5df4cd"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-85c6f3"},"children":[{"type":"text","value":"useTheme"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"()"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-90a98a"},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18225"},"children":[{"type":"text","value":"hasHeader"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-5df4cd"},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-85c6f3"},"children":[{"type":"text","value":"computed"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"(() "}]},{"type":"element","tag":"span","props":{"class":"ct-90a98a"},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"class":"ct-c18225"},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-c18225"},"children":[{"type":"text","value":"value"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"header"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"class":"ct-6fba28"},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"class":"ct-94bce4"},"children":[{"type":"text","value":">"}]}]}]}]}]}]}]},{"type":"element","tag":"alert","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"@nuxt-themes/config will automatically extract and generate a typing file from your theme options object.\n"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nThis ensures any access to your theme via "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"useTheme()"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"$theme"}]},{"type":"text","value":" stays type-safe."}]}]},{"type":"element","tag":"h2","props":{"id":"-design-tokens"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:artist-palette"},"children":[]},{"type":"text","value":" Design Tokens"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Design Tokens support is offered by the "},{"type":"element","tag":"a","props":{"href":"https://design-tokens.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxtjs/design-tokens"}]}]},{"type":"text","value":" module."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can visit the "},{"type":"element","tag":"a","props":{"href":"https://design-tokens.nuxtjs.org","rel":["nofollow"]},"children":[{"type":"text","value":"documentation"}]},{"type":"text","value":" or the "},{"type":"element","tag":"a","props":{"href":"https://github.com/nuxt-commnunity/design-tokens","rel":["nofollow"]},"children":[{"type":"text","value":"repository"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These will learn you how to go even deeper in making your "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"theme appearance"}]},{"type":"text","value":" configurable."}]},{"type":"element","tag":"h2","props":{"id":"-theme-metas"},"children":[{"type":"element","tag":"icon","props":{"class":"inline-block mr-1","name":"noto:detective"},"children":[]},{"type":"text","value":" Theme Metas"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As for now, the theme only supports basic informations like "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"author"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Theme metas exists to prepare your theme to be ready to be referenced and categorized by Nuxt themes website."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is also used to display the name of the theme to the user that uses it."}]},{"type":"element","tag":"style","children":[{"type":"text","value":".ct-5df4cd{color:#56B6C2}.ct-c18225{color:#E5C07B}.ct-26fce7{color:#D19A66}.ct-7d19af{color:#7F848E}.ct-d8d98d{color:#98C379}.ct-6fba28{color:#E06C75}.ct-85c6f3{color:#61AFEF}.ct-94bce4{color:#ABB2BF}.ct-90a98a{color:#C678DD}"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"-theme-configuration","depth":2,"text":" Theme configuration"},{"id":"-design-tokens","depth":2,"text":" Design Tokens"},{"id":"-theme-metas","depth":2,"text":" Theme Metas"}]}},"_type":"markdown","_id":"content:1.guide:1.introduction.md","_source":"content","_file":"1.guide/1.introduction.md","_extension":"md"}