useContext

React 474 characters

jsx
import React, { createContext } from 'react'
import Toolbar from './Toolbar'

const themes = {
    light: {
        foreground: "#000000",
        background: "#eeeeee"
    },
    dark: {
        foreground: "#ffffff",
        background: "#222222"
    }
}

export const ThemeContext = createContext(themes.light)

export default function App() {
    return (
        <ThemeContext.Provider value={themes.dark}>
            <Toolbar />
        </ThemeContext.Provider>
    )
}

Svelte 302 characters (36% less)

svelte
<script>
	import { setContext } from "svelte"
	import Toolbar from "./Toolbar.svelte"

	const themes = {
		light: {
			foreground: "#000000",
			background: "#eeeeee"
		},
		dark: {
			foreground: "#ffffff",
			background: "#222222"
		}
	}

	setContext("ThemeContext", themes.dark)
</script>

<Toolbar />