Pick one theme factory — it builds the whole matching family
UI preview — pick a theme —
client.ts client code: unchanged ✓ 

      

    


    
    

      
One factory, one matching family

      
Pick a theme chip — ☀️ Light, 🌙 Dark, or 🌊 Ocean. That one choice is you picking a concrete ThemeFactory, and it builds a whole matching set: a button, a checkbox, and a card, all in the same theme.

    


    

      ▸
      In Abstract Factory mode the client code never changes — only the factory you pass in. Switch to mix manually mode and try to build a clashing UI to see why the pattern makes that impossible.