#How to use theme colors defined in appConfig

3 messages · Page 1 of 1 (latest)

abstract relic
#

So I see in the documentation that u can create the following in app.config.ts in order to manage themes:

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

However I can't understand how to use this primaryColor variable in my css now

<script setup>

const { primaryColor } = useAppConfig()

</script>

<template>
</template>

<style scoped>

nav {
  width: 5rem;
  background-color: ???;
}

</style>

Here I'm trying to use it in a component by importing primaryColor but I don't know the syntax for inserting the value into CSS, and is there a way to have the colors globally available?

And if this isn't the most idiomatic way of managing multiple themes, then what is?

dusk cove
faint sail