dd-theme-selector

Sample standalone component from Chapter 16-17 from the book (Important: this sample is not licensed and cannot be re-distributed)

The book can be found here:

See Large Scale Apps with Vue 3 and TypeScript.

Description:

The component allows to change the theme of your app/website. You can see a working example here: largescaleapps.com It does not come with styles so you have to provide them (see code sample below). Also uses material-icons, so you will have to include a reference to that somewhere in your app.For example, you could include this in your public/index.html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&lang=en&display=swap"/>

The component uses an internal custom store to manage its state, and also write and reads the selection to localStorage so it remembers the user selection.

How to use:

Create a Vue 3 app (TypeScript) Then install a reference to this package with the command:

npm install --save dd-theme-selector

Add this sample code in your App.vue or other view where you want to try it out. Note that you have to feed it an array of themes (of type ThemeInfoInterface), and also add somewhere the CSS styles, as the dd-theme-selector does not come with any styles. In the code sample below, we are adding them in the <style lang="scss"> section of our view:

<template>
  <h1>Consuming dd-theme-selector from another Vue 3 app:</h1>
  <ThemeSelector :availableThemes="availableThemes" />
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  import {
    ThemeSelector,
    ThemeInfoInterface
  } from 'dd-theme-selector'
  console.log('hc', ThemeSelector)

  export default defineComponent({
    name: 'App',
    components: {
      ThemeSelector
    },
    setup() {
      const availableThemes = [
        {
          id: 'light-theme',
          name: 'Light',
          icon: 'color_lens',
          selected: false
        },
        {
          id: 'dark-theme',
          name: 'Dark',
          icon: 'color_lens',
          selected: true
        },
        {
          id: 'navy-theme',
          name: 'Navy Dark',
          icon: 'color_lens',
          selected: false
        }
      ]

      return {
        availableThemes
      }
    }
  })
</script>

<style lang="scss">
  body {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 20px;
    color: #2c3e50;

    h1 {
      font-size: 16px;
    }
  }

  .theme-selector {
    .theme-radio-group {
      display: inline-flex;
      justify-content: center;

      label.theme-radio {
        cursor: pointer;
        display: block;

        &.selected {
          border-bottom: solid 2px #42b983;
        }

        &:hover {
          background: red;
        }

        > i {
          font-size: 32px;
          display: block;
        }
      }

      input {
        display: none;
      }
    }
  }

  body.light-theme {
    .theme-selector .theme-radio-group label.theme-radio {
      &.light-theme > i {
        color: lightgray;
      }
      &.dark-theme > i {
        color: black;
      }
      &.navy-theme > i {
        color: lighten(navy, 20%);
      }
    }
  }

  body.dark-theme {
    background-color: black;
    color: lighten(#2c3e50, 50%);

    .theme-selector .theme-radio-group label.theme-radio {
      &.light-theme > i {
        color: white;
      }
      &.dark-theme > i {
        color: lighten(#000, 40%);
      }
      &.navy-theme > i {
        color: lighten(navy, 40%);
      }
    }
  }

  body.navy-theme {
    background-color: navy;
    color: lighten(#2c3e50, 50%);

    .theme-selector .theme-radio-group label.theme-radio {
      &.light-theme > i {
        color: white;
      }
      &.dark-theme > i {
        color: lighten(#000, 40%);
      }
      &.navy-theme > i {
        color: lighten(navy, 40%);
      }
    }
  }
</style>