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

---
 src/vue/components/Actions.vue              |  3 +++
 src/vue/components/ActionsButton.vue        | 24 ++++++++++-----------
 src/vue/components/ActionsGroup.vue         |  9 ++++----
 src/vue/components/ActionsLabel.vue         | 17 ++++++++-------
 src/vue/components/App.vue                  |  4 +++-
 src/vue/components/Badge.vue                |  2 ++
 src/vue/components/Block.vue                | 10 ++++++++-
 src/vue/components/BlockFooter.vue          | 11 ++++++++--
 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               | 15 ++++++++++---
 src/vue/components/Card.vue                 |  9 +++++++-
 src/vue/components/Checkbox.vue             | 11 ++++++++--
 src/vue/components/Chip.vue                 |  9 +++++++-
 src/vue/components/Dialog.vue               |  6 ++++++
 src/vue/components/DialogButton.vue         |  9 +++++++-
 src/vue/components/Fab.vue                  | 11 ++++++++--
 src/vue/components/Icon.vue                 |  6 +++++-
 src/vue/components/Link.vue                 | 21 ++++++++++++------
 src/vue/components/List.vue                 | 10 ++++++++-
 src/vue/components/ListButton.vue           | 12 +++++++++--
 src/vue/components/ListGroup.vue            |  4 +++-
 src/vue/components/ListInput.vue            | 10 ++++++++-
 src/vue/components/ListItem.vue             | 11 +++++++++-
 src/vue/components/MenuList.vue             |  4 +++-
 src/vue/components/MenuListItem.vue         |  2 ++
 src/vue/components/Message.vue              |  7 ++++++
 src/vue/components/Messagebar.vue           |  6 ++++++
 src/vue/components/Messages.vue             |  4 ++++
 src/vue/components/MessagesTitle.vue        |  8 ++++++-
 src/vue/components/Navbar.vue               |  6 ++++++
 src/vue/components/NavbarBackLink.vue       |  7 +++++-
 src/vue/components/Notification.vue         |  9 +++++++-
 src/vue/components/Page.vue                 |  6 ++++++
 src/vue/components/Panel.vue                |  7 ++++++
 src/vue/components/Popover.vue              |  9 ++++++++
 src/vue/components/Popup.vue                |  7 ++++++
 src/vue/components/Preloader.vue            |  9 +++++++-
 src/vue/components/Progressbar.vue          |  8 ++++++-
 src/vue/components/Radio.vue                | 10 ++++++++-
 src/vue/components/Range.vue                |  7 ++++++
 src/vue/components/Searchbar.vue            | 10 ++++++++-
 src/vue/components/Segmented.vue            |  9 +++++++-
 src/vue/components/SegmentedButton.vue      |  4 +++-
 src/vue/components/Sheet.vue                |  7 ++++++
 src/vue/components/Stepper.vue              | 15 ++++++++++---
 src/vue/components/Tabbar.vue               |  4 +++-
 src/vue/components/TabbarLink.vue           |  6 ++++++
 src/vue/components/Table.vue                |  4 ++++
 src/vue/components/TableBody.vue            |  4 ++++
 src/vue/components/TableCell.vue            |  6 ++++++
 src/vue/components/TableHead.vue            |  4 ++++
 src/vue/components/TableRow.vue             |  8 ++++++-
 src/vue/components/Toast.vue                |  6 ++++++
 src/vue/components/Toggle.vue               |  9 +++++++-
 src/vue/components/Toolbar.vue              | 11 ++++++++--
 src/vue/components/icons/CheckboxIcon.vue   |  4 +++-
 src/vue/shared/KonstaProvider.vue           |  6 ++++--
 src/vue/shared/use-context.js               |  5 +++++
 src/vue/shared/use-dark-classes.js          | 11 +++++-----
 src/vue/shared/use-theme-classes.js         | 14 +++++++-----
 src/vue/shared/use-theme.js                 | 10 +++++----
 src/vue/shared/use-touch-ripple.js          |  5 ++---
 67 files changed, 444 insertions(+), 94 deletions(-)
 create mode 100644 src/vue/shared/use-context.js

