Vue 3 실전: 다크모드 테마

const{createApp,ref,provide,inject,watch}=Vue;
const ThemeCard={
  setup(){const theme=inject('theme');return{theme};},
  template:`<div :style='{background:theme==="dark"?"#111":"#f5f5f5",color:theme==="dark"?"#e8e8e8":"#111",border:"1px solid",borderColor:theme==="dark"?"#333":"#ddd"}' style='padding:12px;margin-bottom:8px;font-size:11px;transition:all 0.3s;'>
    <div style='font-weight:bold;margin-bottom:4px;'>UNIT CARD</div>
    <div :style='{color:theme==="dark"?"#888":"#666"}'>현재 테마: {{theme}}</div>
  </div>`
};
createApp({
  components:{ThemeCard},
  setup(){
    const theme=ref(localStorage.getItem('theme')||'dark');
    provide('theme',theme);
    watch(theme,v=>localStorage.setItem('theme',v));
    const toggle=()=>theme.value=theme.value==='dark'?'light':'dark';
    return{theme,toggle};
  },
  template:`<div>
    <button @click='toggle' :style='{background:theme==="dark"?"#f59e0b":"#1a1a1a",color:theme==="dark"?"#080808":"#888"}' style='border:none;padding:8px 16px;cursor:pointer;font-family:monospace;font-size:11px;margin-bottom:12px;'>
      {{theme==="dark"?"☀ LIGHT MODE":"🌙 DARK MODE"}}
    </button>
    <theme-card/>
    <theme-card/>
  </div>`
}).mount('#theme-out');