From cc543a398c9cd315698f68c1586abf2847d4c12e Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Mon, 25 Mar 2024 12:28:26 +0300
Subject: [PATCH] fix(vue): useContext util

fixes #196
---
 src/vue/components/Actions.vue              |  3 ++-
 src/vue/components/ActionsButton.vue        |  8 +++++---
 src/vue/components/ActionsGroup.vue         |  3 ++-
 src/vue/components/ActionsLabel.vue         | 10 ++++++----
 src/vue/components/Badge.vue                |  3 ++-
 src/vue/components/Block.vue                |  8 +++++---
 src/vue/components/BlockFooter.vue          | 10 ++++++----
 src/vue/components/BlockHeader.vue          |  8 +++++---
 src/vue/components/BlockTitle.vue           |  6 ++++--
 src/vue/components/Breadcrumbs.vue          |  3 ++-
 src/vue/components/BreadcrumbsCollapsed.vue |  8 +++++---
 src/vue/components/BreadcrumbsItem.vue      |  8 +++++---
 src/vue/components/BreadcrumbsSeparator.vue |  3 ++-
 src/vue/components/Button.vue               |  8 +++++---
 src/vue/components/Card.vue                 |  8 +++++---
 src/vue/components/Checkbox.vue             |  6 ++++--
 src/vue/components/Chip.vue                 |  8 +++++---
 src/vue/components/Dialog.vue               |  6 ++++--
 src/vue/components/DialogButton.vue         |  8 +++++---
 src/vue/components/Fab.vue                  |  6 ++++--
 src/vue/components/Icon.vue                 |  5 +++--
 src/vue/components/Link.vue                 |  8 +++++---
 src/vue/components/List.vue                 |  8 +++++---
 src/vue/components/ListButton.vue           |  8 +++++---
 src/vue/components/ListGroup.vue            |  4 +---
 src/vue/components/ListInput.vue            |  8 +++++---
 src/vue/components/ListItem.vue             |  8 +++++---
 src/vue/components/MenuList.vue             |  4 +---
 src/vue/components/MenuListItem.vue         |  2 --
 src/vue/components/Message.vue              |  8 +++++---
 src/vue/components/Messagebar.vue           |  8 +++++---
 src/vue/components/Messages.vue             |  5 +++--
 src/vue/components/MessagesTitle.vue        | 10 ++++++----
 src/vue/components/Navbar.vue               | 10 ++++++----
 src/vue/components/NavbarBackLink.vue       |  9 +++++----
 src/vue/components/Notification.vue         | 10 ++++++----
 src/vue/components/Page.vue                 |  8 +++++---
 src/vue/components/Panel.vue                |  8 +++++---
 src/vue/components/Popover.vue              |  9 ++++++---
 src/vue/components/Popup.vue                |  8 +++++---
 src/vue/components/Preloader.vue            | 12 +++++++-----
 src/vue/components/Progressbar.vue          | 10 ++++++----
 src/vue/components/Radio.vue                |  8 +++++---
 src/vue/components/Range.vue                |  8 +++++---
 src/vue/components/Searchbar.vue            | 10 ++++++----
 src/vue/components/Segmented.vue            | 10 ++++++----
 src/vue/components/SegmentedButton.vue      |  4 +---
 src/vue/components/Sheet.vue                |  8 +++++---
 src/vue/components/Stepper.vue              | 10 ++++++----
 src/vue/components/Tabbar.vue               |  4 +---
 src/vue/components/TabbarLink.vue           |  8 +++++---
 src/vue/components/Table.vue                |  5 +++--
 src/vue/components/TableBody.vue            |  5 +++--
 src/vue/components/TableCell.vue            |  8 +++++---
 src/vue/components/TableHead.vue            |  5 +++--
 src/vue/components/TableRow.vue             |  6 ++++--
 src/vue/components/Toast.vue                |  8 +++++---
 src/vue/components/Toggle.vue               |  8 +++++---
 src/vue/components/Toolbar.vue              |  8 +++++---
 src/vue/components/icons/CheckboxIcon.vue   |  6 +++---
 src/vue/shared/KonstaProvider.vue           |  4 +---
 61 files changed, 260 insertions(+), 174 deletions(-)

diff --git a/src/vue/components/Actions.vue b/src/vue/components/Actions.vue
index 9f47933b..a2e429ed 100644
--- a/src/vue/components/Actions.vue
+++ b/src/vue/components/Actions.vue
@@ -9,7 +9,7 @@
   import { useContext } from '../shared/use-context.js';
 
   import { ActionsClasses } from '../../shared/classes/ActionsClasses.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-actions',
@@ -32,6 +32,7 @@
     emits: ['backdropclick'],
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/ActionsButton.vue b/src/vue/components/ActionsButton.vue
index dcb5ffa3..c22514bc 100644
--- a/src/vue/components/ActionsButton.vue
+++ b/src/vue/components/ActionsButton.vue
@@ -14,9 +14,9 @@
   import { useContext } from '../shared/use-context.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import { useTheme } from '../shared/use-theme.js';
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
   import { ActionsButtonClasses } from '../../shared/classes/ActionsButtonClasses.js';
   import { ActionsButtonColors } from '../../shared/colors/ActionsButtonColors.js';
 
