@skewedaspect/sleekspace-ui 0.4.0 → 0.5.1

package/dist/components/Page/SkPage.vue.d.ts

@@ -1,3 +1,4 @@
+import { SkThemeName } from '../Theme/types';
 import { SkPageSidebarPosition } from './types';
 export interface SkPageComponentProps {
     /**
@@ -27,6 +28,13 @@ export interface SkPageComponentProps {
      * Only applies when the sidebar slot is provided.
      */
     sidebarWidth?: string;
+    /**
+     * Optional theme name. When provided, SkPage acts as a theme provider — setting
+     * `data-scheme` on the root element and providing theme context for descendant
+     * components (including portal components like dropdowns and modals).
+     * When omitted, SkPage has no theme behavior.
+     */
+    theme?: SkThemeName;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -41,6 +49,7 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<SkPageComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SkPageComponentProps> & Readonly<{}>, {
+    theme: SkThemeName;
     sidebarPosition: SkPageSidebarPosition;
     fixedHeader: boolean;
     fixedFooter: boolean;

package/dist/components/Page/types.d.ts

@@ -1,3 +1,4 @@
+import { SkThemeName } from '../Theme/types';
 /** Sidebar position */
 export type SkPageSidebarPosition = 'left' | 'right';
 /** Page props interface */
@@ -10,4 +11,6 @@ export interface SkPageProps {
     fixedFooter?: boolean;
     /** Custom sidebar width */
     sidebarWidth?: string;
+    /** Optional theme name — when provided, SkPage acts as a theme provider */
+    theme?: SkThemeName;
 }

package/dist/components/Theme/types.d.ts

@@ -1,9 +1,24 @@
+/**
+ * Registry of available theme names. Augment this interface to register custom themes:
+ *
+ * ```ts
+ * declare module '@skewedaspect/sleekspace-ui' {
+ *     interface SkThemeNameMap {
+ *         ocean : true;
+ *         midnight : true;
+ *     }
+ * }
+ * ```
+ */
+export interface SkThemeNameMap {
+    greyscale: true;
+    colorful: true;
+}
 /**
  * Available theme names that control the overall color scheme of the application.
- * - 'greyscale': A monochromatic theme with neutral grays and subtle accents
- * - 'colorful': A vibrant theme with saturated colors and stronger contrasts
+ * Derived from {@link SkThemeNameMap} — augment that interface to add custom themes.
  */
-export type SkThemeName = 'greyscale' | 'colorful';
+export type SkThemeName = keyof SkThemeNameMap;
 export interface SkThemeComponentProps {
     /**
      * The active theme name that controls the color scheme for all child components.

package/dist/sleekspace-ui.css

@@ -158,6 +158,9 @@
   --sk-opacity-medium: 0.40;
   --sk-opacity-strong: 0.60;
   --sk-opacity-opaque: 1;
+  /* Semantic opacity aliases */
+  --sk-opacity-disabled: 0.5;
+  --sk-opacity-loading: 0.6;
   /* ===================================================================
    * Color Mixing Percentages
    * Tokenized mixing amounts for color-mix() function
@@ -351,6 +354,12 @@
   --sk-transition-easing-ease-in: ease-in;
   --sk-transition-easing-ease-out: ease-out;
   --sk-transition-easing-ease-in-out: ease-in-out;
+  /* ===================================================================
+   * Default Aliases
+   * Generic names that resolve to the most common values
+   * =================================================================== */
+  --sk-transition-duration-base: var(--sk-transition-duration-normal);
+  --sk-transition-easing: var(--sk-transition-easing-ease-out);
   /* ===================================================================
    * Common Transition Combinations
    * Convenience tokens for frequently used transitions
@@ -652,6 +661,10 @@
  *
  * Background and text colors for surfaces and general use.
  * These provide a consistent color system independent of component kinds.
+ *
+ * Defaults are defined on :root as fallbacks. Themes can override any of these
+ * via [data-scheme] selectors. The [data-scheme] rule also applies background
+ * and text color so that any themed element gets the correct surface treatment.
  */
 :root {
   /* ===================================================================
@@ -677,6 +690,16 @@
   --sk-border-subtle: var(--sk-color-gray-80); /* Subtle borders/dividers */
 }
 
+/**
+ * Apply text color to any themed element so descendants inherit the correct
+ * color without needing to set it themselves. Background is intentionally NOT
+ * set here — page-level containers like SkPage handle their own background
+ * via the surface tokens.
+ */
+[data-scheme] {
+  color: var(--sk-text-primary);
+}
+
 /**
  * Semantic Tokens - Interactive
  *
@@ -1215,7 +1238,7 @@
   body {
     margin: 0;
     min-height: 100svh;
-    color: var(--sk-neutral-fg);
+    color: var(--sk-text-primary);
   }
   img,
   svg,
@@ -1228,8 +1251,8 @@
     font: inherit;
   }
   :focus-visible {
-    outline: var(--sk-focus-outline-width) solid currentColor;
-    outline-offset: var(--sk-focus-outline-offset);
+    outline: var(--sk-focus-ring-width) solid currentColor;
+    outline-offset: var(--sk-focus-ring-offset);
   }
   h1,
   h2,
@@ -1390,7 +1413,7 @@
     min-height: var(--sk-scrollbar-thumb-min-size);
     min-width: var(--sk-scrollbar-thumb-min-size);
     /* Smooth transitions for interactive states */
-    transition: background-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard), border-color var(--sk-transition-duration-fast) var(--sk-transition-easing-standard);
+    transition: background-color var(--sk-transition-duration-fast) var(--sk-transition-easing-ease-out), border-color var(--sk-transition-duration-fast) var(--sk-transition-easing-ease-out);
   }
   /* Hover State */
   *::-webkit-scrollbar-thumb:hover {
@@ -2073,8 +2096,8 @@
     --sk-button-disabled-opacity: var(--sk-opacity-disabled);
     --sk-button-loading-opacity: var(--sk-opacity-loading);
     --sk-button-outline-bg: rgba(5, 5, 5, 0.15);
-    --sk-button-subtle-opacity: var(--sk-opacity-subtle);
-    --sk-button-subtle-opacity-hover: var(--sk-opacity-subtle-hover);
+    --sk-button-subtle-opacity: 0.35;
+    --sk-button-subtle-opacity-hover: 0.65;
     --sk-button-subtle-border-opacity: var(--sk-opacity-subtle-border);
     --sk-button-subtle-border-opacity-hover: var(--sk-opacity-subtle-border-hover);
     --sk-button-glow-size: 8px;
@@ -3028,9 +3051,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neutral:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neutral:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3047,9 +3069,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-primary:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-primary:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3066,9 +3087,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-accent:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-accent:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3085,9 +3105,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-info:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-info:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3104,9 +3123,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-success:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-success:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3123,9 +3141,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-warning:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-warning:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3142,9 +3159,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-danger:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-danger:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3161,9 +3177,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-boulder:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-boulder:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3180,9 +3195,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-blue:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-blue:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3199,9 +3213,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-light-blue:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-light-blue:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3218,9 +3231,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-orange:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-orange:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3237,9 +3249,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-purple:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-purple:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3256,9 +3267,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-green:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-green:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3275,9 +3285,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-mint:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-mint:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3294,9 +3303,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-neon-pink:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-neon-pink:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3313,9 +3321,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-yellow:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-yellow:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3332,9 +3339,8 @@
     color: var(--sk-button-color-base);
   }
   .sk-button.sk-subtle.sk-red:hover:not(:disabled) {
-    --sk-button-border-color: oklch(from var(--sk-button-border-base) l c h / var(--sk-button-subtle-border-opacity-hover));
     --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity-hover));
