diff --git a/packages/layout/package.json b/packages/layout/package.json
index 5c93b2f..c272b20 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -30,6 +30,7 @@
     "start": "tsx src/index.ts"
   },
   "dependencies": {
+    "@sciux/utils-theme": "workspace:^",
     "@vue/reactivity": "^3.5.14",
     "arktype": "^2.1.20",
     "sciux-laplace": "catalog:"
diff --git a/packages/layout/src/block.ts b/packages/layout/src/block.ts
index 3bb0473..7e14c93 100644
--- a/packages/layout/src/block.ts
+++ b/packages/layout/src/block.ts
@@ -1,8 +1,8 @@
+import { theme } from '@sciux/utils-theme'
 import { toValue } from '@vue/reactivity'
 import { type } from 'arktype'
 import { defineComponent } from 'sciux-laplace'
 import { AlignType } from './align'
-import { size } from './utils/size'
 
 export const BlockType = type({
   margin: 'string | number',
@@ -18,35 +18,37 @@ export const BlockType = type({
   align: AlignType,
 })
 
+export const blockDefaults = {
+  margin: '0',
+  marginTop: '0',
+  marginRight: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  padding: '0',
+  paddingTop: '0',
+  paddingRight: '0',
+  paddingBottom: '0',
+  paddingLeft: '0',
+  align: 'start' as const,
+}
+
 export default defineComponent<'block', typeof BlockType.infer>((attrs, _context) => {
   return {
     name: 'block',
     attrs: BlockType,
-    defaults: {
-      margin: '0',
-      marginTop: '0',
-      marginRight: '0',
-      marginBottom: '0',
-      marginLeft: '0',
-      padding: '0',
-      paddingTop: '0',
-      paddingRight: '0',
-      paddingBottom: '0',
-      paddingLeft: '0',
-      align: 'start',
-    },
+    defaults: blockDefaults,
     setup: (children) => {
       const element = document.createElement('div')
-      element.style.margin = size(toValue(attrs.margin))
-      element.style.marginTop = size(toValue(attrs.marginTop))
-      element.style.marginRight = size(toValue(attrs.marginRight))
-      element.style.marginBottom = size(toValue(attrs.marginBottom))
-      element.style.marginLeft = size(toValue(attrs.marginLeft))
-      element.style.padding = size(toValue(attrs.padding))
-      element.style.paddingTop = size(toValue(attrs.paddingTop))
-      element.style.paddingRight = size(toValue(attrs.paddingRight))
-      element.style.paddingBottom = size(toValue(attrs.paddingBottom))
-      element.style.paddingLeft = size(toValue(attrs.paddingLeft))
+      element.style.margin = theme.size(toValue(attrs.margin))
+      element.style.marginTop = theme.size(toValue(attrs.marginTop))
+      element.style.marginRight = theme.size(toValue(attrs.marginRight))
+      element.style.marginBottom = theme.size(toValue(attrs.marginBottom))
+      element.style.marginLeft = theme.size(toValue(attrs.marginLeft))
+      element.style.padding = theme.size(toValue(attrs.padding))
+      element.style.paddingTop = theme.size(toValue(attrs.paddingTop))
+      element.style.paddingRight = theme.size(toValue(attrs.paddingRight))
+      element.style.paddingBottom = theme.size(toValue(attrs.paddingBottom))
+      element.style.paddingLeft = theme.size(toValue(attrs.paddingLeft))
       element.style.alignItems = toValue(attrs.align)
       element.append(...children())
       return element
diff --git a/packages/layout/src/columns.ts b/packages/layout/src/columns.ts
index 8452b2d..c6612f7 100644
--- a/packages/layout/src/columns.ts
+++ b/packages/layout/src/columns.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'sciux-laplace'
 import { type } from 'arktype'
 import { defineComponent, ref, toValue } from 'sciux-laplace'
-import flexbox, { FlexboxType } from './flexbox'
+import flexbox, { flexboxDefaults, FlexboxType } from './flexbox'
 
 const T = type({
 
@@ -12,6 +12,7 @@ export default defineComponent<'columns', typeof T.infer, { direction?: Ref<'row
   return {
     name: 'columns',
     attrs: T,
+    defaults: flexboxDefaults,
     setup: (children) => {
       const extend = flexbox(attrs, {
         ...context,
diff --git a/packages/layout/src/flexbox.ts b/packages/layout/src/flexbox.ts
index ffb4f02..e0b0e4f 100644
--- a/packages/layout/src/flexbox.ts
+++ b/packages/layout/src/flexbox.ts
@@ -1,9 +1,9 @@
 import type { Ref } from '@vue/reactivity'
+import { theme } from '@sciux/utils-theme'
 import { ref, toValue } from '@vue/reactivity'
 import { type } from 'arktype'
 import { defineComponent } from 'sciux-laplace'
-import block, { BlockType } from './block'
-import { size } from './utils/size'
+import block, { blockDefaults, BlockType } from './block'
 
 const Position = type(`'start' | 'end' | 'center'`)
 export const FlexboxType = type({
@@ -17,6 +17,14 @@ export const FlexboxType = type({
   basis: type(`string | number`).optional(),
 }).and(BlockType)
 
+export const flexboxDefaults = {
+  direction: 'row' as const,
+  wrap: 'nowrap' as const,
+  grow: 1,
+  shrink: 0,
+  ...blockDefaults,
+}
+
 export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction?: Ref<'row' | 'column'> }>((attrs, context) => {
   const extend = block(attrs, context)
   const direction = ref(toValue(attrs.direction ?? 'row') as string)
@@ -25,12 +33,7 @@ export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction?
   return {
     name: 'flexbox',
     attrs: FlexboxType,
-    defaults: {
-      direction: 'row',
-      wrap: 'nowrap',
-      grow: 1,
-      shrink: 0,
-    },
+    defaults: flexboxDefaults,
     setup: (children) => {
       const element = extend.setup!(children) as HTMLDivElement
 
@@ -44,11 +47,11 @@ export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction?
       direction.value = toValue(attrs.direction)
       element.style.justifyContent = toValue(attrs.justify ?? 'auto')!
       element.style.alignItems = toValue(attrs.align ?? 'auto')!
-      element.style.gap = size(toValue(attrs.gap) ?? 'auto')
+      element.style.gap = theme.size(toValue(attrs.gap) ?? 'auto')
       element.style.flexWrap = toValue(attrs.wrap)
       element.style.flexGrow = (toValue(attrs.grow) ?? 1).toString()
       element.style.flexShrink = (toValue(attrs.shrink) ?? 0).toString()
-      element.style.flexBasis = size(toValue(attrs.basis) ?? 'auto')
+      element.style.flexBasis = theme.size(toValue(attrs.basis) ?? 'auto')
       return element
     },
     provides: {
diff --git a/packages/layout/src/grid.ts b/packages/layout/src/grid.ts
index 82782d2..3443d6d 100644
--- a/packages/layout/src/grid.ts
+++ b/packages/layout/src/grid.ts
@@ -1,8 +1,8 @@
+import { theme } from '@sciux/utils-theme'
 import { toValue } from '@vue/reactivity'
 import { type } from 'arktype'
 import { defineComponent } from 'sciux-laplace'
 import { AlignType } from './align'
-import { size } from './utils/size'
 
 const T = type({
   columns: `string | number | Array`,
@@ -32,11 +32,11 @@ export default defineComponent<'grid', typeof T.infer>((attrs, _context) => {
       element.style.display = 'grid'
       element.style.gridTemplateColumns = toValue(attrs.columns) as string
       element.style.gridTemplateRows = toValue(attrs.rows) as string
-      element.style.gap = size(toValue(attrs.gutter))
-      element.style.columnGap = size(toValue(attrs.columnGutter))
-      element.style.rowGap = size(toValue(attrs.rowGutter))
+      element.style.gap = theme.size(toValue(attrs.gutter))
+      element.style.columnGap = theme.size(toValue(attrs.columnGutter))
+      element.style.rowGap = theme.size(toValue(attrs.rowGutter))
       element.style.justifyContent = toValue(attrs.align) as string
-      element.style.inset = size(toValue(attrs.inset))
+      element.style.inset = theme.size(toValue(attrs.inset))
       element.append(...children())
       return element
     },
diff --git a/packages/layout/src/index.ts b/packages/layout/src/index.ts
index d5f4829..2cb841e 100644
--- a/packages/layout/src/index.ts
+++ b/packages/layout/src/index.ts
@@ -4,5 +4,3 @@ export { default as columns } from './columns'
 export { default as flexbox } from './flexbox'
 export { default as grid } from './grid'
 export { default as rows } from './rows'
-
-export * from './utils/size'
diff --git a/packages/layout/src/rows.ts b/packages/layout/src/rows.ts
index bd8a615..69d945d 100644
--- a/packages/layout/src/rows.ts
+++ b/packages/layout/src/rows.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'sciux-laplace'
 import { type } from 'arktype'
 import { defineComponent, ref, toValue } from 'sciux-laplace'
-import flexbox, { FlexboxType } from './flexbox'
+import flexbox, { flexboxDefaults, FlexboxType } from './flexbox'
 
 const T = type({
 
@@ -12,6 +12,7 @@ export default defineComponent<'rows', typeof T.infer, { direction?: Ref<'row' |
   return {
     name: 'rows',
     attrs: T,
+    defaults: flexboxDefaults,
     setup: (children) => {
       const extend = flexbox(attrs, context)
       const element = extend.setup!(children) as HTMLDivElement
diff --git a/packages/layout/src/utils/size.ts b/packages/layout/src/utils/size.ts
deleted file mode 100644
index bd0cbea..0000000
--- a/packages/layout/src/utils/size.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-type Size = string | number
-export interface SizeTable {
-  'full': Size
-  'half': Size
-  'quarter': Size
-  'third': Size
-  'sm': Size
-  'md': Size
-  'lg': Size
-  'xl': Size
-  '2xl': Size
-  '3xl': Size
-  '4xl': Size
-  '5xl': Size
-  '6xl': Size
-}
-
-export const sizeTable: SizeTable = {
-  'full': '100%',
-  'half': '50%',
-  'quarter': '25%',
-  'third': '33.33%',
-  'sm': 15,
-  'md': 20,
-  'lg': 30,
-  'xl': 40,
-  '2xl': 50,
-  '3xl': 60,
-  '4xl': 70,
-  '5xl': 80,
-  '6xl': 90,
-}
-
-export function size(value: string | number, customSizeTable: SizeTable = sizeTable): string {
-  if (typeof value === 'number')
-    return `${value}px`
-  const size = customSizeTable[value as keyof SizeTable]
-  if (typeof size === 'number')
-    return `${size}px`
-  if (typeof size === 'string')
-    return size
-  return value
-}
diff --git a/packages/theme-default/README.md b/packages/theme-default/README.md
new file mode 100644
index 0000000..5899000
--- /dev/null
+++ b/packages/theme-default/README.md
@@ -0,0 +1,3 @@
+# `@sciux/theme-default`
+
+Default theme for SciuxKit
diff --git a/packages/theme-default/package.json b/packages/theme-default/package.json
new file mode 100644
index 0000000..201c6fc
--- /dev/null
+++ b/packages/theme-default/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "@sciux/theme-default",
+  "type": "module",
+  "version": "0.0.5",
+  "description": "Default theme for SciuxKit",
+  "author": "BijonAI <info@bijon.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sciux-kit/lib.git"
+  },
+  "bugs": "https://github.com/sciux-kit/lib/issues",
+  "keywords": [],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepublishOnly": "nr build"
+  },
+  "dependencies": {
+    "@sciux/layout": "workspace:^",
+    "@vue/reactivity": "^3.5.14",
+    "arktype": "^2.1.20",
+    "katex": "^0.16.22",
+    "sciux-laplace": "catalog:",
+    "shiki": "^3.4.2"
+  }
+}
diff --git a/packages/theme-default/styles/main.css b/packages/theme-default/styles/main.css
new file mode 100644
index 0000000..b38fb10
--- /dev/null
+++ b/packages/theme-default/styles/main.css
@@ -0,0 +1 @@
+@import './vars.css';
\ No newline at end of file
diff --git a/packages/theme-default/styles/vars.css b/packages/theme-default/styles/vars.css
new file mode 100644
index 0000000..d28640e
--- /dev/null
+++ b/packages/theme-default/styles/vars.css
@@ -0,0 +1,59 @@
+/* Background */
+:root {
+  --sci-background: #24292F;
+  --sci-background-accent: #181C20;
+}
+
+/* Base Color Palette */
+:root {
+  --sci-primary: #FFFFFF;
+  --sci-note: #C7EDCC;
+  --sci-warning: #F59E0B;
+  --sci-accent: #FFFF00;
+  --sci-alert: #EF4444;
+  --sci-info: #3B82F6;
+  --sci-success: #10B981;
+  --sci-creative: #F472B6;
+}
+
+/* Transparent Marker Colors */
+:root {
+  --sci-highlight-primary: var(--sci-highlight-key);
+  --sci-highlight-key: rgba(var(--sci-accent), 0.5);
+  --sci-highlight-support: rgba(var(--sci-success), 0.5);
+  --sci-highlight-creative: rgba(var(--sci-creative), 0.5);
+  --sci-highlight-caution: rgba(var(--sci-warning), 0.5);
+  --sci-highlight-info: rgba(var(--sci-info), 0.5);
+}
+
+/* Size Table */
+:root {
+  --sci-size-primary: 16px;
+  --sci-size-3xs: 12px;
+  --sci-size-2xs: 14px;
+  --sci-size-xs: 16px;
+  --sci-size-sm: 18px;
+  --sci-size-md: 20px;
+  --sci-size-lg: 24px;
+  --sci-size-xl: 32px;
+  --sci-size-2xl: 40px;
+  --sci-size-3xl: 48px;
+  --sci-size-4xl: 56px;
+  --sci-size-5xl: 64px;
+  --sci-size-6xl: 72px;
+}
+
+/* Font */
+:root {
+  --sci-font-primary: 'Inter', sans-serif;
+  --sci-font-comic: 'Comic Sans MS', cursive;
+  --sci-font-code: 'JetBrains Mono', monospace;
+  --sci-font-math: 'Times New Roman', serif;
+}
+
+/* Dash Array */
+:root {
+  --sci-dasharray-solid: 0 0;
+  --sci-dasharray-dashed: 10 5;
+  --sci-dasharray-dotted: 2 2;
+}
\ No newline at end of file
diff --git a/packages/utils-theme/README.md b/packages/utils-theme/README.md
new file mode 100644
index 0000000..84682fd
--- /dev/null
+++ b/packages/utils-theme/README.md
@@ -0,0 +1,3 @@
+# `@sciux/utils-theme`
+
+Theme utilities for SciuxKit
diff --git a/packages/utils-theme/package.json b/packages/utils-theme/package.json
new file mode 100644
index 0000000..ddd89d2
--- /dev/null
+++ b/packages/utils-theme/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@sciux/utils-theme",
+  "type": "module",
+  "version": "0.0.5",
+  "description": "Theme utilities for SciuxKit",
+  "author": "BijonAI <info@bijon.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sciux-kit/lib.git"
+  },
+  "bugs": "https://github.com/sciux-kit/lib/issues",
+  "keywords": [],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "nr build",
+    "start": "tsx src/index.ts"
+  },
+  "dependencies": {
+    "@vue/reactivity": "^3.5.14",
+    "arktype": "^2.1.20",
+    "sciux-laplace": "catalog:"
+  }
+}
diff --git a/packages/utils-theme/src/index.ts b/packages/utils-theme/src/index.ts
new file mode 100644
index 0000000..b013fa6
--- /dev/null
+++ b/packages/utils-theme/src/index.ts
@@ -0,0 +1 @@
+export * as theme from './theme'
diff --git a/packages/utils-theme/src/theme.ts b/packages/utils-theme/src/theme.ts
new file mode 100644
index 0000000..0b0359f
--- /dev/null
+++ b/packages/utils-theme/src/theme.ts
@@ -0,0 +1,24 @@
+export function isCSSVariableExist(variableName: string): boolean {
+  const rootStyles = document.documentElement.style
+  return rootStyles.getPropertyValue(variableName).trim() !== ''
+}
+
+export function size(name: string | number): string {
+  const variable = `--sci-size-${name}`
+  return isCSSVariableExist(variable) ? `var(${variable})` : name.toString()
+}
+
+export function pallete(name: string): string {
+  const variable = `--sci-${name}`
+  return isCSSVariableExist(variable) ? `var(${variable})` : name
+}
+
+export function highlight(name: string): string {
+  const variable = `--sci-highlight-${name}`
+  return isCSSVariableExist(variable) ? `var(${variable})` : name
+}
+
+export function dasharray(name: string): string {
+  const variable = `--sci-dasharray-${name}`
+  return isCSSVariableExist(variable) ? `var(${variable})` : name
+}
diff --git a/packages/utils-theme/tsconfig.json b/packages/utils-theme/tsconfig.json
new file mode 100644
index 0000000..4082f16
--- /dev/null
+++ b/packages/utils-theme/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}
diff --git a/packages/utils-theme/tsup.config.ts b/packages/utils-theme/tsup.config.ts
new file mode 100644
index 0000000..f37ebb2
--- /dev/null
+++ b/packages/utils-theme/tsup.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  outDir: './dist',
+  format: 'esm',
+  dts: true,
+  sourcemap: true,
+  clean: true,
+})
diff --git a/packages/widget/package.json b/packages/widget/package.json
index 2d08343..e8dbef3 100644
--- a/packages/widget/package.json
+++ b/packages/widget/package.json
@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@sciux/layout": "workspace:^",
+    "@sciux/utils-theme": "workspace:^",
     "@vue/reactivity": "^3.5.14",
     "arktype": "^2.1.20",
     "sciux-laplace": "catalog:",
diff --git a/packages/widget/src/table.ts b/packages/widget/src/table.ts
index 8b4cb0b..7fbf9b0 100644
--- a/packages/widget/src/table.ts
+++ b/packages/widget/src/table.ts
@@ -11,7 +11,7 @@
  * ```
  */
 
-import { size } from '@sciux/layout'
+import { theme } from '@sciux/utils-theme'
 import { type } from 'arktype'
 import { defineComponent, toValue } from 'sciux-laplace'
 
@@ -47,7 +47,7 @@ export default defineComponent<'table', typeof TableType.infer>((attrs, _context
       // 应用 inset 参数到表格的内边距
       const insetValue = toValue(attrs.inset)
       if (insetValue !== undefined) {
-        table.style.padding = size(insetValue)
+        table.style.padding = theme.size(insetValue)
       }
 
       const caption = toValue(attrs.caption)
@@ -72,7 +72,7 @@ export default defineComponent<'table', typeof TableType.infer>((attrs, _context
           Array.from({ length: columns }).forEach((_, colIndex) => {
             const td = document.createElement('td')
             td.style.textAlign = 'center'
-            td.style.padding = size('sm')
+            td.style.padding = theme.size('sm')
             const childIndex = rowIndex * columns + colIndex
             if (childIndex < childArray.length) {
               td.append(childArray[childIndex])
@@ -93,7 +93,7 @@ export default defineComponent<'table', typeof TableType.infer>((attrs, _context
           Array.from({ length: columns }).forEach((_, colIndex) => {
             const td = document.createElement('td')
             td.style.textAlign = 'center'
-            td.style.padding = size('sm')
+            td.style.padding = theme.size('sm')
             const childIndex = rowIndex * columns + colIndex
             if (childIndex < childArray.length) {
               td.append(childArray[childIndex])
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4e1930..d3715af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,7 +49,7 @@ catalogs:
       specifier: ^10.4.0
       version: 10.4.0
     sciux-laplace:
-      specifier: v0.0.1-beta.1
+      specifier: v0.0.1-beta.6
       version: 0.0.1-beta.1
     simple-git-hooks:
       specifier: ^2.11.1
@@ -179,6 +179,9 @@ importers:
 
   packages/layout:
     dependencies:
+      '@sciux/utils-theme':
+        specifier: workspace:^
+        version: link:../utils-theme
       '@vue/reactivity':
         specifier: ^3.5.14
         version: 3.5.14
@@ -216,11 +219,47 @@ importers:
         specifier: 'catalog:'
         version: 0.0.1-beta.1
 
+  packages/theme-default:
+    dependencies:
+      '@sciux/layout':
+        specifier: workspace:^
+        version: link:../layout
+      '@vue/reactivity':
+        specifier: ^3.5.14
+        version: 3.5.14
+      arktype:
+        specifier: ^2.1.20
+        version: 2.1.20
+      katex:
+        specifier: ^0.16.22
+        version: 0.16.22
+      sciux-laplace:
+        specifier: 'catalog:'
+        version: 0.0.1-beta.6
+      shiki:
+        specifier: ^3.4.2
+        version: 3.4.2
+
+  packages/utils-theme:
+    dependencies:
+      '@vue/reactivity':
+        specifier: ^3.5.14
+        version: 3.5.14
+      arktype:
+        specifier: ^2.1.20
+        version: 2.1.20
+      sciux-laplace:
+        specifier: 'catalog:'
+        version: 0.0.1-beta.6
+
   packages/widget:
     dependencies:
       '@sciux/layout':
         specifier: workspace:^
         version: link:../layout
+      '@sciux/utils-theme':
+        specifier: workspace:^
+        version: link:../utils-theme
       '@vue/reactivity':
         specifier: ^3.5.14
         version: 3.5.14
@@ -242,6 +281,12 @@ importers:
       '@sciux/model':
         specifier: workspace:^
         version: link:../packages/model
+      '@sciux/theme-default':
+        specifier: workspace:^
+        version: link:../packages/theme-default
+      '@sciux/utils-theme':
+        specifier: workspace:^
+        version: link:../packages/utils-theme
       '@sciux/widget':
         specifier: workspace:^
         version: link:../packages/widget
@@ -2027,6 +2072,10 @@ packages:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
+  commander@8.3.0:
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    engines: {node: '>= 12'}
+
   comment-parser@1.4.1:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
@@ -2793,6 +2842,10 @@ packages:
   jsonc-parser@3.3.1:
     resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
 
+  katex@0.16.22:
+    resolution: {integrity: sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg==}
+    hasBin: true
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -3643,6 +3696,9 @@ packages:
   sciux-laplace@0.0.1-beta.1:
     resolution: {integrity: sha512-6+JtNbEnKen1GjsS8IWnvD0WOuhMAg+vqBZUqiJGqkLJ2DgNat/pct/nzAwrzN+5AEUY2fL8M4MjVF8onYGVEA==}
 
+  sciux-laplace@0.0.1-beta.6:
+    resolution: {integrity: sha512-kHTTtQoF3BB+NAwI6ZV6c+LZRWwwpNsFj/jrau97+aJSClKifauzubWzU5p4ofszaKUc18GtUdJo9PhjtkzlDw==}
+
   scslre@0.3.0:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
     engines: {node: ^14.0.0 || >=16.0.0}
@@ -6034,6 +6090,8 @@ snapshots:
 
   commander@7.2.0: {}
 
+  commander@8.3.0: {}
+
   comment-parser@1.4.1: {}
 
   commondir@1.0.1: {}
@@ -6912,6 +6970,10 @@ snapshots:
 
   jsonc-parser@3.3.1: {}
 
+  katex@0.16.22:
+    dependencies:
+      commander: 8.3.0
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -7934,6 +7996,18 @@ snapshots:
       parse-entities: 4.0.2
       xpath: 0.0.34
 
+  sciux-laplace@0.0.1-beta.6:
+    dependencies:
+      '@vue/reactivity': 3.5.14
+      '@vue/shared': 3.5.14
+      '@xmldom/xmldom': 0.9.8
+      arktype: 2.1.20
+      clsx: 2.1.1
+      css-what: 6.1.0
+      morphdom: 2.7.5
+      parse-entities: 4.0.2
+      xpath: 0.0.34
+
   scslre@0.3.0:
     dependencies:
       '@eslint-community/regexpp': 4.12.1
diff --git a/test/package.json b/test/package.json
index 9d41dd3..1ba3395 100644
--- a/test/package.json
+++ b/test/package.json
@@ -9,6 +9,8 @@
   "dependencies": {
     "@sciux/layout": "workspace:^",
     "@sciux/model": "workspace:^",
+    "@sciux/theme-default": "workspace:^",
+    "@sciux/utils-theme": "workspace:^",
     "@sciux/widget": "workspace:^",
     "sciux": "workspace:^",
     "sciux-laplace": "catalog:"
diff --git a/test/src/main.ts b/test/src/main.ts
index 17549f9..edb881c 100644
--- a/test/src/main.ts
+++ b/test/src/main.ts
@@ -1,5 +1,6 @@
 import init, { render } from 'sciux'
 import examples from './examples'
+import '@sciux/theme-default/styles/vars.css'
 
 const urlName = window.location.hash.slice(1)
 const app = document.getElementById('app')!