@@ -56,6 +56,8 @@
     },
     setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
       const Component = computed(() => {
         let c = props.component;
@@ -74,7 +76,7 @@
         ActionsButtonColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'
diff --git a/src/vue/components/ActionsGroup.vue b/src/vue/components/ActionsGroup.vue
index 71f12523..10c32da1 100644
--- a/src/vue/components/ActionsGroup.vue
+++ b/src/vue/components/ActionsGroup.vue
@@ -7,7 +7,7 @@
   import { useContext } from '../shared/use-context.js';
   import { ActionsGroupClasses } from '../../shared/classes/ActionsGroupClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-actions-group',
@@ -28,6 +28,7 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const c = useThemeClasses(props, () =>
         ActionsGroupClasses(props, ctx.attrs.class)
       );
diff --git a/src/vue/components/ActionsLabel.vue b/src/vue/components/ActionsLabel.vue
index dbe1ead7..3964d4a4 100644
--- a/src/vue/components/ActionsLabel.vue
+++ b/src/vue/components/ActionsLabel.vue
@@ -9,8 +9,8 @@
 
   import { ActionsLabelClasses } from '../../shared/classes/ActionsLabelClasses.js';
   import { ActionsLabelColors } from '../../shared/colors/ActionsLabelColors.js';
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import { useTheme } from '../shared/use-theme.js';
 
   export default {
@@ -35,13 +35,15 @@
       fontSizeIos: { type: String, default: 'text-sm' },
       fontSizeMaterial: { type: String, default: 'text-sm' },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         ActionsLabelColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'
diff --git a/src/vue/components/Badge.vue b/src/vue/components/Badge.vue
index 0b8d5340..268709a8 100644
--- a/src/vue/components/Badge.vue
+++ b/src/vue/components/Badge.vue
@@ -8,7 +8,7 @@
   import { useContext } from '../shared/use-context.js';
   import { BadgeClasses } from '../../shared/classes/BadgeClasses.js';
   import { BadgeColors } from '../../shared/colors/BadgeColors.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-badge',
@@ -35,6 +35,7 @@
     },
     setup(props) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() => BadgeColors(props.colors || {}));
 
       const size = computed(() => (props.small ? 'sm' : 'md'));
diff --git a/src/vue/components/Block.vue b/src/vue/components/Block.vue
index c57bf49b..874392a4 100644
--- a/src/vue/components/Block.vue
+++ b/src/vue/components/Block.vue
@@ -9,9 +9,9 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -52,11 +52,13 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BlockColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isStrong = computed(() =>
         typeof props.strong === 'undefined'
diff --git a/src/vue/components/BlockFooter.vue b/src/vue/components/BlockFooter.vue
index 2784cc71..1e176b80 100644
--- a/src/vue/components/BlockFooter.vue
+++ b/src/vue/components/BlockFooter.vue
@@ -13,9 +13,9 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-footer',
@@ -39,9 +39,11 @@
       insetIos: { type: Boolean, default: false },
       insetMaterial: { type: Boolean, default: false },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
       const isInset = computed(() =>
         typeof props.inset === 'undefined'
           ? theme.value === 'ios'
diff --git a/src/vue/components/BlockHeader.vue b/src/vue/components/BlockHeader.vue
index ea6bea5c..3ed0e737 100644
--- a/src/vue/components/BlockHeader.vue
+++ b/src/vue/components/BlockHeader.vue
@@ -13,9 +13,9 @@
 
   import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-header',
@@ -41,7 +41,9 @@
     },
     setup(props) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
       const isInset = computed(() =>
         typeof props.inset === 'undefined'
           ? theme.value === 'ios'
diff --git a/src/vue/components/BlockTitle.vue b/src/vue/components/BlockTitle.vue
index fc7027c7..b35ee37b 100644
--- a/src/vue/components/BlockTitle.vue
+++ b/src/vue/components/BlockTitle.vue
@@ -11,9 +11,9 @@
 
   import { BlockTitleColors } from '../../shared/colors/BlockTitleColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-block-title',
@@ -48,6 +48,8 @@
     },
     setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BlockTitleColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Breadcrumbs.vue b/src/vue/components/Breadcrumbs.vue
index ac05f58d..68ac54f0 100644
--- a/src/vue/components/Breadcrumbs.vue
+++ b/src/vue/components/Breadcrumbs.vue
@@ -7,7 +7,7 @@
   import { useContext } from '../shared/use-context.js';
   import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-breadcrumbs',
@@ -35,6 +35,7 @@
     },
     setup(props) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const c = useThemeClasses(props, () => BreadcrumbsClasses(props));
       return {
         c,
diff --git a/src/vue/components/BreadcrumbsCollapsed.vue b/src/vue/components/BreadcrumbsCollapsed.vue
index 3bc4d5cb..010f80dd 100644
--- a/src/vue/components/BreadcrumbsCollapsed.vue
+++ b/src/vue/components/BreadcrumbsCollapsed.vue
@@ -14,9 +14,9 @@
 
   import { BreadcrumbsCollapsedColors } from '../../shared/colors/BreadcrumbsCollapsedColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-breadcrumbs-collapsed',
@@ -37,8 +37,10 @@
         type: Object,
       },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BreadcrumbsCollapsedColors(props.colors, useDarkClasses)
       );