+    background-color: var(--sk-button-bg-hover);
   }
   .sk-button.sk-subtle.sk-red:active:not(:disabled) {
     --sk-button-border-color: var(--sk-button-border-base);
@@ -3342,6 +3348,9 @@
     background-color: var(--sk-button-bg);
     color: var(--sk-button-text);
   }
+  .sk-button.sk-subtle:disabled, .sk-button.sk-subtle.sk-loading {
+    background-color: oklch(from var(--sk-button-bg) l c h/0.45);
+  }
   .sk-button.sk-subtle.sk-neutral {
     --sk-button-border-color: oklch(
         from color-mix(in oklch, var(--sk-button-border-base), white 50%)
@@ -4058,14 +4067,38 @@
   .sk-button.sk-loading .sk-button-content {
     opacity: var(--sk-button-loading-opacity);
   }
-  .sk-button.sk-pressed.sk-outline, .sk-button.sk-pressed.sk-ghost {
-    background-color: oklch(from var(--sk-button-bg) l c h/var(--sk-button-subtle-opacity));
-  }
   .sk-button.sk-pressed.sk-solid {
-    background-color: var(--sk-button-bg-active);
+    --sk-button-border-color: var(--sk-button-border-hover);
+    background-color: var(--sk-button-bg-hover);
+    color: var(--sk-button-text);
+  }
+  .sk-button.sk-pressed.sk-solid:hover:not(:disabled) {
+    --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+    background-color: color-mix(in oklch, var(--sk-button-bg) 70%, white 30%);
+  }
+  .sk-button.sk-pressed.sk-outline {
+    --sk-button-border-color: var(--sk-button-border-hover);
+    background-color: var(--sk-button-bg);
+    color: var(--sk-button-text);
   }
   .sk-button.sk-pressed.sk-subtle {
+    --sk-button-border-color: transparent;
     background-color: var(--sk-button-bg);
+    color: var(--sk-button-text);
+  }
+  .sk-button.sk-pressed.sk-subtle:hover:not(:disabled) {
+    --sk-button-border-color: transparent;
+    --sk-button-glow-shadow: 0 0 var(--sk-button-glow-size) oklch(from var(--sk-button-border-base) l c h / var(--sk-button-glow-opacity));
+    background-color: var(--sk-button-bg-hover);
+  }
+  .sk-button.sk-pressed.sk-ghost {
+    --sk-button-border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+    border-color: color-mix(in oklch, var(--sk-button-border-base) 50%, transparent 50%);
+    background-color: var(--sk-button-outline-bg);
+    color: var(--sk-button-text);
+  }
+  .sk-button.sk-pressed.sk-link {
+    color: var(--sk-button-text);
   }
   .sk-button .sk-button-loader {
     position: absolute;
@@ -6252,8 +6285,8 @@
     display: flex;
     flex-direction: column;
     min-height: 100vh;
-    background: var(--sk-background);
-    color: var(--sk-foreground);
+    background: var(--sk-surface-base);
+    color: var(--sk-text-primary);
   }
   .sk-page .sk-page-header {
     flex-shrink: 0;

package/dist/sleekspace-ui.es.js

@@ -15237,7 +15237,7 @@ const _hoisted_5$6 = {
   stroke: "currentColor",
   "stroke-width": "2"
 };
-const _hoisted_6$3 = { class: "sk-alert-content" };
+const _hoisted_6$4 = { class: "sk-alert-content" };
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "SkAlert",
   props: {
@@ -15335,7 +15335,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
             ])])) : createCommentVNode("", true)
           ])
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_6$3, [
+        createElementVNode("div", _hoisted_6$4, [
           renderSlot(_ctx.$slots, "default")
         ])
       ], 6);
