import { defAtom } from "@thi.ng/atom/atom" ; import { defView } from "@thi.ng/atom/view" ; import { start } from "@thi.ng/hdom/start" ; const THEMES = [ { id : "default" , root : { class : "w-100 ma0 pa3 sans-serif f6" } , button : { class : "w4 pa2 bg-blue white" } , } , { id : "alt" , root : { class : "w-100 ma0 pa3 serif f3 bg-washed-red" } , button : { class : "w5 pa2 bg-red white" } , } , { id : "mono" , root : { class : "w-100 ma0 pa3 courier f7 bg-light-gray" } , button : { class : "w4 pa2 bg-black white" } , } , ] ; const db = defAtom ( { id : 0 } ) ; const ctx = { theme : defView ( db , [ "id" ] , ( id ) => THEMES [ id ] ) , themeID : defView ( db , [ "id" ] , ( id ) => THEMES [ id ] . id . toUpperCase ( ) ) , } ; const toggle = ( ) => db . swapIn ( [ "id" ] , ( id ) => ( id + 1 ) % THEMES . length ) ; const app = ( { theme , themeID } ) => [ "div" , theme . root , [ "h1" , `Current theme: ${ themeID }` ] , [ "button" , { ... theme . button , onclick : toggle } , "Toggle" ] , ] ; start ( app , { ctx , autoDerefKeys : Object . keys ( ctx ) , } ) ;