Examples

Examples are located in GitHub Qtheme-examples repository.

Vanilla

Javascript + HTML

Try Qtheme with vanilla JS and HTML example repo link

    import {Qtheme} from '@quak.lib/qtheme'
    import {darkTheme} from 'path/to/your/themes'
    
    const savedTheme = Qtheme.getTheme();
    if (savedTheme) {
      Qtheme.setTheme(savedTheme);
    } else {
      // Set some default theme
      Qtheme.setTheme(darkTheme);
    }
                        

And in HTML:

    <div class="bg-color">
      <h1 class="text-primary">Hello world!</h1>
      <p class="text-color">This is regular text color</p>
    </div>
                        

Typescript + HTML

Try Qtheme with vanilla TS and HTML example repo link

    import {Qtheme} from '@quak.lib/qtheme'
    import {darkTheme} from 'path/to/your/themes'
    
    const savedTheme = Qtheme.getTheme();
    if (savedTheme) {
      Qtheme.setTheme(savedTheme);
    } else {
      // Set some default theme
      Qtheme.setTheme(darkTheme);
    }
                        

And in HTML:

    <div class="bg-color">
      <h1 class="text-primary">Hello world!</h1>
      <p class="text-color">This is regular text color</p>
    </div>
                        

Framework/library

Qtheme works with any framework/library. You can use it with Angular, React, Svelte, Vue, etc.

Angular

Try Qtheme with Angular example repo link

    import {Qtheme, Theme} from '@quak.lib/qtheme'
    import {darkTheme} from 'path/to/your/themes'
    
    class AppComponent {
      constructor() {
        const savedTheme: Theme | null = Qtheme.getTheme();
        if (savedTheme) {
          Qtheme.setTheme(savedTheme);
        } else {
          // Set some default theme
          Qtheme.setTheme(darkTheme);
        }
      }
    }
                        

And in HTML:

    <div class="bg-color">
      <h1 class="text-primary">Hello world!</h1>
      <p class="text-color">This is regular text color</p>
    </div>
                        

React

Try Qtheme with React example repo link

    import {Qtheme} from '@quak.lib/qtheme'
    import {darkTheme} from 'path/to/your/themes'
    
    const App = () => {
      useEffect(() => {
        const savedTheme = Qtheme.getTheme();
        if (savedTheme) {
          Qtheme.setTheme(savedTheme);
        } else {
          // Set some default theme
          Qtheme.setTheme(darkTheme);
        }
      }, []);
      
      return (
        <div className="bg-color">
          <h1 className="text-primary">Hello world!</h1>
          <p className="text-color">This is regular text color</p>
        </div>
      );
    }
                        

Svelte

Try Qtheme with Svelte example repo link

    <script>
      import {Qtheme} from '@quak.lib/qtheme'
      import {darkTheme} from 'path/to/your/themes'
      
      const savedTheme = Qtheme.getTheme();
      if (savedTheme) {
        Qtheme.setTheme(savedTheme);
      } else {
        // Set some default theme
        Qtheme.setTheme(darkTheme);
      }
    </script>
    
    <div class="bg-color">
      <h1 class="text-primary">Hello world!</h1>
      <p class="text-color">This is regular text color</p>
    </div>