@@ -17008,17 +17008,38 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
   }
 });
 const SkNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-b589687f"]]);
-const _hoisted_1$e = {
+const ThemeSymbol = Symbol("SkTheme");
+function provideTheme(initialTheme = "greyscale") {
+  const currentTheme = ref(initialTheme);
+  const setTheme = (theme) => {
+    currentTheme.value = theme;
+  };
+  const context2 = {
+    currentTheme,
+    setTheme
+  };
+  provide(ThemeSymbol, context2);
+  return context2;
+}
+function useTheme() {
+  const context2 = inject(ThemeSymbol);
+  if (!context2) {
+    throw new Error("useTheme must be called within an SkTheme component");
+  }
+  return context2;
+}
+const _hoisted_1$e = ["data-scheme"];
+const _hoisted_2$8 = {
   key: 0,
   class: "sk-page-header"
 };
-const _hoisted_2$8 = { class: "sk-page-main" };
-const _hoisted_3$6 = {
+const _hoisted_3$6 = { class: "sk-page-main" };
+const _hoisted_4$5 = {
   key: 0,
   class: "sk-page-sidebar"
 };
-const _hoisted_4$5 = { class: "sk-page-content" };
-const _hoisted_5$3 = {
+const _hoisted_5$3 = { class: "sk-page-content" };
+const _hoisted_6$3 = {
   key: 1,
   class: "sk-page-footer"
 };
@@ -17028,7 +17049,8 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     sidebarPosition: { default: "left" },
     fixedHeader: { type: Boolean, default: false },
     fixedFooter: { type: Boolean, default: false },
-    sidebarWidth: { default: void 0 }
+    sidebarWidth: { default: void 0 },
+    theme: { default: void 0 }
   },
   setup(__props) {
     const props = __props;
@@ -17046,30 +17068,40 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         "--sk-page-sidebar-width": props.sidebarWidth
       };
     });
