Managing Global Theming with Provide/Inject in Deep Component Trees

// Composables/useTheme.js
import { inject, provide, ref, readonly } from 'vue'

const ThemeSymbol = Symbol('theme')

export function provideTheme(initialTheme = 'light') {
  const theme = ref(initialTheme)

  const toggleTheme = () => {
    theme.value = theme.value === 'light' ? 'dark' : 'light'
  }

  // Provide a readonly version of theme and the toggle function
  provide(ThemeSymbol, { theme: readonly(theme), toggleTheme })
}

export function useTheme() {
  const themeContext = inject(ThemeSymbol)
  if (!themeContext) {
    throw new Error('useTheme must be used within a component that provides a theme.')
  }
  return themeContext
}

// App.vue (Root component)
<template>
  <div :class="['app-container', theme]">
    <h1>Vue 3 Theming Example</h1>
    <button @click="toggleTheme">Toggle Theme (Current: {{ theme }})</button>
    <ParentComponent />
  </div>
</template>

<script setup>
import { provideTheme, useTheme } from './composables/useTheme'
import ParentComponent from './components/ParentComponent.vue'
import { onMounted } from 'vue'

// Provide theme context at the root
provideTheme('light')

// Use theme context in the root component itself
const { theme, toggleTheme } = useTheme()

// Example of setting initial theme from localStorage
onMounted(() => {
  const savedTheme = localStorage.getItem('app-theme')
  if (savedTheme && savedTheme !== theme.value) {
    theme.value = savedTheme // Directly update ref, or call a specific action if the composable had one.
  }
})
</script>

<style>
.app-container.light { background-color: #f0f2f5; color: #333; }
.app-container.dark { background-color: #333; color: #f0f2f5; }
button { margin: 10px; padding: 8px 15px; }
</style>

// components/ParentComponent.vue
<template>
  <div class="parent-card">
    <h2>Parent Component</h2>
    <ChildComponent />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
</script>

<style scoped>
.parent-card { border: 1px solid #ccc; padding: 15px; margin: 10px; background-color: var(--card-bg-color); }
.app-container.light .parent-card { --card-bg-color: #fff; }
.app-container.dark .parent-card { --card-bg-color: #555; }
</style>

// components/ChildComponent.vue
<template>
  <div class="child-card">
    <h3>Child Component</h3>
    <p>Current Theme: {{ theme }}</p>
    <GrandchildComponent />
  </div>
</template>

<script setup>
import { useTheme } from '../composables/useTheme'
import GrandchildComponent from './GrandchildComponent.vue'

const { theme } = useTheme()
</script>

<style scoped>
.child-card { border: 1px dashed #aaa; padding: 10px; margin: 10px; background-color: var(--card-bg-color); }
.app-container.light .child-card { --card-bg-color: #f7f7f7; }
.app-container.dark .child-card { --card-bg-color: #666; }
</style>

// components/GrandchildComponent.vue
<template>
  <div class="grandchild-box">
    <h4>Grandchild Component</h4>
    <p>Theme from inject: {{ theme }}</p>
    <button @click="toggleTheme">Toggle Theme from Grandchild</button>
  </div>
</template>

<script setup>
import { useTheme } from '../composables/useTheme'

const { theme, toggleTheme } = useTheme()
</script>

<style scoped>
.grandchild-box { border: 1px dotted #888; padding: 8px; margin: 8px; background-color: var(--card-bg-color); }
.app-container.light .grandchild-box { --card-bg-color: #eee; }
.app-container.dark .grandchild-box { --card-bg-color: #777; }
</style>