Dark Mode

Easily change the theme of your application to light or dark programmatically.

Dark mode is natively supported in Inkline by changing the default component variant property value. The variant can be configured through the $inkline global prototype available in every component:

this.$inkline.config.variant = 'dark';

The global $inkline prototype is reactive, therefore any changes you make to it will propagate to all Inkline components.

How to Toggle Dark Mode

Dark mode can be toggled easily by changing the default component configuration variant value as follows:

Toggle Dark Mode

The inkline Class

When the page loads, Inkline adds an .inkline class to the page's <body>, along with a dynamically switched .-light or .-dark class based on the configured variant.

<body class="inkline -light"> ... </body>

The .inkline class gives you theme awareness and control over general page design elements, such as background and color.

.inkline { 
    &.-light { /* ... */ }
    &.-dark { /* ... */ }
}

The variant Property

Changing the default variant of Inkline components will cause every component to transition to the new color theme.

Variant Property

Notice how the <i-button variant="light"> doesn't change? If the variant property is set explicitly, components will not be affected.

The VariantPropertyMixin Mixin

You can write your own components with a variant property using a mixin called VariantPropertyMixin. The variant mixin relies on the ClassesProviderMixin, which provides a reactive classes array.

During the created() lifecycle, the variant property mixin adds a rule to the classes provider that dynamically computes the -light or -dark variant class for the element based on this.$inkline.config.variant.

<template>
    <div class="my-component" :class="classes">
        <slot>I support dark mode.</slot>
    </div>
</template>

<style lang="scss">
.my-component {
    &.-light {
        background: #fafafa;
    }

    &.-dark {
        background: #3a3a3a;
    }
}
</style>

<script>
import { 
    ClassesProviderMixin, 
    VariantPropertyMixin 
} from '@inkline/inkline/src/mixins';

export default {
    name: 'MyComponent',
    mixins: [
        ClassesProviderMixin,
        VariantPropertyMixin
    ]
}
</script>

Use the component as follows:

<my-component></my-component>

<my-component variant="light"></my-component>

<my-component variant="dark"></my-component>