+    if (props.theme) {
+      const { currentTheme, setTheme } = provideTheme(props.theme);
+      provide("sk-theme", currentTheme);
+      watch(() => props.theme, (newTheme) => {
+        if (newTheme) {
+          setTheme(newTheme);
+        }
+      });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(classes.value),
-        style: normalizeStyle(customStyles.value)
+        style: normalizeStyle(customStyles.value),
+        "data-scheme": __props.theme
       }, [
-        _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1$e, [
+        _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_2$8, [
           renderSlot(_ctx.$slots, "header", {}, void 0, true)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$8, [
-          _ctx.$slots.sidebar ? (openBlock(), createElementBlock("aside", _hoisted_3$6, [
+        createElementVNode("div", _hoisted_3$6, [
+          _ctx.$slots.sidebar ? (openBlock(), createElementBlock("aside", _hoisted_4$5, [
             renderSlot(_ctx.$slots, "sidebar", {}, void 0, true)
           ])) : createCommentVNode("", true),
-          createElementVNode("main", _hoisted_4$5, [
+          createElementVNode("main", _hoisted_5$3, [
             renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ])
         ]),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5$3, [
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_6$3, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
-      ], 6);
+      ], 14, _hoisted_1$e);
     };
   }
 });
-const SkPage = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-0d313ffc"]]);
+const SkPage = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ad672949"]]);
 const _hoisted_1$d = ["disabled", "aria-label", "aria-current"];
 const _hoisted_2$7 = { key: 0 };
 const _hoisted_3$5 = { key: 1 };
@@ -18877,26 +18909,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ThemeSymbol = Symbol("SkTheme");
-function provideTheme(initialTheme = "greyscale") {
-  const currentTheme = ref(initialTheme);
-  const setTheme = (theme) => {
-    currentTheme.value = theme;
-  };
-  const context2 = {
-    currentTheme,
-    setTheme
-  };
-  provide(ThemeSymbol, context2);
-  return context2;
-}
-function useTheme() {
-  const context2 = inject(ThemeSymbol);
-  if (!context2) {
-    throw new Error("useTheme must be called within an SkTheme component");
-  }
-  return context2;
-}
 const _hoisted_1 = ["data-scheme"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SkTheme",