Inkline
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';
How to Toggle Dark Mode
Dark mode can be toggled easily by changing the default component configuration variant value as follows:
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.
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>
</i-tab>
<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>