[Quasar/퀘이사] css, 테마 색상 지정 및 변경하기

quasar는 css 폴더 하에 색상의 이름을 지정해두고, global하게 불러다 사용할 수 있다.

[참고] https://quasar.dev/style/color-palette#util-getcssvar

Color Palette | Quasar Framework

색상의 id는 adobe color에서 확인할 수 있다.

https://color.adobe.com/

https://color.adobe.com/ko/create/color-wheel

해당 이름들로 지정한 색들을 다른 페이지에서 불러다 사용할 수 있다.

또한 모듈을 이용해 새롭게 색을 지정하거나, 지정한 색을 변경할 수도 있다.

[<template> 부분]

<q-item tag="label">
                <q-item-section>
                    <row class="row justify-center">
                        <q-color 
                            v-model="colorPrimaryHex" 
                            no-header 
                            @click="setColor" 
                            style="width: 250px"
                        />
                    </row>
                </q-item-section>
            </q-item>

[<script> 부분]

import {getCssVar, setCssVar } from 'quasar'
export default {
    setup() {
        const colorPrimaryHex = ref(getCssVar('primary'))
  
        const setColor = (() => {
            setCssVar('primary', colorPrimaryHex.value)
        })
        return {
            colorPrimaryHex,
            setColor
        }
    },
}

팔레트에서 색상을 클릭하면 해당 색이 primary로 지정되어 이전에 primary 색으로 칠해져 있는 부분이 일괄적으로 변경된다. 해당 변경 사항을 저장하고, 불러오고 싶다면 브라우저의 localDB를 활용해야 할 것 같다. (다음에 다뤄보겠다.)