How to create Dynamic Themes with Vue
By: Cc Eng
Tags: Design, Vue, JavaScript, Animation, CSS

By Sarah Pflug in Art & Design

Hi, everyone. I would like to explain how to switch themes with Vue and CSS in different ways of cool animations in this article. Let start with a simple way.

First, I declared 3 themes for my application which are light, dark, and orange themes by using CSS custom properties for CSS variables. What is the CSS custom properties?

CSS custom properties declare begin with a double hyphen ( -- ) and can be reused through all the CSS Classes with var()function.

--color: white;

--background-color: brown; h1{

background-color: var(--main-bg-color);

}

Then, I used class binding (v-bind: class) to bind the value (e.g light, dark, or orange) when choosing the theme color. So, when changing the theme color, the rest of the CSS Classes will automatically insert the value of a custom property by using the var() function.

Done! You have successfully change the theme color.

Next, I would like to apply the CSS Transitions effect to let the background color change smoothly, to avoid a sudden ‘flash’ when changing the theme color.

Apply the transition effect to the place/class that will change the theme color, for example, background-style and text. You can adjust and specify CSS transition properties for example you can make the transition happen in a shorter/longer period by changing the transition-duration.

.background-style is the CSS class that uses to define the background of the web interface. So I apply a simple transition when the background color is changing.

.background-style {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

transition: all 2s;

}

Simple Transition With Vue

Let move on to enhance the animation when the theme color is changing. For the next animation, I decide to anime the theme color from top to bottom. So,

how to animate it?

Two important things are need for these animations:

Vue <transition> component

Vue provides 6 different CSS classes which are 3 different CSS classes for enter transition and 3 different for leave transition. The component/element wrap in the <transition> component will automatically apply and remove the CSS classes at the same time. Only ONE complement/element can animate with the <transition> component. So, I use v-if to decide which to animate.

<transition name="move-down">

<card class="box light" v-if="picked === 'light'"></card>

<card class="box dark" v-else-if="picked === 'dark'"></card>

<card class="box orange" v-else></card>

</transition>

2. Clip-path

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. — from developer.mozilla.org

From my understanding, clip-path easy to define a SHAPE, for example, circle, polygon, and square. The inset CSS property is a shorthand that corresponds to the top , right , bottom and left properties and used to define the square.

The inset CSS property value is quite tricky. The inset value declared by using percentage(%) means the width or height of the container.

Different percentage of inset bottom value.

There are two different animations here. Let say the white theme(leave animation) changes to the dark theme(enter animations).

Enter animations — declare 100% for bottom value at 0% and then animates it down towards 0 at 100%. Leave animations — declare the full square and then animates down until 100% disappear. The percentage of the inset value keeps increase means that the white theme color is going to disappear at the end.