diff --git a/src/vue/components/BreadcrumbsItem.vue b/src/vue/components/BreadcrumbsItem.vue
index 88cf678b..341b8a12 100644
--- a/src/vue/components/BreadcrumbsItem.vue
+++ b/src/vue/components/BreadcrumbsItem.vue
@@ -11,9 +11,9 @@
 
   import { BreadcrumbsItemColors } from '../../shared/colors/BreadcrumbsItemColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-breadcrumbs-item',
@@ -38,8 +38,10 @@
         default: false,
       },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         BreadcrumbsItemColors(props.colors, useDarkClasses)
       );
diff --git a/src/vue/components/BreadcrumbsSeparator.vue b/src/vue/components/BreadcrumbsSeparator.vue
index 930e71bb..9f08a3f4 100644
--- a/src/vue/components/BreadcrumbsSeparator.vue
+++ b/src/vue/components/BreadcrumbsSeparator.vue
@@ -8,7 +8,7 @@
   import { BreadcrumbsSeparatorClasses } from '../../shared/classes/BreadcrumbsSeparatorClasses.js';
   import { useContext } from '../shared/use-context.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import ChevronIcon from './icons/ChevronIcon.vue';
 
   export default {
@@ -30,6 +30,7 @@
     },
     setup(props) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const c = useThemeClasses(props, () =>
         BreadcrumbsSeparatorClasses(props)
       );
diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
index 183917e8..fbae5290 100644
--- a/src/vue/components/Button.vue
+++ b/src/vue/components/Button.vue
@@ -18,11 +18,11 @@
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { ButtonClasses } from '../../shared/classes/ButtonClasses.js';
 