diff --git a/src/vue/components/Actions.vue b/src/vue/components/Actions.vue
index b82606ff..9f47933b 100644
--- a/src/vue/components/Actions.vue
+++ b/src/vue/components/Actions.vue
@@ -6,6 +6,8 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { ActionsClasses } from '../../shared/classes/ActionsClasses.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
@@ -29,6 +31,7 @@
     },
     emits: ['backdropclick'],
     setup(props, ctx) {
+      const context = useContext();
       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 0a39fa9a..dcb5ffa3 100644
--- a/src/vue/components/ActionsButton.vue
+++ b/src/vue/components/ActionsButton.vue
@@ -11,6 +11,8 @@
 </template>
 <script>
   import { ref, computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import { useTheme } from '../shared/use-theme.js';
@@ -52,7 +54,8 @@
       fontSizeIos: { type: String, default: 'text-xl' },
       fontSizeMaterial: { type: String, default: 'text-base' },
     },
-    setup(props, ctx) {
+    setup(props) {
+      const context = useContext();
       const rippleElRef = ref(null);
       const Component = computed(() => {
         let c = props.component;
@@ -65,13 +68,13 @@
         return c;
       });
 
-      useTouchRipple(rippleElRef, props);
+      useTouchRipple(rippleElRef, props, { context });
 
       const colors = computed(() =>
         ActionsButtonColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme();
+      const theme = useTheme(context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'
@@ -87,15 +90,12 @@
           : props.bold
       );
 
-      const c = useThemeClasses(
-        props,
-        () =>
-          ActionsButtonClasses(
-            { ...props, bold: isBold.value, dividers: isDividers.value },
-            colors.value,
-            useDarkClasses
-          ),
-        ctx.attrs.class
+      const c = useThemeClasses(props, () =>
+        ActionsButtonClasses(
+          { ...props, bold: isBold.value, dividers: isDividers.value },
+          colors.value,
+          useDarkClasses
+        )
       );
 
       return {
diff --git a/src/vue/components/ActionsGroup.vue b/src/vue/components/ActionsGroup.vue
index bcf3dc66..71f12523 100644
--- a/src/vue/components/ActionsGroup.vue
+++ b/src/vue/components/ActionsGroup.vue
@@ -4,7 +4,9 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ActionsGroupClasses } from '../../shared/classes/ActionsGroupClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -25,10 +27,9 @@
       dividers: { type: Boolean, default: true },
     },
     setup(props, ctx) {
-      const c = useThemeClasses(
-        props,
-        () => ActionsGroupClasses(props),
-        ctx.attrs.class
+      const context = useContext();
+      const c = useThemeClasses(props, () =>
+        ActionsGroupClasses(props, ctx.attrs.class)
       );
 
       return {
diff --git a/src/vue/components/ActionsLabel.vue b/src/vue/components/ActionsLabel.vue
index 3a41a1c1..dbe1ead7 100644
--- a/src/vue/components/ActionsLabel.vue
+++ b/src/vue/components/ActionsLabel.vue
@@ -5,11 +5,13 @@
 </template>
 <script>
   import { computed } from 'vue';
-  import { useTheme } from '../shared/use-theme.js';
-  import { useThemeClasses } from '../shared/use-theme-classes.js';
-  import { useDarkClasses } from '../shared/use-dark-classes.js';
+  import { useContext } from '../shared/use-context.js';
+
   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 { useTheme } from '../shared/use-theme.js';
 
   export default {
     name: 'k-actions-label',
@@ -34,11 +36,12 @@
       fontSizeMaterial: { type: String, default: 'text-sm' },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         ActionsLabelColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme();
+      const theme = useTheme(context);
 
       const isDividers = computed(() =>
         typeof props.dividers === 'undefined'
@@ -46,10 +49,8 @@
           : props.dividers
       );
 
-      const c = useThemeClasses(
-        { ...props, dividers: isDividers.value },
-        () => ActionsLabelClasses(props, colors.value),
-        ctx.attrs.class
+      const c = useThemeClasses({ ...props, dividers: isDividers.value }, () =>
+        ActionsLabelClasses(props, colors.value)
       );
 
       return {
diff --git a/src/vue/components/App.vue b/src/vue/components/App.vue
index 2a7ced14..4bc0e66d 100644
--- a/src/vue/components/App.vue
+++ b/src/vue/components/App.vue
@@ -12,8 +12,10 @@
 </template>
 <script>
   import { computed } from 'vue';
-  import { useAutoTheme } from '../shared/use-auto-theme.js';
+
   import KonstaProvider from '../shared/KonstaProvider.vue';
+  import { useAutoTheme } from '../shared/use-auto-theme.js';
+
   import { AppClasses } from '../../shared/classes/AppClasses.js';
 
   export default {
diff --git a/src/vue/components/Badge.vue b/src/vue/components/Badge.vue
index 4fb09b48..0b8d5340 100644
--- a/src/vue/components/Badge.vue
+++ b/src/vue/components/Badge.vue
@@ -5,6 +5,7 @@
 </template>
 <script>
   import { computed } from 'vue';
+  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';
@@ -33,6 +34,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       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 3e959535..c57bf49b 100644
--- a/src/vue/components/Block.vue
+++ b/src/vue/components/Block.vue
@@ -5,11 +5,18 @@
 </template>
 <script>
   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 { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { cls } from '../../shared/cls.js';
+
   import { BlockClasses } from '../../shared/classes/BlockClasses.js';
+
   import { BlockColors } from '../../shared/colors/BlockColors.js';
 
   export default {
@@ -44,11 +51,12 @@
       nested: { type: Boolean, default: false },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         BlockColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme();
+      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 0fe08dd2..2784cc71 100644
--- a/src/vue/components/BlockFooter.vue
+++ b/src/vue/components/BlockFooter.vue
@@ -5,10 +5,16 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BlockFooterClasses } from '../../shared/classes/BlockFooterClasses.js';
+
   import { BlockFooterColors } from '../../shared/colors/BlockFooterColors.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -33,8 +39,9 @@
       insetIos: { type: Boolean, default: false },
       insetMaterial: { type: Boolean, default: false },
     },
-    setup(props) {
-      const theme = useTheme();
+    setup(props, ctx) {
+      const context = useContext();
+      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 6257a892..ea6bea5c 100644
--- a/src/vue/components/BlockHeader.vue
+++ b/src/vue/components/BlockHeader.vue
@@ -5,11 +5,16 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useTheme } from '../shared/use-theme.js';
 
   import { BlockHeaderClasses } from '../../shared/classes/BlockHeaderClasses.js';
+
   import { BlockHeaderColors } from '../../shared/colors/BlockHeaderColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -35,7 +40,8 @@
       insetMaterial: { type: Boolean, default: false },
     },
     setup(props) {
-      const theme = useTheme();
+      const context = useContext();
+      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 0f8b52a1..fc7027c7 100644
--- a/src/vue/components/BlockTitle.vue
+++ b/src/vue/components/BlockTitle.vue
@@ -5,9 +5,14 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BlockTitleClasses } from '../../shared/classes/BlockTitleClasses.js';
+
   import { BlockTitleColors } from '../../shared/colors/BlockTitleColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -42,6 +47,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const colors = computed(() =>
         BlockTitleColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Breadcrumbs.vue b/src/vue/components/Breadcrumbs.vue
index b77c3afb..ac05f58d 100644
--- a/src/vue/components/Breadcrumbs.vue
+++ b/src/vue/components/Breadcrumbs.vue
@@ -4,7 +4,9 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -32,6 +34,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const c = useThemeClasses(props, () => BreadcrumbsClasses(props));
       return {
         c,
diff --git a/src/vue/components/BreadcrumbsCollapsed.vue b/src/vue/components/BreadcrumbsCollapsed.vue
index c2d18971..3bc4d5cb 100644
--- a/src/vue/components/BreadcrumbsCollapsed.vue
+++ b/src/vue/components/BreadcrumbsCollapsed.vue
@@ -8,9 +8,14 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BreadcrumbsCollapsedClasses } from '../../shared/classes/BreadcrumbsCollapsedClasses.js';
+
   import { BreadcrumbsCollapsedColors } from '../../shared/colors/BreadcrumbsCollapsedColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -32,7 +37,8 @@
         type: Object,
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         BreadcrumbsCollapsedColors(props.colors, useDarkClasses)
       );
diff --git a/src/vue/components/BreadcrumbsItem.vue b/src/vue/components/BreadcrumbsItem.vue
index 9daa6a9d..88cf678b 100644
--- a/src/vue/components/BreadcrumbsItem.vue
+++ b/src/vue/components/BreadcrumbsItem.vue
@@ -5,9 +5,14 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { BreadcrumbsItemClasses } from '../../shared/classes/BreadcrumbsItemClasses.js';
+
   import { BreadcrumbsItemColors } from '../../shared/colors/BreadcrumbsItemColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -33,7 +38,8 @@
         default: false,
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         BreadcrumbsItemColors(props.colors, useDarkClasses)
       );
diff --git a/src/vue/components/BreadcrumbsSeparator.vue b/src/vue/components/BreadcrumbsSeparator.vue
index 37c02200..930e71bb 100644
--- a/src/vue/components/BreadcrumbsSeparator.vue
+++ b/src/vue/components/BreadcrumbsSeparator.vue
@@ -6,6 +6,8 @@
 </template>
 <script>
   import { BreadcrumbsSeparatorClasses } from '../../shared/classes/BreadcrumbsSeparatorClasses.js';
+  import { useContext } from '../shared/use-context.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import ChevronIcon from './icons/ChevronIcon.vue';
 
@@ -27,6 +29,7 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const c = useThemeClasses(props, () =>
         BreadcrumbsSeparatorClasses(props)
       );
diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
index 92c62e99..183917e8 100644
--- a/src/vue/components/Button.vue
+++ b/src/vue/components/Button.vue
@@ -11,13 +11,21 @@
   </component>
 </template>
 <script>
-  import { ref, computed } from 'vue';
+  import { computed, ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { cls } from '../../shared/cls.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { ButtonClasses } from '../../shared/classes/ButtonClasses.js';
+
   import { ButtonColors } from '../../shared/colors/ButtonColors.js';
 
   export default {
@@ -160,6 +168,7 @@
       },
     },
     setup(props, ctx) {
+      const context = useContext();
       const rippleElRef = ref(null);
       const Component = computed(() => {
         let c = props.component;
@@ -172,9 +181,9 @@
         return c;
       });
 
-      useTouchRipple(rippleElRef, props);
+      useTouchRipple(rippleElRef, props, { context });
 
-      const theme = useTheme();
+      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 e4ce558d..8ec35f82 100644
--- a/src/vue/components/Card.vue
+++ b/src/vue/components/Card.vue
@@ -16,10 +16,16 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { CardClasses } from '../../shared/classes/CardClasses.js';
+
   import { CardColors } from '../../shared/colors/CardColors.js';
 
   export default {
@@ -56,11 +62,12 @@
       footerDivider: { type: Boolean, default: false },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         CardColors(props.colors || {}, useDarkClasses)
       );
 
-      const theme = useTheme();
+      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 c52d213a..d420cc95 100644
--- a/src/vue/components/Checkbox.vue
+++ b/src/vue/components/Checkbox.vue
@@ -24,11 +24,17 @@
   </component>
 </template>
 <script>
-  import { ref, computed, watch, onMounted } from 'vue';
+  import { computed, onMounted, ref, watch } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { CheckboxClasses } from '../../shared/classes/CheckboxClasses.js';
+
   import { CheckboxColors } from '../../shared/colors/CheckboxColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import CheckboxIcon from './icons/CheckboxIcon.vue';
 
@@ -64,10 +70,11 @@
     },
     emits: ['change'],
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
       const inputElRef = ref(null);
 
-      useTouchRipple(elRef, props);
+      useTouchRipple(elRef, props, { context });
 
       const colors = computed(() =>
         CheckboxColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Chip.vue b/src/vue/components/Chip.vue
index fdb15fb7..a77a34f2 100644
--- a/src/vue/components/Chip.vue
+++ b/src/vue/components/Chip.vue
@@ -15,10 +15,16 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { ChipClasses } from '../../shared/classes/ChipClasses.js';
+
   import { ChipColors } from '../../shared/colors/ChipColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import DeleteIcon from './icons/DeleteIcon.vue';
 
@@ -54,8 +60,9 @@
     },
     emits: ['delete'],
     setup(props, ctx) {
+      const context = useContext();
       const style = computed(() => (props.outline ? 'outline' : 'fill'));
-      const theme = useTheme();
+      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 2b0f72ee..8fe3852e 100644
--- a/src/vue/components/Dialog.vue
+++ b/src/vue/components/Dialog.vue
@@ -12,9 +12,14 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { DialogClasses } from '../../shared/classes/DialogClasses.js';
+
   import { DialogColors } from '../../shared/colors/DialogColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -48,6 +53,7 @@
     },
     emits: ['backdropclick'],
     setup(props, ctx) {
+      const context = useContext();
       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 7a8bd5b2..3b279d96 100644
--- a/src/vue/components/DialogButton.vue
+++ b/src/vue/components/DialogButton.vue
@@ -23,10 +23,16 @@
 </template>
 <script>
   import { computed } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { DialogButtonClasses } from '../../shared/classes/DialogButtonClasses.js';
+
   import { DialogButtonColors } from '../../shared/colors/DialogButtonColors.js';
   import Button from './Button.vue';
 
@@ -60,8 +66,9 @@
       },
     },
     setup(props) {
+      const context = useContext();
       const Component = computed(() => props.component);
-      const theme = useTheme();
+      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 a0e6f35d..5eb4bfa5 100644
--- a/src/vue/components/Fab.vue
+++ b/src/vue/components/Fab.vue
@@ -22,11 +22,17 @@
   </component>
 </template>
 <script>
-  import { ref, computed } from 'vue';
+  import { computed, ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { FabClasses } from '../../shared/classes/FabClasses.js';
+
   import { FabColors } from '../../shared/colors/FabColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -53,8 +59,9 @@
       touchRipple: { type: Boolean, default: true },
     },
     setup(props, ctx) {
+      const context = useContext();
       const rippleElRef = ref(null);
-      useTouchRipple(rippleElRef, props);
+      useTouchRipple(rippleElRef, props, { context });
 
       const colors = computed(() =>
         FabColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Icon.vue b/src/vue/components/Icon.vue
index f6693746..d39a0737 100644
--- a/src/vue/components/Icon.vue
+++ b/src/vue/components/Icon.vue
@@ -13,9 +13,12 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import kBadge from './Badge.vue';
+
   import { IconClasses } from '../../shared/classes/IconClasses.js';
 
   export default {
@@ -32,7 +35,8 @@
       badgeColors: Object,
     },
     setup(props, ctx) {
-      const theme = useTheme();
+      const context = useContext();
+      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 6f782e11..ac0e5eb6 100644
--- a/src/vue/components/Link.vue
+++ b/src/vue/components/Link.vue
@@ -11,13 +11,20 @@
   </component>
 </template>
 <script>
-  import { ref, computed } from 'vue';
+  import { computed, ref } from 'vue';
   import { cls } from '../../shared/cls.js';
+  import { useContext } from '../shared/use-context.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { LinkClasses } from '../../shared/classes/LinkClasses.js';
+
   import { LinkColors } from '../../shared/colors/LinkColors.js';
 
   export default {
@@ -52,6 +59,7 @@
       touchRipple: { type: Boolean, default: undefined },
     },
     setup(props, ctx) {
+      const context = useContext();
       const rippleElRef = ref(null);
       const theme = useTheme(props);
 
@@ -63,14 +71,13 @@
               (props.toolbar || props.tabbar || props.navbar)))
       );
 
-      useTouchRipple(
-        rippleElRef,
-        props,
-        () =>
+      useTouchRipple(rippleElRef, props, {
+        context,
+        addCondition: () =>
           props.touchRipple ||
           (typeof props.touchRipple === 'undefined' &&
-            (props.toolbar || props.tabbar || props.navbar))
-      );
+            (props.toolbar || props.tabbar || props.navbar)),
+      });
 
       const colors = computed(() =>
         LinkColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/List.vue b/src/vue/components/List.vue
index 53e4b5f4..1ade9ce7 100644
--- a/src/vue/components/List.vue
+++ b/src/vue/components/List.vue
@@ -7,11 +7,18 @@
 </template>
 <script>
   import { computed, provide } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { cls } from '../../shared/cls.js';
+
   import { ListClasses } from '../../shared/classes/ListClasses.js';
+
   import { ListColors } from '../../shared/colors/ListColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTheme } from '../shared/use-theme.js';
 
   export default {
@@ -49,7 +56,8 @@
       menuList: { type: Boolean, default: false },
     },
     setup(props, ctx) {
-      const theme = useTheme();
+      const context = useContext();
+      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 f6f760e7..632aa32a 100644
--- a/src/vue/components/ListButton.vue
+++ b/src/vue/components/ListButton.vue
@@ -11,12 +11,19 @@
   </component>
 </template>
 <script>
-  import { ref, computed, inject } from 'vue';
+  import { computed, inject, ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { ListButtonClasses } from '../../shared/classes/ListButtonClasses.js';
+
   import { ListButtonColors } from '../../shared/colors/ListButtonColors.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
   export default {
@@ -52,8 +59,9 @@
       touchRipple: { type: Boolean, default: true },
     },
     setup(props, ctx) {
+      const context = useContext();
       const rippleElRef = ref(null);
-      useTouchRipple(rippleElRef, props);
+      useTouchRipple(rippleElRef, props, { context });
 
       const ListDividersContext = inject('ListDividersContext', {
         value: false,
diff --git a/src/vue/components/ListGroup.vue b/src/vue/components/ListGroup.vue
index e7f02fd8..c42d2f2b 100644
--- a/src/vue/components/ListGroup.vue
+++ b/src/vue/components/ListGroup.vue
@@ -6,6 +6,7 @@
   </li>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import kList from './List.vue';
 
   export default {
@@ -29,7 +30,8 @@
       outlineMaterial: { type: Boolean, default: false },
       menuList: { type: Boolean, default: false },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       return {
         props,
       };
diff --git a/src/vue/components/ListInput.vue b/src/vue/components/ListInput.vue
index 77364eb5..0942e405 100644
--- a/src/vue/components/ListInput.vue
+++ b/src/vue/components/ListInput.vue
@@ -83,16 +83,23 @@
   </k-list-item>
 </template>
 <script>
-  import { ref, computed } from 'vue';
+  import { computed, ref } 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 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 { ListInputClasses } from '../../shared/classes/ListInputClasses.js';
+
   import { ListInputColors } from '../../shared/colors/ListInputColors.js';
 
   export default {
@@ -169,6 +176,7 @@
     },
     emits: ['change', 'input', 'focus', 'blur', 'clear'],
     setup(props, ctx) {
+      const context = useContext();
       const inputElRef = ref(null);
       const isFocused = ref(false);
       const theme = useTheme(props);
diff --git a/src/vue/components/ListItem.vue b/src/vue/components/ListItem.vue
index 7ad4eca7..2c5b9e21 100644
--- a/src/vue/components/ListItem.vue
+++ b/src/vue/components/ListItem.vue
@@ -50,13 +50,20 @@
   </component>
 </template>
 <script>
-  import { ref, computed, inject } from 'vue';
+  import { computed, inject, 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 { useTouchRipple } from '../shared/use-touch-ripple.js';
   import ChevronIcon from './icons/ChevronIcon.vue';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { ListItemClasses } from '../../shared/classes/ListItemClasses.js';
+
   import { ListItemColors } from '../../shared/colors/ListItemColors.js';
 
   export default {
@@ -133,6 +140,7 @@
       touchRipple: { type: Boolean, default: true },
     },
     setup(props, ctx) {
+      const context = useContext();
       const rippleElRef = ref(null);
       const theme = useTheme(props);
 
@@ -179,6 +187,7 @@
       );
       useTouchRipple(rippleElRef, props, {
         addCondition: () => isLabel.value || isLink.value,
+        context,
       });
 
       const hrefComputed = computed(() =>
diff --git a/src/vue/components/MenuList.vue b/src/vue/components/MenuList.vue
index a59ab49b..38c0f691 100644
--- a/src/vue/components/MenuList.vue
+++ b/src/vue/components/MenuList.vue
@@ -4,6 +4,7 @@
   </k-list>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kList from './List.vue';
 
@@ -15,7 +16,8 @@
     props: {
       ...kList.props,
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const listProps = computed(() => ({
         ...props,
         menuList: true,
diff --git a/src/vue/components/MenuListItem.vue b/src/vue/components/MenuListItem.vue
index 6f5dec31..459e8547 100644
--- a/src/vue/components/MenuListItem.vue
+++ b/src/vue/components/MenuListItem.vue
@@ -31,6 +31,7 @@
   </k-list-item>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kListItem from './ListItem.vue';
 
@@ -45,6 +46,7 @@
       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 b76ab95a..9933c3ed 100644
--- a/src/vue/components/Message.vue
+++ b/src/vue/components/Message.vue
@@ -34,11 +34,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { MessageClasses } from '../../shared/classes/MessageClasses.js';
+
   import { MessageColors } from '../../shared/colors/MessageColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -70,6 +76,7 @@
       avatar: { type: String, default: null },
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
 
       const colors = computed(() =>
diff --git a/src/vue/components/Messagebar.vue b/src/vue/components/Messagebar.vue
index 06940807..d2c983dd 100644
--- a/src/vue/components/Messagebar.vue
+++ b/src/vue/components/Messagebar.vue
@@ -23,10 +23,15 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+
   import { MessagebarClasses } from '../../shared/classes/MessagebarClasses.js';
+
   import { MessagebarColors } from '../../shared/colors/MessagebarColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import kToolbar from './Toolbar.vue';
 
@@ -64,6 +69,7 @@
     },
     emits: ['change', 'input', 'focus'],
     setup(props, ctx) {
+      const context = useContext();
       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 607a3d3a..18e76a9f 100644
--- a/src/vue/components/Messages.vue
+++ b/src/vue/components/Messages.vue
@@ -4,8 +4,11 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+
   import { MessagesClasses } from '../../shared/classes/MessagesClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -29,6 +32,7 @@
       id: String,
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/MessagesTitle.vue b/src/vue/components/MessagesTitle.vue
index f67133f1..9f89d8a7 100644
--- a/src/vue/components/MessagesTitle.vue
+++ b/src/vue/components/MessagesTitle.vue
@@ -4,10 +4,15 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+
   import { MessagesTitleClasses } from '../../shared/classes/MessagesTitleClasses.js';
+
   import { MessagesTitleColors } from '../../shared/colors/MessagesTitleColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -30,7 +35,8 @@
       },
       id: String,
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
 
       const colors = computed(() =>
diff --git a/src/vue/components/Navbar.vue b/src/vue/components/Navbar.vue
index d1cd305c..a69c9342 100644
--- a/src/vue/components/Navbar.vue
+++ b/src/vue/components/Navbar.vue
@@ -32,12 +32,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed, onMounted, onBeforeUnmount, onUpdated, ref } from 'vue';
 
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { NavbarClasses } from '../../shared/classes/NavbarClasses.js';
+
   import { NavbarColors } from '../../shared/colors/NavbarColors.js';
 
   export default {
@@ -92,6 +97,7 @@
       subtitle: String,
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
       const titleContainerHeight = ref(0);
       const bgElRef = ref(null);
diff --git a/src/vue/components/NavbarBackLink.vue b/src/vue/components/NavbarBackLink.vue
index cdc7d71a..578b7caf 100644
--- a/src/vue/components/NavbarBackLink.vue
+++ b/src/vue/components/NavbarBackLink.vue
@@ -8,11 +8,15 @@
   </k-link>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import kBackIcon from './icons/BackIcon.vue';
   import kLink from './Link.vue';
+
   import { NavbarBackLinkClasses } from '../../shared/classes/NavbarBackLinkClasses.js';
 
   export default {
@@ -46,7 +50,8 @@
         default: 'auto',
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const theme = useTheme(props);
       const shouldShowText = computed(
         () =>
diff --git a/src/vue/components/Notification.vue b/src/vue/components/Notification.vue
index 06756062..5ea1a643 100644
--- a/src/vue/components/Notification.vue
+++ b/src/vue/components/Notification.vue
@@ -75,11 +75,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { NotificationsClasses } from '../../shared/classes/NotificationsClasses.js';
+
   import { NotificationsColors } from '../../shared/colors/NotificationsColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTheme } from '../shared/use-theme.js';
   import DeleteIcon from './icons/DeleteIcon.vue';
 
@@ -121,7 +127,8 @@
     },
     emits: ['close'],
     setup(props, ctx) {
-      const theme = useTheme();
+      const context = useContext();
+      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 c6730085..44d840ab 100644
--- a/src/vue/components/Page.vue
+++ b/src/vue/components/Page.vue
@@ -4,10 +4,15 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { PageClasses } from '../../shared/classes/PageClasses.js';
+
   import { PageColors } from '../../shared/colors/PageColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -30,6 +35,7 @@
       },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         PageColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Panel.vue b/src/vue/components/Panel.vue
index 55390953..d258883d 100644
--- a/src/vue/components/Panel.vue
+++ b/src/vue/components/Panel.vue
@@ -5,11 +5,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { PanelClasses } from '../../shared/classes/PanelClasses.js';
+
   import { PanelColors } from '../../shared/colors/PanelColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -38,6 +44,7 @@
     },
     emits: ['backdropclick'],
     setup(props, ctx) {
+      const context = useContext();
       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 dcfcb29c..e84aac22 100644
--- a/src/vue/components/Popover.vue
+++ b/src/vue/components/Popover.vue
@@ -14,13 +14,21 @@
 </template>
 <script>
   /* eslint-disable no-restricted-globals */
+
   import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.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 { PopoverClasses } from '../../shared/classes/PopoverClasses.js';
+
   import { PopoverColors } from '../../shared/colors/PopoverColors.js';
 
   export default {
@@ -55,6 +63,7 @@
     },
     emits: ['backdropclick'],
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
       const angleElRef = ref(null);
       const positions = ref({
diff --git a/src/vue/components/Popup.vue b/src/vue/components/Popup.vue
index 7fb91721..cd2f254e 100644
--- a/src/vue/components/Popup.vue
+++ b/src/vue/components/Popup.vue
@@ -5,11 +5,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { PopupClasses } from '../../shared/classes/PopupClasses.js';
+
   import { PopupColors } from '../../shared/colors/PopupColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -36,6 +42,7 @@
     },
     emits: ['backdropclick'],
     setup(props, ctx) {
+      const context = useContext();
       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 dd0826f2..e830e770 100644
--- a/src/vue/components/Preloader.vue
+++ b/src/vue/components/Preloader.vue
@@ -7,14 +7,20 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   import PreloaderIOS from './icons/PreloaderIOS.vue';
   import PreloaderMaterial from './icons/PreloaderMaterial.vue';
+
   import { PreloaderClasses } from '../../shared/classes/PreloaderClasses.js';
+
   import { PreloaderColors } from '../../shared/colors/PreloaderColors.js';
 
   export default {
@@ -40,7 +46,8 @@
         default: 'w-8 h-8',
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const theme = useTheme(props);
 
       const colors = computed(() =>
diff --git a/src/vue/components/Progressbar.vue b/src/vue/components/Progressbar.vue
index 73633797..c2574407 100644
--- a/src/vue/components/Progressbar.vue
+++ b/src/vue/components/Progressbar.vue
@@ -8,10 +8,15 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { ProgressbarClasses } from '../../shared/classes/ProgressbarClasses.js';
+
   import { ProgressbarColors } from '../../shared/colors/ProgressbarColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -37,7 +42,8 @@
         default: 0,
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         ProgressbarColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Radio.vue b/src/vue/components/Radio.vue
index 216df2d4..e7d6b208 100644
--- a/src/vue/components/Radio.vue
+++ b/src/vue/components/Radio.vue
@@ -20,12 +20,19 @@
 </template>
 <script>
   import { computed, ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
   import CheckboxIcon from './icons/CheckboxIcon.vue';
+
   import { RadioClasses } from '../../shared/classes/RadioClasses.js';
+
   import { RadioColors } from '../../shared/colors/RadioColors.js';
 
   export default {
@@ -58,10 +65,11 @@
     },
     emits: ['change'],
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
       const theme = useTheme(props);
 
-      useTouchRipple(elRef, props);
+      useTouchRipple(elRef, props, { context });
 
       const colors = computed(() =>
         RadioColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Range.vue b/src/vue/components/Range.vue
index d2b508b3..29e80fe2 100644
--- a/src/vue/components/Range.vue
+++ b/src/vue/components/Range.vue
@@ -21,11 +21,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { RangeClasses } from '../../shared/classes/RangeClasses.js';
+
   import { RangeColors } from '../../shared/colors/RangeColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -57,6 +63,7 @@
     },
     emits: ['input', 'change', 'focus', 'blur'],
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         RangeColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Searchbar.vue b/src/vue/components/Searchbar.vue
index 20ce1d92..9a5713a0 100644
--- a/src/vue/components/Searchbar.vue
+++ b/src/vue/components/Searchbar.vue
@@ -59,14 +59,21 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref, computed, onMounted } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   import { SearchbarClasses } from '../../shared/classes/SearchbarClasses.js';
+
   import { SearchbarColors } from '../../shared/colors/SearchbarColors.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
   import DeleteIcon from './icons/DeleteIcon.vue';
   import SearchIcon from './icons/SearchIcon.vue';
@@ -122,6 +129,7 @@
       'disable',
     ],
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
       const searchElRef = ref(null);
       const disableButtonRef = ref(null);
@@ -131,7 +139,7 @@
       const isEnabled = ref(false);
       const theme = useTheme(props);
 
-      useTouchRipple(elRef, props);
+      useTouchRipple(elRef, props, { context });
 
       const colors = computed(() =>
         SearchbarColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Segmented.vue b/src/vue/components/Segmented.vue
index e9f4ce58..3b39a7a7 100644
--- a/src/vue/components/Segmented.vue
+++ b/src/vue/components/Segmented.vue
@@ -11,11 +11,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed, ref, onMounted, onUpdated } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { SegmentedClasses } from '../../shared/classes/SegmentedClasses.js';
+
   import { SegmentedColors } from '../../shared/colors/SegmentedColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -42,7 +48,8 @@
       strong: { type: Boolean, default: false },
       rounded: { type: Boolean, default: false },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const highlightElRef = ref(null);
       const highlightStyle = ref({
         transform: '',
diff --git a/src/vue/components/SegmentedButton.vue b/src/vue/components/SegmentedButton.vue
index 3208a71c..abedb5d1 100644
--- a/src/vue/components/SegmentedButton.vue
+++ b/src/vue/components/SegmentedButton.vue
@@ -4,6 +4,7 @@
   </k-button>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kButton from './Button.vue';
 
@@ -20,7 +21,8 @@
       clear: { type: Boolean, default: false },
       rounded: { type: Boolean, default: false },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const buttonProps = computed(() => {
         return {
           ...props,
diff --git a/src/vue/components/Sheet.vue b/src/vue/components/Sheet.vue
index b8bc8bce..b10cc2b5 100644
--- a/src/vue/components/Sheet.vue
+++ b/src/vue/components/Sheet.vue
@@ -5,11 +5,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { SheetClasses } from '../../shared/classes/SheetClasses.js';
+
   import { SheetColors } from '../../shared/colors/SheetColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -35,6 +41,7 @@
     },
     emits: ['backdropclick'],
     setup(props, ctx) {
+      const context = useContext();
       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 cfeeb582..f778ea74 100644
--- a/src/vue/components/Stepper.vue
+++ b/src/vue/components/Stepper.vue
@@ -37,13 +37,21 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+
   import { cls } from '../../shared/cls.js';
+
   import { StepperClasses } from '../../shared/classes/StepperClasses.js';
+
   import { StepperColors } from '../../shared/colors/StepperColors.js';
+
   import { useTheme } from '../shared/use-theme.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
   export default {
@@ -94,11 +102,12 @@
     },
     emits: ['input', 'change', 'focus', 'blur', 'minus', 'plus'],
     setup(props, ctx) {
-      const theme = useTheme();
+      const context = useContext();
+      const theme = useTheme(context);
       const buttonLeftElRef = ref(null);
       const buttonRightElRef = ref(null);
-      useTouchRipple(buttonLeftElRef, props);
-      useTouchRipple(buttonRightElRef, props);
+      useTouchRipple(buttonLeftElRef, props, { context });
+      useTouchRipple(buttonRightElRef, props, { context });
 
       const colors = computed(() =>
         StepperColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Tabbar.vue b/src/vue/components/Tabbar.vue
index 89466cea..d4c231dc 100644
--- a/src/vue/components/Tabbar.vue
+++ b/src/vue/components/Tabbar.vue
@@ -4,6 +4,7 @@
   </k-toolbar>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
   import kToolbar from './Toolbar.vue';
 
@@ -21,7 +22,8 @@
         type: Boolean,
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const toolbarProps = computed(() => {
         return {
           ...props,
diff --git a/src/vue/components/TabbarLink.vue b/src/vue/components/TabbarLink.vue
index af326897..ab2a4610 100644
--- a/src/vue/components/TabbarLink.vue
+++ b/src/vue/components/TabbarLink.vue
@@ -25,10 +25,15 @@
   </k-link>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed, ref, onBeforeUpdate } from 'vue';
+
   import { TabbarLinkClasses } from '../../shared/classes/TabbarLinkClasses.js';
+
   import { TabbarLinkColors } from '../../shared/colors/TabbarLinkColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
   import kLink from './Link.vue';
 
@@ -54,6 +59,7 @@
       label: { type: String, default: undefined },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         TabbarLinkColors(props.colors, useDarkClasses)
       );
diff --git a/src/vue/components/Table.vue b/src/vue/components/Table.vue
index ba34e50f..1a1e59cd 100644
--- a/src/vue/components/Table.vue
+++ b/src/vue/components/Table.vue
@@ -4,8 +4,11 @@
   </table>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+
   import { TableClasses } from '../../shared/classes/TableClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -21,6 +24,7 @@
       },
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/TableBody.vue b/src/vue/components/TableBody.vue
index fe19be74..4e50f127 100644
--- a/src/vue/components/TableBody.vue
+++ b/src/vue/components/TableBody.vue
@@ -4,8 +4,11 @@
   </tbody>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+
   import { TableBodyClasses } from '../../shared/classes/TableBodyClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -21,6 +24,7 @@
       },
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/TableCell.vue b/src/vue/components/TableCell.vue
index 6583afd2..a4344c0e 100644
--- a/src/vue/components/TableCell.vue
+++ b/src/vue/components/TableCell.vue
@@ -4,10 +4,15 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref, computed } from 'vue';
+
   import { TableCellClasses } from '../../shared/classes/TableCellClasses.js';
+
   import { TableCellColors } from '../../shared/colors/TableCellColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -30,6 +35,7 @@
       },
     },
     setup(props, ctx) {
+      const context = useContext();
       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 97244b7a..3bfde4bc 100644
--- a/src/vue/components/TableHead.vue
+++ b/src/vue/components/TableHead.vue
@@ -4,8 +4,11 @@
   </thead>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { ref } from 'vue';
+
   import { TableHeadClasses } from '../../shared/classes/TableHeadClasses.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -21,6 +24,7 @@
       },
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
 
       const c = useThemeClasses(props, () =>
diff --git a/src/vue/components/TableRow.vue b/src/vue/components/TableRow.vue
index 48c37db4..a206b97d 100644
--- a/src/vue/components/TableRow.vue
+++ b/src/vue/components/TableRow.vue
@@ -4,10 +4,15 @@
   </tr>
 </template>
 <script>
-  import { ref, computed } from 'vue';
+  import { computed, ref } from 'vue';
+  import { useContext } from '../shared/use-context.js';
+
   import { TableRowClasses } from '../../shared/classes/TableRowClasses.js';
+
   import { TableRowColors } from '../../shared/colors/TableRowColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
 
   export default {
@@ -30,6 +35,7 @@
       },
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
 
       const colors = computed(() =>
diff --git a/src/vue/components/Toast.vue b/src/vue/components/Toast.vue
index 71121002..8cd85fb3 100644
--- a/src/vue/components/Toast.vue
+++ b/src/vue/components/Toast.vue
@@ -7,10 +7,15 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed } from 'vue';
+
   import { ToastClasses } from '../../shared/classes/ToastClasses.js';
+
   import { ToastColors } from '../../shared/colors/ToastColors.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
 
   export default {
@@ -36,6 +41,7 @@
       translucent: { type: Boolean, default: true },
     },
     setup(props, ctx) {
+      const context = useContext();
       const colors = computed(() =>
         ToastColors(props.colors || {}, useDarkClasses)
       );
diff --git a/src/vue/components/Toggle.vue b/src/vue/components/Toggle.vue
index e4338658..ce004cbe 100644
--- a/src/vue/components/Toggle.vue
+++ b/src/vue/components/Toggle.vue
@@ -17,11 +17,17 @@
   </component>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed, ref } from 'vue';
+
   import { ToggleClasses } from '../../shared/classes/ToggleClasses.js';
+
   import { ToggleColors } from '../../shared/colors/ToggleColors.js';
+
   import { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { useThemeClasses } from '../shared/use-theme-classes.js';
+
   import { useTouchRipple } from '../shared/use-touch-ripple.js';
 
   export default {
@@ -50,10 +56,11 @@
       touchRipple: { type: Boolean, default: true },
     },
     setup(props, ctx) {
+      const context = useContext();
       const elRef = ref(null);
       const rippleTargetElRef = ref(null);
 
-      useTouchRipple(rippleTargetElRef, props, { eventsElRef: elRef });
+      useTouchRipple(rippleTargetElRef, props, { eventsElRef: elRef, context });
 
       const colors = computed(() =>
         ToggleColors(props.colors || {}, useDarkClasses)
diff --git a/src/vue/components/Toolbar.vue b/src/vue/components/Toolbar.vue
index 363db021..d202e636 100644
--- a/src/vue/components/Toolbar.vue
+++ b/src/vue/components/Toolbar.vue
@@ -13,11 +13,17 @@
   </component>
 </template>
 <script>
-  import { computed, ref, onUpdated, onMounted } from 'vue';
+  import { computed, onMounted, 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 { useDarkClasses } from '../shared/use-dark-classes.js';
+
   import { ToolbarClasses } from '../../shared/classes/ToolbarClasses.js';
+
   import { ToolbarColors } from '../../shared/colors/ToolbarColors.js';
 
   export default {
@@ -52,12 +58,13 @@
       top: { type: Boolean, default: false },
     },
     setup(props, ctx) {
+      const context = useContext();
       const highlightElRef = ref(null);
       const highlightStyle = ref({
         transform: '',
         width: '',
       });
-      const theme = useTheme();
+      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 ff11ebde..da68b81e 100644
--- a/src/vue/components/icons/CheckboxIcon.vue
+++ b/src/vue/components/icons/CheckboxIcon.vue
@@ -29,6 +29,7 @@
   </svg>
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { useTheme } from '../../shared/use-theme.js';
 
   export default {
@@ -38,7 +39,8 @@
       material: { type: Boolean, default: undefined },
       fill: Boolean,
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const theme = useTheme(props);
       return {
         theme,
diff --git a/src/vue/shared/KonstaProvider.vue b/src/vue/shared/KonstaProvider.vue
index 63900863..342e1a86 100644
--- a/src/vue/shared/KonstaProvider.vue
+++ b/src/vue/shared/KonstaProvider.vue
@@ -2,7 +2,9 @@
   <slot />
 </template>
 <script>
+  import { useContext } from '../shared/use-context.js';
   import { computed, provide } from 'vue';
+
   import { useAutoTheme } from './use-auto-theme.js';
 
   export default {
@@ -25,7 +27,8 @@
         default: true,
       },
     },
-    setup(props) {
+    setup(props, ctx) {
+      const context = useContext();
       const currentTheme = useAutoTheme(props, props.autoThemeDetection);
 
       const KonstaContext = computed(() => ({
@@ -33,7 +36,6 @@
         dark: props.dark,
         touchRipple: props.touchRipple,
       }));
-
       provide('KonstaContext', KonstaContext);
 
       return {
diff --git a/src/vue/shared/use-context.js b/src/vue/shared/use-context.js
new file mode 100644
index 00000000..e0a4d2ee
--- /dev/null
+++ b/src/vue/shared/use-context.js
@@ -0,0 +1,5 @@
+import { inject } from 'vue';
+
+export const useContext = () => {
+  return inject('KonstaContext');
+};
diff --git a/src/vue/shared/use-dark-classes.js b/src/vue/shared/use-dark-classes.js
index 3c1bd0c3..65461685 100644
--- a/src/vue/shared/use-dark-classes.js
+++ b/src/vue/shared/use-dark-classes.js
@@ -1,9 +1,8 @@
-import { inject } from 'vue';
-
-const useDarkClasses = (classNames) => {
-  const context = inject('KonstaContext');
-  if (!context.value.dark) return '';
+const useDarkClasses = (classNames, context) => {
+  if (!context || !context.value.dark) return '';
   return classNames;
 };
+const createUseDarkClasses = (context) => (classNames) =>
+  useDarkClasses(classNames, context);
 
-export { useDarkClasses };
+export { createUseDarkClasses as darkClasses, useDarkClasses };
diff --git a/src/vue/shared/use-theme-classes.js b/src/vue/shared/use-theme-classes.js
index 4d49e93b..4840e674 100644
--- a/src/vue/shared/use-theme-classes.js
+++ b/src/vue/shared/use-theme-classes.js
@@ -1,4 +1,4 @@
-import { inject, computed } from 'vue';
+import { computed } from 'vue';
 import { cls } from '../../shared/cls.js';
 
 const propClasses = (classesObj, theme, state) => {
@@ -42,10 +42,12 @@ const themeClasses = (classesObj, theme, addBaseClassName) => {
   return c;
 };
 
-const useThemeClasses = (props, classesObj) =>
+const useThemeClasses = (props, classesObj, ctx) =>
   computed(() => {
-    const context = inject('KonstaContext');
-    let theme = context.value.theme || 'ios';
+    let theme;
+    if (ctx) {
+      theme = ctx.value.theme || 'ios';
+    }
     if (props.ios) theme = 'ios';
     if (props.material) theme = 'material';
     return themeClasses(
@@ -54,4 +56,6 @@ const useThemeClasses = (props, classesObj) =>
     );
   });
 
-export { useThemeClasses };
+const createUseThemeClasses = (context) => (props, classesObj) =>
+  useThemeClasses(props, classesObj, context);
+export { useThemeClasses, createUseThemeClasses as themeClasses };
diff --git a/src/vue/shared/use-theme.js b/src/vue/shared/use-theme.js
index 34615124..dfd745f9 100644
--- a/src/vue/shared/use-theme.js
+++ b/src/vue/shared/use-theme.js
@@ -1,9 +1,11 @@
-import { inject, computed } from 'vue';
+import { computed } from 'vue';
 
-const useTheme = (props = {}) =>
+const useTheme = (props = {}, context) =>
   computed(() => {
-    const context = inject('KonstaContext');
-    let theme = context.value.theme || 'ios';
+    let theme;
+    if (context) {
+      theme = context.value.theme || 'ios';
+    }
     if (props.ios) theme = 'ios';
     if (props.material) theme = 'material';
     return theme;
diff --git a/src/vue/shared/use-touch-ripple.js b/src/vue/shared/use-touch-ripple.js
index 92d36f6d..1e25ba08 100644
--- a/src/vue/shared/use-touch-ripple.js
+++ b/src/vue/shared/use-touch-ripple.js
@@ -1,13 +1,12 @@
-import { ref, onMounted, onBeforeUnmount, inject, watch } from 'vue';
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
 import { TouchRipple } from '../../shared/touch-ripple-class.js';
 
 export const useTouchRipple = (
   elRef,
   props,
-  { addCondition, eventsElRef } = {}
+  { addCondition, eventsElRef, context } = {}
 ) => {
   if (!eventsElRef) eventsElRef = elRef;
-  const context = inject('KonstaContext');
   const ripple = ref(null);
   let eventsAttached = false;