@@ -169,6 +169,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
       const Component = computed(() => {
         let c = props.component;
@@ -183,7 +185,7 @@
 
       useTouchRipple(rippleElRef, props, { context });
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isOutline = computed(() =>
         typeof props.outline === 'undefined'
diff --git a/src/vue/components/Card.vue b/src/vue/components/Card.vue
index 8ec35f82..5965b1d9 100644
--- a/src/vue/components/Card.vue
+++ b/src/vue/components/Card.vue
@@ -18,11 +18,11 @@
   import { computed } from 'vue';
   import { useContext } from '../shared/use-context.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { CardClasses } from '../../shared/classes/CardClasses.js';
 
@@ -63,11 +63,13 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         CardColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isOutline = computed(() =>
         typeof props.outline === 'undefined'
diff --git a/src/vue/components/Checkbox.vue b/src/vue/components/Checkbox.vue
index d420cc95..235fefeb 100644
--- a/src/vue/components/Checkbox.vue
+++ b/src/vue/components/Checkbox.vue
@@ -31,9 +31,9 @@
 
   import { CheckboxColors } from '../../shared/colors/CheckboxColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import CheckboxIcon from './icons/CheckboxIcon.vue';
@@ -71,6 +71,8 @@
     emits: ['change'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const inputElRef = ref(null);
 
diff --git a/src/vue/components/Chip.vue b/src/vue/components/Chip.vue
index a77a34f2..c42e2bbf 100644
--- a/src/vue/components/Chip.vue
+++ b/src/vue/components/Chip.vue
@@ -21,11 +21,11 @@
 
   import { ChipColors } from '../../shared/colors/ChipColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import DeleteIcon from './icons/DeleteIcon.vue';
 
   export default {
@@ -61,8 +61,10 @@
     emits: ['delete'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const style = computed(() => (props.outline ? 'outline' : 'fill'));
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const colors = computed(() =>
         ChipColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Dialog.vue b/src/vue/components/Dialog.vue
index 8fe3852e..909f3124 100644
--- a/src/vue/components/Dialog.vue
+++ b/src/vue/components/Dialog.vue
@@ -18,9 +18,9 @@
 
   import { DialogColors } from '../../shared/colors/DialogColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-dialog',
@@ -54,6 +54,8 @@
     emits: ['backdropclick'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
       const colors = computed(() =>
         DialogColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/DialogButton.vue b/src/vue/components/DialogButton.vue
index 3b279d96..526e1cc4 100644
--- a/src/vue/components/DialogButton.vue
+++ b/src/vue/components/DialogButton.vue
@@ -25,11 +25,11 @@
   import { computed } from 'vue';
   import { useContext } from '../shared/use-context.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { DialogButtonClasses } from '../../shared/classes/DialogButtonClasses.js';
 
@@ -67,8 +67,10 @@
     },
     setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const Component = computed(() => props.component);
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
 
       const isStrong = computed(() =>
         typeof props.strong === 'undefined'
diff --git a/src/vue/components/Fab.vue b/src/vue/components/Fab.vue
index 5eb4bfa5..4b51b52a 100644
--- a/src/vue/components/Fab.vue
+++ b/src/vue/components/Fab.vue
@@ -29,11 +29,11 @@
 
   import { FabColors } from '../../shared/colors/FabColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-fab',
@@ -60,6 +60,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
       useTouchRipple(rippleElRef, props, { context });
 
diff --git a/src/vue/components/Icon.vue b/src/vue/components/Icon.vue
index d39a0737..f88a7033 100644
--- a/src/vue/components/Icon.vue
+++ b/src/vue/components/Icon.vue
@@ -16,7 +16,7 @@
   import { useContext } from '../shared/use-context.js';
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import kBadge from './Badge.vue';
 
   import { IconClasses } from '../../shared/classes/IconClasses.js';
@@ -36,7 +36,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
 
       const c = useThemeClasses(props, () =>
         IconClasses(props, ctx.attrs.class)
diff --git a/src/vue/components/Link.vue b/src/vue/components/Link.vue
index ac0e5eb6..bc33a97f 100644
--- a/src/vue/components/Link.vue
+++ b/src/vue/components/Link.vue
@@ -17,11 +17,11 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { LinkClasses } from '../../shared/classes/LinkClasses.js';
 
@@ -60,8 +60,10 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
 
       const needsTouchRipple = computed(
         () =>
diff --git a/src/vue/components/List.vue b/src/vue/components/List.vue
index 1ade9ce7..6a54d801 100644
--- a/src/vue/components/List.vue
+++ b/src/vue/components/List.vue
@@ -15,9 +15,9 @@
 
   import { ListColors } from '../../shared/colors/ListColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
@@ -57,7 +57,9 @@
     },
     setup(props, ctx) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
 
       const hasDividers = computed(() =>
         typeof props.dividers === 'undefined'
diff --git a/src/vue/components/ListButton.vue b/src/vue/components/ListButton.vue
index 632aa32a..ccf79f00 100644
--- a/src/vue/components/ListButton.vue
+++ b/src/vue/components/ListButton.vue
@@ -20,9 +20,9 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
@@ -60,6 +60,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
       useTouchRipple(rippleElRef, props, { context });
 
@@ -71,7 +73,7 @@
         ListButtonColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
 
       const c = useThemeClasses(props, () =>
         ListButtonClasses(
diff --git a/src/vue/components/ListGroup.vue b/src/vue/components/ListGroup.vue
index c42d2f2b..e7f02fd8 100644
--- a/src/vue/components/ListGroup.vue
+++ b/src/vue/components/ListGroup.vue
@@ -6,7 +6,6 @@
   </li>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import kList from './List.vue';
 
   export default {
@@ -30,8 +29,7 @@
       outlineMaterial: { type: Boolean, default: false },
       menuList: { type: Boolean, default: false },
     },
-    setup(props, ctx) {
-      const context = useContext();
+    setup(props) {
       return {
         props,
       };
diff --git a/src/vue/components/ListInput.vue b/src/vue/components/ListInput.vue
index 0942e405..12ed195e 100644
--- a/src/vue/components/ListInput.vue
+++ b/src/vue/components/ListInput.vue
@@ -90,13 +90,13 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import DeleteIcon from './icons/DeleteIcon.vue';
   import DropdownIcon from './icons/DropdownIcon.vue';
   import kListItem from './ListItem.vue';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { ListInputClasses } from '../../shared/classes/ListInputClasses.js';
 
@@ -177,9 +177,11 @@
     emits: ['change', 'input', 'focus', 'blur', 'clear'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const inputElRef = ref(null);
       const isFocused = ref(false);
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
       const isOutline = computed(() =>
         typeof props.outline === 'undefined'
           ? theme.value === 'ios'
diff --git a/src/vue/components/ListItem.vue b/src/vue/components/ListItem.vue
index 2c5b9e21..970a1593 100644
--- a/src/vue/components/ListItem.vue
+++ b/src/vue/components/ListItem.vue
@@ -55,12 +55,12 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import ChevronIcon from './icons/ChevronIcon.vue';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { ListItemClasses } from '../../shared/classes/ListItemClasses.js';
 
@@ -141,8 +141,10 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const rippleElRef = ref(null);
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
 
       const colors = computed(() =>
         ListItemColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/MenuList.vue b/src/vue/components/MenuList.vue
index 38c0f691..a59ab49b 100644
--- a/src/vue/components/MenuList.vue
+++ b/src/vue/components/MenuList.vue
@@ -4,7 +4,6 @@
   </k-list>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kList from './List.vue';
 
@@ -16,8 +15,7 @@
     props: {
       ...kList.props,
     },
-    setup(props, ctx) {
-      const context = useContext();
+    setup(props) {
       const listProps = computed(() => ({
         ...props,
         menuList: true,
diff --git a/src/vue/components/MenuListItem.vue b/src/vue/components/MenuListItem.vue
index 459e8547..6f5dec31 100644
--- a/src/vue/components/MenuListItem.vue
+++ b/src/vue/components/MenuListItem.vue
@@ -31,7 +31,6 @@
   </k-list-item>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kListItem from './ListItem.vue';
 
@@ -46,7 +45,6 @@
       active: Boolean,
     },
     setup(props, ctx) {
-      const context = useContext();
       const listItemProps = computed(() => ({
         ...props,
         menuListItem: true,
diff --git a/src/vue/components/Message.vue b/src/vue/components/Message.vue
index 9933c3ed..aed5ed00 100644
--- a/src/vue/components/Message.vue
+++ b/src/vue/components/Message.vue
@@ -34,8 +34,8 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -43,9 +43,9 @@
 
   import { MessageColors } from '../../shared/colors/MessageColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-message',
@@ -77,6 +77,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
 
       const colors = computed(() =>
diff --git a/src/vue/components/Messagebar.vue b/src/vue/components/Messagebar.vue
index d2c983dd..b0bd0239 100644
--- a/src/vue/components/Messagebar.vue
+++ b/src/vue/components/Messagebar.vue
@@ -23,16 +23,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { MessagebarClasses } from '../../shared/classes/MessagebarClasses.js';
 
   import { MessagebarColors } from '../../shared/colors/MessagebarColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import kToolbar from './Toolbar.vue';
 
   export default {
@@ -70,6 +70,8 @@
     emits: ['change', 'input', 'focus'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const areaElRef = ref(null);
       const isFocused = ref(false);
diff --git a/src/vue/components/Messages.vue b/src/vue/components/Messages.vue
index 18e76a9f..23630ab1 100644
--- a/src/vue/components/Messages.vue
+++ b/src/vue/components/Messages.vue
@@ -4,12 +4,12 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { MessagesClasses } from '../../shared/classes/MessagesClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-messages',
@@ -33,6 +33,7 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/MessagesTitle.vue b/src/vue/components/MessagesTitle.vue
index 9f89d8a7..55b3baa9 100644
--- a/src/vue/components/MessagesTitle.vue
+++ b/src/vue/components/MessagesTitle.vue
@@ -4,16 +4,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { MessagesTitleClasses } from '../../shared/classes/MessagesTitleClasses.js';
 
   import { MessagesTitleColors } from '../../shared/colors/MessagesTitleColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-messages-title',
@@ -35,8 +35,10 @@
       },
       id: String,
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
 
       const colors = computed(() =>
diff --git a/src/vue/components/Navbar.vue b/src/vue/components/Navbar.vue
index a69c9342..8099e3fc 100644
--- a/src/vue/components/Navbar.vue
+++ b/src/vue/components/Navbar.vue
@@ -32,14 +32,14 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed, onMounted, onBeforeUnmount, onUpdated, ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { NavbarClasses } from '../../shared/classes/NavbarClasses.js';
 
@@ -98,6 +98,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const titleContainerHeight = ref(0);
       const bgElRef = ref(null);
@@ -111,7 +113,7 @@
       );
       const wasScrollable = ref(isScrollable.value);
 
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
       const colors = computed(() =>
         NavbarColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/NavbarBackLink.vue b/src/vue/components/NavbarBackLink.vue
index 578b7caf..1488be7d 100644
--- a/src/vue/components/NavbarBackLink.vue
+++ b/src/vue/components/NavbarBackLink.vue
@@ -8,12 +8,12 @@
   </k-link>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import kBackIcon from './icons/BackIcon.vue';
   import kLink from './Link.vue';
 
@@ -50,9 +50,10 @@
         default: 'auto',
       },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
-      const theme = useTheme(props);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme(props, context);
       const shouldShowText = computed(
         () =>
           (props.showText === 'auto' && theme.value === 'ios') ||
diff --git a/src/vue/components/Notification.vue b/src/vue/components/Notification.vue
index 5ea1a643..9860f3d4 100644
--- a/src/vue/components/Notification.vue
+++ b/src/vue/components/Notification.vue
@@ -75,16 +75,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { NotificationsClasses } from '../../shared/classes/NotificationsClasses.js';
 
   import { NotificationsColors } from '../../shared/colors/NotificationsColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTheme } from '../shared/use-theme.js';
   import DeleteIcon from './icons/DeleteIcon.vue';
@@ -128,7 +128,9 @@
     emits: ['close'],
     setup(props, ctx) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
 
       const colors = computed(() =>
         NotificationsColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Page.vue b/src/vue/components/Page.vue
index 44d840ab..ae5da1be 100644
--- a/src/vue/components/Page.vue
+++ b/src/vue/components/Page.vue
@@ -4,16 +4,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { PageClasses } from '../../shared/classes/PageClasses.js';
 
   import { PageColors } from '../../shared/colors/PageColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-page',
@@ -36,6 +36,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         PageColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Panel.vue b/src/vue/components/Panel.vue
index d258883d..d0a6e26f 100644
--- a/src/vue/components/Panel.vue
+++ b/src/vue/components/Panel.vue
@@ -5,8 +5,8 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -14,9 +14,9 @@
 
   import { PanelColors } from '../../shared/colors/PanelColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-panel',
@@ -45,6 +45,8 @@
     emits: ['backdropclick'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
       const colors = computed(() =>
         PanelColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Popover.vue b/src/vue/components/Popover.vue
index e84aac22..48f5c85b 100644
--- a/src/vue/components/Popover.vue
+++ b/src/vue/components/Popover.vue
@@ -19,13 +19,14 @@
 
   import { cls } from '../../shared/cls.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
+  import { useContext } from '../shared/use-context.js';
   import { useTheme } from '../shared/use-theme.js';
 
   import { calcPopoverPosition } from '../../shared/calc-popover-position.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { PopoverClasses } from '../../shared/classes/PopoverClasses.js';
 
@@ -64,6 +65,8 @@
     emits: ['backdropclick'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const angleElRef = ref(null);
       const positions = ref({
@@ -75,7 +78,7 @@
         popoverLeft: 0,
         popoverPosition: 'top-left',
       });
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
 
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
 
diff --git a/src/vue/components/Popup.vue b/src/vue/components/Popup.vue
index cd2f254e..e57c2e9f 100644
--- a/src/vue/components/Popup.vue
+++ b/src/vue/components/Popup.vue
@@ -5,8 +5,8 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -14,9 +14,9 @@
 
   import { PopupColors } from '../../shared/colors/PopupColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-popup',
@@ -43,6 +43,8 @@
     emits: ['backdropclick'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
       const colors = computed(() =>
         PopupColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Preloader.vue b/src/vue/components/Preloader.vue
index e830e770..7561cac2 100644
--- a/src/vue/components/Preloader.vue
+++ b/src/vue/components/Preloader.vue
@@ -7,14 +7,14 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import PreloaderIOS from './icons/PreloaderIOS.vue';
   import PreloaderMaterial from './icons/PreloaderMaterial.vue';
@@ -46,9 +46,11 @@
         default: 'w-8 h-8',
       },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
-      const theme = useTheme(props);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme(props, context);
 
       const colors = computed(() =>
         PreloaderColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Progressbar.vue b/src/vue/components/Progressbar.vue
index c2574407..9bd5287d 100644
--- a/src/vue/components/Progressbar.vue
+++ b/src/vue/components/Progressbar.vue
@@ -8,16 +8,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { ProgressbarClasses } from '../../shared/classes/ProgressbarClasses.js';
 
   import { ProgressbarColors } from '../../shared/colors/ProgressbarColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-progressbar',
@@ -42,8 +42,10 @@
         default: 0,
       },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         ProgressbarColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Radio.vue b/src/vue/components/Radio.vue
index e7d6b208..964d2881 100644
--- a/src/vue/components/Radio.vue
+++ b/src/vue/components/Radio.vue
@@ -26,9 +26,9 @@
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
   import CheckboxIcon from './icons/CheckboxIcon.vue';
 
   import { RadioClasses } from '../../shared/classes/RadioClasses.js';
@@ -66,8 +66,10 @@
     emits: ['change'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
 
       useTouchRipple(elRef, props, { context });
 
diff --git a/src/vue/components/Range.vue b/src/vue/components/Range.vue
index 29e80fe2..8d72a3d3 100644
--- a/src/vue/components/Range.vue
+++ b/src/vue/components/Range.vue
@@ -21,8 +21,8 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -30,9 +30,9 @@
 
   import { RangeColors } from '../../shared/colors/RangeColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-range',
@@ -64,6 +64,8 @@
     emits: ['input', 'change', 'focus', 'blur'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         RangeColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Searchbar.vue b/src/vue/components/Searchbar.vue
index 9a5713a0..1017517b 100644
--- a/src/vue/components/Searchbar.vue
+++ b/src/vue/components/Searchbar.vue
@@ -59,16 +59,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref, computed, onMounted } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { SearchbarClasses } from '../../shared/classes/SearchbarClasses.js';
 
@@ -130,6 +130,8 @@
     ],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const searchElRef = ref(null);
       const disableButtonRef = ref(null);
@@ -137,7 +139,7 @@
       const disableTimeout = ref(null);
       const allowTransition = ref(false);
       const isEnabled = ref(false);
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
 
       useTouchRipple(elRef, props, { context });
 
diff --git a/src/vue/components/Segmented.vue b/src/vue/components/Segmented.vue
index 3b39a7a7..b676fcae 100644
--- a/src/vue/components/Segmented.vue
+++ b/src/vue/components/Segmented.vue
@@ -11,8 +11,8 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed, ref, onMounted, onUpdated } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -20,9 +20,9 @@
 
   import { SegmentedColors } from '../../shared/colors/SegmentedColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-segmented',
@@ -48,8 +48,10 @@
       strong: { type: Boolean, default: false },
       rounded: { type: Boolean, default: false },
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const highlightElRef = ref(null);
       const highlightStyle = ref({
         transform: '',
diff --git a/src/vue/components/SegmentedButton.vue b/src/vue/components/SegmentedButton.vue
index abedb5d1..3208a71c 100644
--- a/src/vue/components/SegmentedButton.vue
+++ b/src/vue/components/SegmentedButton.vue
@@ -4,7 +4,6 @@
   </k-button>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kButton from './Button.vue';
 
@@ -21,8 +20,7 @@
       clear: { type: Boolean, default: false },
       rounded: { type: Boolean, default: false },
     },
-    setup(props, ctx) {
-      const context = useContext();
+    setup(props) {
       const buttonProps = computed(() => {
         return {
           ...props,
diff --git a/src/vue/components/Sheet.vue b/src/vue/components/Sheet.vue
index b10cc2b5..89078f43 100644
--- a/src/vue/components/Sheet.vue
+++ b/src/vue/components/Sheet.vue
@@ -5,8 +5,8 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -14,9 +14,9 @@
 
   import { SheetColors } from '../../shared/colors/SheetColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-sheet',
@@ -42,6 +42,8 @@
     emits: ['backdropclick'],
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const state = computed(() => (props.opened ? 'opened' : 'closed'));
 
       const colors = computed(() =>
diff --git a/src/vue/components/Stepper.vue b/src/vue/components/Stepper.vue
index f778ea74..1e3c194d 100644
--- a/src/vue/components/Stepper.vue
+++ b/src/vue/components/Stepper.vue
@@ -37,8 +37,8 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { cls } from '../../shared/cls.js';
 
@@ -48,9 +48,9 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
@@ -103,7 +103,9 @@
     emits: ['input', 'change', 'focus', 'blur', 'minus', 'plus'],
     setup(props, ctx) {
       const context = useContext();
-      const theme = useTheme(context);
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
+      const theme = useTheme({}, context);
       const buttonLeftElRef = ref(null);
       const buttonRightElRef = ref(null);
       useTouchRipple(buttonLeftElRef, props, { context });
diff --git a/src/vue/components/Tabbar.vue b/src/vue/components/Tabbar.vue
index d4c231dc..89466cea 100644
--- a/src/vue/components/Tabbar.vue
+++ b/src/vue/components/Tabbar.vue
@@ -4,7 +4,6 @@
   </k-toolbar>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kToolbar from './Toolbar.vue';
 
@@ -22,8 +21,7 @@
         type: Boolean,
       },
     },
-    setup(props, ctx) {
-      const context = useContext();
+    setup(props) {
       const toolbarProps = computed(() => {
         return {
           ...props,
diff --git a/src/vue/components/TabbarLink.vue b/src/vue/components/TabbarLink.vue
index ab2a4610..e6992c2b 100644
--- a/src/vue/components/TabbarLink.vue
+++ b/src/vue/components/TabbarLink.vue
@@ -25,16 +25,16 @@
   </k-link>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed, ref, onBeforeUpdate } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { TabbarLinkClasses } from '../../shared/classes/TabbarLinkClasses.js';
 
   import { TabbarLinkColors } from '../../shared/colors/TabbarLinkColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
   import kLink from './Link.vue';
 
   export default {
@@ -60,6 +60,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         TabbarLinkColors(props.colors, useDarkClasses)
       );
diff --git a/src/vue/components/Table.vue b/src/vue/components/Table.vue
index 1a1e59cd..ac99de9e 100644
--- a/src/vue/components/Table.vue
+++ b/src/vue/components/Table.vue
@@ -4,12 +4,12 @@
   </table>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { TableClasses } from '../../shared/classes/TableClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-table',
@@ -25,6 +25,7 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/TableBody.vue b/src/vue/components/TableBody.vue
index 4e50f127..ff285d17 100644
--- a/src/vue/components/TableBody.vue
+++ b/src/vue/components/TableBody.vue
@@ -4,12 +4,12 @@
   </tbody>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { TableBodyClasses } from '../../shared/classes/TableBodyClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-table-body',
@@ -25,6 +25,7 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/TableCell.vue b/src/vue/components/TableCell.vue
index a4344c0e..ed1d6e32 100644
--- a/src/vue/components/TableCell.vue
+++ b/src/vue/components/TableCell.vue
@@ -4,16 +4,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { TableCellClasses } from '../../shared/classes/TableCellClasses.js';
 
   import { TableCellColors } from '../../shared/colors/TableCellColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-table-cell',
@@ -36,6 +36,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const component = computed(() => (props.header ? 'th' : 'td'));
 
diff --git a/src/vue/components/TableHead.vue b/src/vue/components/TableHead.vue
index 3bfde4bc..0dd78bd7 100644
--- a/src/vue/components/TableHead.vue
+++ b/src/vue/components/TableHead.vue
@@ -4,12 +4,12 @@
   </thead>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { TableHeadClasses } from '../../shared/classes/TableHeadClasses.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-table-head',
@@ -25,6 +25,7 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/TableRow.vue b/src/vue/components/TableRow.vue
index a206b97d..d28cc73a 100644
--- a/src/vue/components/TableRow.vue
+++ b/src/vue/components/TableRow.vue
@@ -11,9 +11,9 @@
 
   import { TableRowColors } from '../../shared/colors/TableRowColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   export default {
     name: 'k-table-row',
@@ -36,6 +36,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
 
       const colors = computed(() =>
diff --git a/src/vue/components/Toast.vue b/src/vue/components/Toast.vue
index 8cd85fb3..44b6bda6 100644
--- a/src/vue/components/Toast.vue
+++ b/src/vue/components/Toast.vue
@@ -7,16 +7,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { ToastClasses } from '../../shared/classes/ToastClasses.js';
 
   import { ToastColors } from '../../shared/colors/ToastColors.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   export default {
     name: 'k-toast',
@@ -42,6 +42,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const colors = computed(() =>
         ToastColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Toggle.vue b/src/vue/components/Toggle.vue
index ce004cbe..6ca7f666 100644
--- a/src/vue/components/Toggle.vue
+++ b/src/vue/components/Toggle.vue
@@ -17,16 +17,16 @@
   </component>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed, ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
 
   import { ToggleClasses } from '../../shared/classes/ToggleClasses.js';
 
   import { ToggleColors } from '../../shared/colors/ToggleColors.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
@@ -57,6 +57,8 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const elRef = ref(null);
       const rippleTargetElRef = ref(null);
 
diff --git a/src/vue/components/Toolbar.vue b/src/vue/components/Toolbar.vue
index d202e636..44de0469 100644
--- a/src/vue/components/Toolbar.vue
+++ b/src/vue/components/Toolbar.vue
@@ -18,9 +18,9 @@
 
   import { useTheme } from '../shared/use-theme.js';
 
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
+  import { themeClasses } from '../shared/use-theme-classes.js';
 
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { darkClasses } from '../shared/use-dark-classes.js';
 
   import { ToolbarClasses } from '../../shared/classes/ToolbarClasses.js';
 
@@ -59,12 +59,14 @@
     },
     setup(props, ctx) {
       const context = useContext();
+      const useDarkClasses = darkClasses(context);
+      const useThemeClasses = themeClasses(context);
       const highlightElRef = ref(null);
       const highlightStyle = ref({
         transform: '',
         width: '',
       });
-      const theme = useTheme(context);
+      const theme = useTheme({}, context);
       const hasHighlight = computed(
         () => theme.value === 'material' && props.tabbar && !props.tabbarIcons
       );
diff --git a/src/vue/components/icons/CheckboxIcon.vue b/src/vue/components/icons/CheckboxIcon.vue
index da68b81e..576a57d6 100644
--- a/src/vue/components/icons/CheckboxIcon.vue
+++ b/src/vue/components/icons/CheckboxIcon.vue
@@ -29,7 +29,7 @@
   </svg>
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
+  import { useContext } from '../../shared/use-context.js';
   import { useTheme } from '../../shared/use-theme.js';
 
   export default {
@@ -39,9 +39,9 @@
       material: { type: Boolean, default: undefined },
       fill: Boolean,
     },
-    setup(props, ctx) {
+    setup(props) {
       const context = useContext();
-      const theme = useTheme(props);
+      const theme = useTheme(props, context);
       return {
         theme,
       };
diff --git a/src/vue/shared/KonstaProvider.vue b/src/vue/shared/KonstaProvider.vue
index 342e1a86..ddd17717 100644
--- a/src/vue/shared/KonstaProvider.vue
+++ b/src/vue/shared/KonstaProvider.vue
@@ -2,7 +2,6 @@
   <slot />
 </template>
 <script>
-  import { useContext } from '../shared/use-context.js';
   import { computed, provide } from 'vue';
 
   import { useAutoTheme } from './use-auto-theme.js';
@@ -27,8 +26,7 @@
         default: true,
       },
     },
-    setup(props, ctx) {
-      const context = useContext();
+    setup(props) {
       const currentTheme = useAutoTheme(props, props.autoThemeDetection);
 
       const KonstaContext = computed(() => ({