diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
index 2287524a2..355f89ce6 100644
--- a/crates/components/src/input.rs
+++ b/crates/components/src/input.rs
@@ -221,6 +221,7 @@ pub fn Input(
             a11y_auto_focus: "{auto_focus}",
             onkeydown,
             onkeyup,
+            overflow: "clip",
             paragraph {
                 margin: "8 12",
                 onglobalclick,
diff --git a/crates/hooks/src/theming/base.rs b/crates/hooks/src/theming/base.rs
new file mode 100644
index 000000000..f017c4d43
--- /dev/null
+++ b/crates/hooks/src/theming/base.rs
@@ -0,0 +1,229 @@
+use crate::{
+    cow_borrowed,
+    theming::*,
+};
+
+pub(crate) const BASE_THEME: Theme = Theme {
+    name: "base",
+    colors: ColorsSheet {
+        primary: cow_borrowed!(""),
+        secondary: cow_borrowed!(""),
+        tertiary: cow_borrowed!(""),
+        surface: cow_borrowed!(""),
+        secondary_surface: cow_borrowed!(""),
+        neutral_surface: cow_borrowed!(""),
+        focused_surface: cow_borrowed!(""),
+        opposite_surface: cow_borrowed!(""),
+        secondary_opposite_surface: cow_borrowed!(""),
+        tertiary_opposite_surface: cow_borrowed!(""),
+        background: cow_borrowed!(""),
+        focused_border: cow_borrowed!(""),
+        solid: cow_borrowed!(""),
+        color: cow_borrowed!(""),
+        placeholder_color: cow_borrowed!(""),
+    },
+    body: BodyTheme {
+        background: cow_borrowed!("key(background)"),
+        color: cow_borrowed!("key(color)"),
+        padding: cow_borrowed!("none"),
+    },
+    slider: SliderTheme {
+        background: cow_borrowed!("key(surface)"),
+        thumb_background: cow_borrowed!("key(secondary)"),
+        thumb_inner_background: cow_borrowed!("key(primary)"),
+        border_fill: cow_borrowed!("key(surface)"),
+    },
+    button: ButtonTheme {
+        background: cow_borrowed!("key(neutral_surface)"),
+        hover_background: cow_borrowed!("key(focused_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+        border_fill: cow_borrowed!("key(surface)"),
+        focus_border_fill: cow_borrowed!("key(focused_border)"),
+        shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
+        padding: cow_borrowed!("8 12"),
+        margin: cow_borrowed!("0"),
+        corner_radius: cow_borrowed!("8"),
+        width: cow_borrowed!("auto"),
+        height: cow_borrowed!("auto"),
+    },
+    input: InputTheme {
+        background: cow_borrowed!("key(neutral_surface)"),
+        hover_background: cow_borrowed!("key(focused_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+        placeholder_font_theme: FontTheme {
+            color: cow_borrowed!("rgb(100, 100, 100)"),
+        },
+        border_fill: cow_borrowed!("key(surface)"),
+        width: cow_borrowed!("150"),
+        margin: cow_borrowed!("0"),
+        corner_radius: cow_borrowed!("10"),
+        shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
+    },
+    switch: SwitchTheme {
+        margin: cow_borrowed!("0"),
+        background: cow_borrowed!("key(secondary_surface)"),
+        thumb_background: cow_borrowed!("key(opposite_surface)"),
+        enabled_background: cow_borrowed!("key(secondary)"),
+        enabled_thumb_background: cow_borrowed!("key(primary)"),
+        focus_border_fill: cow_borrowed!("key(focused_border)"),
+        enabled_focus_border_fill: cow_borrowed!("key(focused_border)"),
+    },
+    scroll_bar: ScrollBarTheme {
+        background: cow_borrowed!("key(secondary_surface)"),
+        thumb_background: cow_borrowed!("key(opposite_surface)"),
+        hover_thumb_background: cow_borrowed!("key(secondary_opposite_surface)"),
+        active_thumb_background: cow_borrowed!("key(tertiary_opposite_surface)"),
+        size: cow_borrowed!("15"),
+    },
+    tooltip: TooltipTheme {
+        background: cow_borrowed!("key(neutral_surface)"),
+        color: cow_borrowed!("key(color)"),
+        border_fill: cow_borrowed!("key(surface)"),
+    },
+    dropdown: DropdownTheme {
+        width: cow_borrowed!("auto"),
+        margin: cow_borrowed!("0"),
+        dropdown_background: cow_borrowed!("key(background)"),
+        background_button: cow_borrowed!("key(neutral_surface)"),
+        hover_background: cow_borrowed!("key(focused_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+        border_fill: cow_borrowed!("key(surface)"),
+        arrow_fill: cow_borrowed!("rgb(40, 40, 40)"),
+    },
+    dropdown_item: DropdownItemTheme {
+        background: cow_borrowed!("key(background)"),
+        select_background: cow_borrowed!("key(neutral_surface)"),
+        hover_background: cow_borrowed!("key(focused_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+    },
+    accordion: AccordionTheme {
+        color: cow_borrowed!("black"),
+        background: cow_borrowed!("key(neutral_surface)"),
+        border_fill: cow_borrowed!("key(surface)"),
+    },
+    loader: LoaderTheme {
+        primary_color: cow_borrowed!("key(tertiary_opposite_surface)"),
+    },
+    link: LinkTheme {
+        highlight_color: cow_borrowed!("rgb(43,106,208)"),
+    },
+    progress_bar: ProgressBarTheme {
+        color: cow_borrowed!("white"),
+        background: cow_borrowed!("key(surface)"),
+        progress_background: cow_borrowed!("key(primary)"),
+        width: cow_borrowed!("fill"),
+        height: cow_borrowed!("20"),
+    },
+    table: TableTheme {
+        font_theme: FontTheme {
+            color: cow_borrowed!("black"),
+        },
+        background: cow_borrowed!("key(background)"),
+        arrow_fill: cow_borrowed!("rgb(40, 40, 40)"),
+        row_background: cow_borrowed!("transparent"),
+        alternate_row_background: cow_borrowed!("key(neutral_surface)"),
+        divider_fill: cow_borrowed!("key(secondary_surface)"),
+        height: cow_borrowed!("auto"),
+        corner_radius: cow_borrowed!("6"),
+        shadow: cow_borrowed!("0 2 15 5 rgb(35, 35, 35, 70)"),
+    },
+    canvas: CanvasTheme {
+        width: cow_borrowed!("300"),
+        height: cow_borrowed!("150"),
+        background: cow_borrowed!("white"),
+    },
+    graph: GraphTheme {
+        width: cow_borrowed!("100%"),
+        height: cow_borrowed!("100%"),
+    },
+    network_image: NetworkImageTheme {
+        width: cow_borrowed!("100%"),
+        height: cow_borrowed!("100%"),
+    },
+    icon: IconTheme {
+        width: cow_borrowed!("10"),
+        height: cow_borrowed!("10"),
+        margin: cow_borrowed!("0"),
+    },
+    sidebar: SidebarTheme {
+        spacing: cow_borrowed!("4"),
+        background: cow_borrowed!("key(neutral_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+    },
+    sidebar_item: SidebarItemTheme {
+        margin: cow_borrowed!("0"),
+        background: cow_borrowed!("transparent"),
+        hover_background: cow_borrowed!("key(focused_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+    },
+    tile: TileTheme {
+        padding: cow_borrowed!("4 6"),
+    },
+    radio: RadioTheme {
+        unselected_fill: cow_borrowed!("key(solid)"),
+        selected_fill: cow_borrowed!("key(primary)"),
+        border_fill: cow_borrowed!("key(surface)"),
+    },
+    checkbox: CheckboxTheme {
+        unselected_fill: cow_borrowed!("key(solid)"),
+        selected_fill: cow_borrowed!("key(primary)"),
+        selected_icon_fill: cow_borrowed!("key(secondary)"),
+    },
+    menu_item: MenuItemTheme {
+        hover_background: cow_borrowed!("key(focused_surface)"),
+        corner_radius: cow_borrowed!("8"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+    },
+    menu_container: MenuContainerTheme {
+        background: cow_borrowed!("key(neutral_surface)"),
+        padding: cow_borrowed!("4"),
+        shadow: cow_borrowed!("0 2 5 2 rgb(0, 0, 0, 0.1)"),
+    },
+    snackbar: SnackBarTheme {
+        background: cow_borrowed!("key(focused_surface)"),
+        color: cow_borrowed!("key(color)"),
+    },
+    popup: PopupTheme {
+        background: cow_borrowed!("key(background)"),
+        color: cow_borrowed!("black"),
+        cross_fill: cow_borrowed!("key(solid)"),
+        width: cow_borrowed!("350"),
+        height: cow_borrowed!("200"),
+    },
+    tab: TabTheme {
+        background: cow_borrowed!("key(neutral_surface)"),
+        hover_background: cow_borrowed!("key(focused_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+        border_fill: cow_borrowed!("none"),
+        focus_border_fill: cow_borrowed!("key(focused_border)"),
+        padding: cow_borrowed!("8 16"),
+        width: cow_borrowed!("auto"),
+        height: cow_borrowed!("auto"),
+    },
+    bottom_tab: BottomTabTheme {
+        background: cow_borrowed!("transparent"),
+        hover_background: cow_borrowed!("key(secondary_surface)"),
+        font_theme: FontTheme {
+            color: cow_borrowed!("key(color)"),
+        },
+        padding: cow_borrowed!("8 10"),
+        width: cow_borrowed!("auto"),
+        height: cow_borrowed!("auto"),
+    },
+};
diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs
deleted file mode 100644
index 4ffea4418..000000000
--- a/crates/hooks/src/theming/dark.rs
+++ /dev/null
@@ -1,212 +0,0 @@
-use crate::{
-    cow_borrowed,
-    theming::*,
-};
-
-pub const DARK_THEME: Theme = Theme {
-    name: "dark",
-    body: BodyTheme {
-        background: cow_borrowed!("rgb(25, 25, 25)"),
-        color: cow_borrowed!("white"),
-        padding: LIGHT_THEME.body.padding,
-    },
-    slider: SliderTheme {
-        background: cow_borrowed!("rgb(60, 60, 60)"),
-        thumb_background: cow_borrowed!("rgb(103, 80, 164)"),
-        thumb_inner_background: cow_borrowed!("rgb(202, 193, 227)"),
-        border_fill: cow_borrowed!("rgb(103, 80, 164)"),
-    },
-    button: ButtonTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
-        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-        border_fill: cow_borrowed!("rgb(80, 80, 80)"),
-        focus_border_fill: cow_borrowed!("rgb(110, 110, 110)"),
-        shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
-        padding: LIGHT_THEME.button.padding,
-        margin: LIGHT_THEME.button.margin,
-        corner_radius: LIGHT_THEME.button.corner_radius,
-        width: LIGHT_THEME.button.width,
-        height: LIGHT_THEME.button.height,
-    },
-    input: InputTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
-        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-        placeholder_font_theme: FontTheme {
-            color: cow_borrowed!("rgb(210, 210, 210)"),
-        },
-        border_fill: cow_borrowed!("rgb(80, 80, 80)"),
-        width: LIGHT_THEME.input.width,
-        margin: LIGHT_THEME.input.margin,
-        corner_radius: LIGHT_THEME.input.corner_radius,
-        shadow: LIGHT_THEME.input.shadow,
-    },
-    switch: SwitchTheme {
-        margin: LIGHT_THEME.input.margin,
-        background: cow_borrowed!("rgb(60, 60, 60)"),
-        thumb_background: cow_borrowed!("rgb(200, 200, 200)"),
-        enabled_background: cow_borrowed!("rgb(202, 193, 227)"),
-        enabled_thumb_background: cow_borrowed!("rgb(103, 80, 164)"),
-        focus_border_fill: cow_borrowed!("rgb(110, 110, 110)"),
-        enabled_focus_border_fill: cow_borrowed!("rgb(170, 170, 170)"),
-    },
-    scroll_bar: ScrollBarTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
-        thumb_background: cow_borrowed!("rgb(100, 100, 100)"),
-        hover_thumb_background: cow_borrowed!("rgb(120, 120, 120)"),
-        active_thumb_background: cow_borrowed!("rgb(140, 140, 140)"),
-        size: LIGHT_THEME.scroll_bar.size,
-    },
-    tooltip: TooltipTheme {
-        background: cow_borrowed!("rgb(35,35,35)"),
-        color: cow_borrowed!("rgb(240,240,240)"),
-        border_fill: cow_borrowed!("rgb(80, 80, 80)"),
-    },
-    dropdown: DropdownTheme {
-        width: LIGHT_THEME.dropdown.width,
-        margin: LIGHT_THEME.dropdown.margin,
-        dropdown_background: cow_borrowed!("rgb(25, 25, 25)"),
-        background_button: cow_borrowed!("rgb(35, 35, 35)"),
-        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-        border_fill: cow_borrowed!("rgb(80, 80, 80)"),
-        arrow_fill: cow_borrowed!("rgb(150, 150, 150)"),
-    },
-    dropdown_item: DropdownItemTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
-        select_background: cow_borrowed!("rgb(80, 80, 80)"),
-        hover_background: cow_borrowed!("rgb(55, 55, 55)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-    },
-    accordion: AccordionTheme {
-        color: cow_borrowed!("white"),
-        background: cow_borrowed!("rgb(60, 60, 60)"),
-        border_fill: cow_borrowed!("rgb(80, 80, 80)"),
-    },
-    loader: LoaderTheme {
-        primary_color: cow_borrowed!("rgb(150, 150, 150)"),
-    },
-    link: LinkTheme {
-        highlight_color: cow_borrowed!("rgb(43,106,208)"),
-    },
-    progress_bar: ProgressBarTheme {
-        color: cow_borrowed!("black"),
-        background: cow_borrowed!("rgb(60, 60, 60)"),
-        progress_background: cow_borrowed!("rgb(202, 193, 227)"),
-        width: LIGHT_THEME.progress_bar.width,
-        height: LIGHT_THEME.progress_bar.height,
-    },
-    table: TableTheme {
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-        background: cow_borrowed!("rgb(25, 25, 25)"),
-        arrow_fill: cow_borrowed!("rgb(150, 150, 150)"),
-        row_background: cow_borrowed!("transparent"),
-        alternate_row_background: cow_borrowed!("rgb(50, 50, 50)"),
-        divider_fill: cow_borrowed!("rgb(100, 100, 100)"),
-        height: LIGHT_THEME.table.height,
-        corner_radius: LIGHT_THEME.table.corner_radius,
-        shadow: LIGHT_THEME.table.shadow,
-    },
-    canvas: CanvasTheme {
-        width: LIGHT_THEME.canvas.width,
-        height: LIGHT_THEME.canvas.height,
-        background: cow_borrowed!("white"),
-    },
-    graph: GraphTheme {
-        width: LIGHT_THEME.graph.width,
-        height: LIGHT_THEME.graph.height,
-    },
-    network_image: NetworkImageTheme {
-        width: LIGHT_THEME.network_image.width,
-        height: LIGHT_THEME.network_image.height,
-    },
-    icon: IconTheme {
-        width: LIGHT_THEME.icon.width,
-        height: LIGHT_THEME.icon.height,
-        margin: LIGHT_THEME.icon.margin,
-    },
-    sidebar: SidebarTheme {
-        spacing: LIGHT_THEME.sidebar.spacing,
-        background: cow_borrowed!("rgb(20, 20, 20)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-    },
-    sidebar_item: SidebarItemTheme {
-        margin: LIGHT_THEME.sidebar_item.margin,
-        background: cow_borrowed!("transparent"),
-        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-    },
-    tile: TileTheme {
-        padding: LIGHT_THEME.tile.padding,
-    },
-    radio: RadioTheme {
-        unselected_fill: cow_borrowed!("rgb(245, 245, 245)"),
-        selected_fill: cow_borrowed!("rgb(202, 193, 227)"),
-        border_fill: cow_borrowed!("rgb(103, 80, 164)"),
-    },
-    checkbox: CheckboxTheme {
-        unselected_fill: cow_borrowed!("rgb(245, 245, 245)"),
-        selected_fill: cow_borrowed!("rgb(202, 193, 227)"),
-        selected_icon_fill: cow_borrowed!("rgb(103, 80, 164)"),
-    },
-    menu_item: MenuItemTheme {
-        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        corner_radius: LIGHT_THEME.menu_item.corner_radius,
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-    },
-    menu_container: MenuContainerTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
-        padding: LIGHT_THEME.menu_container.padding,
-        shadow: LIGHT_THEME.menu_container.shadow,
-    },
-    snackbar: SnackBarTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
-        color: cow_borrowed!("white"),
-    },
-    popup: PopupTheme {
-        background: cow_borrowed!("rgb(25, 25, 25)"),
-        color: cow_borrowed!("white"),
-        cross_fill: cow_borrowed!("rgb(150, 150, 150)"),
-        width: LIGHT_THEME.popup.width,
-        height: LIGHT_THEME.popup.height,
-    },
-    tab: TabTheme {
-        background: cow_borrowed!("rgb(35, 35, 35)"),
-        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-        border_fill: cow_borrowed!("none"),
-        focus_border_fill: cow_borrowed!("rgb(110, 110, 110)"),
-        padding: LIGHT_THEME.button.padding,
-        width: LIGHT_THEME.button.width,
-        height: LIGHT_THEME.button.height,
-    },
-    bottom_tab: BottomTabTheme {
-        background: cow_borrowed!("transparent"),
-        hover_background: cow_borrowed!("rgb(45, 45, 45)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("white"),
-        },
-        padding: LIGHT_THEME.button.padding,
-        width: LIGHT_THEME.button.width,
-        height: LIGHT_THEME.button.height,
-    },
-};
diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs
deleted file mode 100644
index 3ac94cd3e..000000000
--- a/crates/hooks/src/theming/light.rs
+++ /dev/null
@@ -1,212 +0,0 @@
-use crate::{
-    cow_borrowed,
-    theming::*,
-};
-
-pub const LIGHT_THEME: Theme = Theme {
-    name: "light",
-    body: BodyTheme {
-        background: cow_borrowed!("white"),
-        color: cow_borrowed!("black"),
-        padding: cow_borrowed!("none"),
-    },
-    slider: SliderTheme {
-        background: cow_borrowed!("rgb(210, 210, 210)"),
-        thumb_background: cow_borrowed!("rgb(202, 193, 227)"),
-        thumb_inner_background: cow_borrowed!("rgb(103, 80, 164)"),
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
-    },
-    button: ButtonTheme {
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        hover_background: cow_borrowed!("rgb(235, 235, 235)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
-        focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
-        shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
-        padding: cow_borrowed!("8 12"),
-        margin: cow_borrowed!("0"),
-        corner_radius: cow_borrowed!("8"),
-        width: cow_borrowed!("auto"),
-        height: cow_borrowed!("auto"),
-    },
-    input: InputTheme {
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        hover_background: cow_borrowed!("rgb(235, 235, 235)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-        placeholder_font_theme: FontTheme {
-            color: cow_borrowed!("rgb(100, 100, 100)"),
-        },
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
-        width: cow_borrowed!("150"),
-        margin: cow_borrowed!("0"),
-        corner_radius: cow_borrowed!("10"),
-        shadow: cow_borrowed!("0 4 5 0 rgb(0, 0, 0, 0.1)"),
-    },
-    switch: SwitchTheme {
-        margin: cow_borrowed!("0"),
-        background: cow_borrowed!("rgb(225, 225, 225)"),
-        thumb_background: cow_borrowed!("rgb(125, 125, 125)"),
-        enabled_background: cow_borrowed!("rgb(202, 193, 227)"),
-        enabled_thumb_background: cow_borrowed!("rgb(103, 80, 164)"),
-        focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
-        enabled_focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
-    },
-    scroll_bar: ScrollBarTheme {
-        background: cow_borrowed!("rgb(225, 225, 225)"),
-        thumb_background: cow_borrowed!("rgb(135, 135, 135)"),
-        hover_thumb_background: cow_borrowed!("rgb(115, 115, 115)"),
-        active_thumb_background: cow_borrowed!("rgb(95, 95, 95)"),
-        size: cow_borrowed!("15"),
-    },
-    tooltip: TooltipTheme {
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        color: cow_borrowed!("rgb(25,25,25)"),
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
-    },
-    dropdown: DropdownTheme {
-        width: cow_borrowed!("auto"),
-        margin: cow_borrowed!("0"),
-        dropdown_background: cow_borrowed!("white"),
-        background_button: cow_borrowed!("rgb(245, 245, 245)"),
-        hover_background: cow_borrowed!("rgb(235, 235, 235)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
-        arrow_fill: cow_borrowed!("rgb(40, 40, 40)"),
-    },
-    dropdown_item: DropdownItemTheme {
-        background: cow_borrowed!("white"),
-        select_background: cow_borrowed!("rgb(240, 240, 240)"),
-        hover_background: cow_borrowed!("rgb(220, 220, 220)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-    },
-    accordion: AccordionTheme {
-        color: cow_borrowed!("black"),
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
-    },
-    loader: LoaderTheme {
-        primary_color: cow_borrowed!("rgb(50, 50, 50)"),
-    },
-    link: LinkTheme {
-        highlight_color: cow_borrowed!("rgb(43,106,208)"),
-    },
-    progress_bar: ProgressBarTheme {
-        color: cow_borrowed!("white"),
-        background: cow_borrowed!("rgb(210, 210, 210)"),
-        progress_background: cow_borrowed!("rgb(103, 80, 164)"),
-        width: cow_borrowed!("fill"),
-        height: cow_borrowed!("20"),
-    },
-    table: TableTheme {
-        font_theme: FontTheme {
-            color: cow_borrowed!("black"),
-        },
-        background: cow_borrowed!("white"),
-        arrow_fill: cow_borrowed!("rgb(40, 40, 40)"),
-        row_background: cow_borrowed!("transparent"),
-        alternate_row_background: cow_borrowed!("rgb(240, 240, 240)"),
-        divider_fill: cow_borrowed!("rgb(200, 200, 200)"),
-        height: cow_borrowed!("auto"),
-        corner_radius: cow_borrowed!("6"),
-        shadow: cow_borrowed!("0 2 15 5 rgb(35, 35, 35, 70)"),
-    },
-    canvas: CanvasTheme {
-        width: cow_borrowed!("300"),
-        height: cow_borrowed!("150"),
-        background: cow_borrowed!("white"),
-    },
-    graph: GraphTheme {
-        width: cow_borrowed!("100%"),
-        height: cow_borrowed!("100%"),
-    },
-    network_image: NetworkImageTheme {
-        width: cow_borrowed!("100%"),
-        height: cow_borrowed!("100%"),
-    },
-    icon: IconTheme {
-        width: cow_borrowed!("10"),
-        height: cow_borrowed!("10"),
-        margin: cow_borrowed!("0"),
-    },
-    sidebar: SidebarTheme {
-        spacing: cow_borrowed!("4"),
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-    },
-    sidebar_item: SidebarItemTheme {
-        margin: cow_borrowed!("0"),
-        background: cow_borrowed!("transparent"),
-        hover_background: cow_borrowed!("rgb(230, 230, 230)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-    },
-    tile: TileTheme {
-        padding: cow_borrowed!("4 6"),
-    },
-    radio: RadioTheme {
-        unselected_fill: cow_borrowed!("rgb(35, 35, 35)"),
-        selected_fill: cow_borrowed!("rgb(103, 80, 164)"),
-        border_fill: cow_borrowed!("rgb(210, 210, 210)"),
-    },
-    checkbox: CheckboxTheme {
-        unselected_fill: cow_borrowed!("rgb(80, 80, 80)"),
-        selected_fill: cow_borrowed!("rgb(103, 80, 164)"),
-        selected_icon_fill: cow_borrowed!("rgb(202, 193, 227)"),
-    },
-    menu_item: MenuItemTheme {
-        hover_background: cow_borrowed!("rgb(235, 235, 235)"),
-        corner_radius: cow_borrowed!("8"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-    },
-    menu_container: MenuContainerTheme {
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        padding: cow_borrowed!("4"),
-        shadow: cow_borrowed!("0 2 5 2 rgb(0, 0, 0, 0.1)"),
-    },
-    snackbar: SnackBarTheme {
-        background: cow_borrowed!("rgb(235, 235, 235)"),
-        color: cow_borrowed!("rgb(103, 80, 164)"),
-    },
-    popup: PopupTheme {
-        background: cow_borrowed!("white"),
-        color: cow_borrowed!("black"),
-        cross_fill: cow_borrowed!("rgb(40, 40, 40)"),
-        width: cow_borrowed!("350"),
-        height: cow_borrowed!("200"),
-    },
-    tab: TabTheme {
-        background: cow_borrowed!("rgb(245, 245, 245)"),
-        hover_background: cow_borrowed!("rgb(235, 235, 235)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-        border_fill: cow_borrowed!("none"),
-        focus_border_fill: cow_borrowed!("rgb(180, 180, 180)"),
-        padding: cow_borrowed!("8 16"),
-        width: cow_borrowed!("auto"),
-        height: cow_borrowed!("auto"),
-    },
-    bottom_tab: BottomTabTheme {
-        background: cow_borrowed!("transparent"),
-        hover_background: cow_borrowed!("rgb(230, 230, 230)"),
-        font_theme: FontTheme {
-            color: cow_borrowed!("rgb(10, 10, 10)"),
-        },
-        padding: cow_borrowed!("8 10"),
-        width: cow_borrowed!("auto"),
-        height: cow_borrowed!("auto"),
-    },
-};
diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs
index e1033fc74..121d25ea8 100644
--- a/crates/hooks/src/theming/mod.rs
+++ b/crates/hooks/src/theming/mod.rs
@@ -1,5 +1,5 @@
-mod dark;
-mod light;
+mod base;
+mod themes;
 
 #[doc(hidden)]
 pub use ::core::default::Default;
@@ -7,8 +7,7 @@ pub use ::core::default::Default;
 pub use ::paste::paste;
 #[doc(hidden)]
 pub use ::std::borrow::Cow;
-pub use dark::*;
-pub use light::*;
+pub use themes::*;
 
 /// Alias for `Cow::Borrowed`, because that's used a million times so shortening it is nice.
 /// Makes the code more readable.
@@ -31,13 +30,9 @@ macro_rules! cow_borrowed {
 /// # struct Foo;
 /// define_theme! {
 ///     %[component]
-///     pub Test<'a> {
+///     pub Test {
 ///         %[cows]
 ///         cow_string: str,
-///         %[borrowed]
-///         borrowed_data: &'a Foo,
-///         %[owned]
-///         owned_data: Bar,
 ///         %[subthemes]
 ///         font_theme: FontTheme,
 ///     }
@@ -58,20 +53,6 @@ macro_rules! define_theme {
                     $cow_field_name:ident: $cow_field_ty:ty,
                 )*
             )?
-            $(
-                %[borrowed$($borrowed_attr_control:tt)?]
-                $(
-                    $(#[$borrowed_field_attrs:meta])*
-                    $borrowed_field_name:ident: $borrowed_field_ty:ty,
-                )*
-            )?
-            $(
-                %[owned$($owned_attr_control:tt)?]
-                $(
-                    $(#[$owned_field_attrs:meta])*
-                    $owned_field_name:ident: $owned_field_ty:ty,
-                )*
-            )?
             $(
                 %[subthemes$($subthemes_attr_control:tt)?]
                 $(
@@ -82,22 +63,12 @@ macro_rules! define_theme {
     }) => {
         $crate::define_theme!(NOTHING=$($($component_attr_control)?)?);
         $crate::define_theme!(NOTHING=$($($cows_attr_control)?)?);
-        $crate::define_theme!(NOTHING=$($($borrowed_attr_control)?)?);
-        $crate::define_theme!(NOTHING=$($($owned_attr_control)?)?);
         $crate::define_theme!(NOTHING=$($($subthemes_attr_control)?)?);
         $crate::paste! {
             #[derive(Default, Clone, Debug, PartialEq, Eq)]
             #[doc = "You can use this to change a theme for only one component, with the `theme` property."]
             $(#[$attrs])*
             $vis struct [<$name ThemeWith>] $(<$lifetime>)? {
-                $($(
-                    $(#[$borrowed_field_attrs])*
-                    pub $borrowed_field_name: Option<$borrowed_field_ty>,
-                )*)?
-                $($(
-                    $(#[$owned_field_attrs])*
-                    pub $owned_field_name: Option<$owned_field_ty>,
-                )*)?
                 $($(
                     $(#[$subtheme_field_attrs])*
                     pub $subtheme_field_name: Option< [<$subtheme_field_ty_name With>] $(<$subtheme_field_ty_lifetime>)? >,
@@ -112,14 +83,6 @@ macro_rules! define_theme {
             $(#[doc = "Theming properties for the `" $name "` component."] $($component_attr_control)?)?
             $(#[$attrs])*
             $vis struct [<$name Theme>] $(<$lifetime>)? {
-                $($(
-                    $(#[$borrowed_field_attrs])*
-                    pub $borrowed_field_name: $borrowed_field_ty,
-                )*)?
-                $($(
-                    $(#[$owned_field_attrs])*
-                    pub $owned_field_name: $owned_field_ty,
-                )*)?
                 $($(
                     $(#[$subtheme_field_attrs])*
                     pub $subtheme_field_name: $subtheme_field_ty_name $(<$subtheme_field_ty_lifetime>)?,
@@ -131,20 +94,19 @@ macro_rules! define_theme {
             }
 
             impl $(<$lifetime>)? [<$name Theme>] $(<$lifetime>)? {
-                #[doc = "Checks each field in `optional` and if it's `Some`, it overwrites the corresponding `self` field."]
-                pub fn apply_optional(&mut self, optional: & $($lifetime)? [<$name ThemeWith>]) {
+
+                pub fn apply_colors(&mut self, colors: &$crate::ColorsSheet) {
                     $($(
-                        if let Some($borrowed_field_name) = optional.$borrowed_field_name {
-                            self.$borrowed_field_name = $borrowed_field_name;
-                        }
+                        self.$subtheme_field_name.apply_colors(colors);
                     )*)?
 
                     $($(
-                        if let Some($owned_field_name) = &optional.$owned_field_name {
-                            self.$owned_field_name = $owned_field_name.clone();
-                        }
+                        self.$cow_field_name = colors.resolve(self.$cow_field_name.clone());
                     )*)?
+                }
 
+                #[doc = "Checks each field in `optional` and if it's `Some`, it overwrites the corresponding `self` field."]
+                pub fn apply_optional(&mut self, optional: & $($lifetime)? [<$name ThemeWith>]) {
                     $($(
                         if let Some($subtheme_field_name) = &optional.$subtheme_field_name {
                             self.$subtheme_field_name.apply_optional($subtheme_field_name);
@@ -565,9 +527,57 @@ define_theme! {
     }
 }
 
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub struct ColorsSheet {
+    pub primary: Cow<'static, str>,
+    pub secondary: Cow<'static, str>,
+    pub tertiary: Cow<'static, str>,
+    pub surface: Cow<'static, str>,
+    pub secondary_surface: Cow<'static, str>,
+    pub neutral_surface: Cow<'static, str>,
+    pub focused_surface: Cow<'static, str>,
+    pub opposite_surface: Cow<'static, str>,
+    pub secondary_opposite_surface: Cow<'static, str>,
+    pub tertiary_opposite_surface: Cow<'static, str>,
+    pub background: Cow<'static, str>,
+    pub focused_border: Cow<'static, str>,
+    pub solid: Cow<'static, str>,
+    pub color: Cow<'static, str>,
+    pub placeholder_color: Cow<'static, str>,
+}
+
+impl ColorsSheet {
+    pub fn resolve(&self, val: Cow<'static, str>) -> Cow<'static, str> {
+        if val.starts_with("key") {
+            let key_val = val.replace("key(", "").replace(")", "");
+            match key_val.as_str() {
+                "primary" => self.primary.clone(),
+                "secondary" => self.secondary.clone(),
+                "tertiary" => self.tertiary.clone(),
+                "surface" => self.surface.clone(),
+                "secondary_surface" => self.secondary_surface.clone(),
+                "neutral_surface" => self.neutral_surface.clone(),
+                "focused_surface" => self.focused_surface.clone(),
+                "opposite_surface" => self.opposite_surface.clone(),
+                "secondary_opposite_surface" => self.secondary_opposite_surface.clone(),
+                "tertiary_opposite_surface" => self.tertiary_opposite_surface.clone(),
+                "background" => self.background.clone(),
+                "focused_border" => self.focused_border.clone(),
+                "solid" => self.solid.clone(),
+                "color" => self.color.clone(),
+                "placeholder_color" => self.placeholder_color.clone(),
+                _ => self.primary.clone(),
+            }
+        } else {
+            val
+        }
+    }
+}
+
 #[derive(Clone, Debug, PartialEq, Eq)]
 pub struct Theme {
     pub name: &'static str,
+    pub colors: ColorsSheet,
     pub body: BodyTheme,
     pub button: ButtonTheme,
     pub switch: SwitchTheme,
diff --git a/crates/hooks/src/theming/themes.rs b/crates/hooks/src/theming/themes.rs
new file mode 100644
index 000000000..289bec04e
--- /dev/null
+++ b/crates/hooks/src/theming/themes.rs
@@ -0,0 +1,71 @@
+use super::base::BASE_THEME;
+use crate::{
+    cow_borrowed,
+    theming::*,
+};
+
+pub const DARK_THEME: Theme = Theme {
+    name: "dark",
+    colors: ColorsSheet {
+        primary: cow_borrowed!("rgb(103, 80, 164)"),
+        secondary: cow_borrowed!("rgb(202, 193, 227)"),
+        tertiary: cow_borrowed!("white"),
+        surface: cow_borrowed!("rgb(60, 60, 60)"),
+        secondary_surface: cow_borrowed!("rgb(45, 45, 45)"),
+        neutral_surface: cow_borrowed!("rgb(25, 25, 25)"),
+        focused_surface: cow_borrowed!("rgb(15, 15, 15)"),
+        opposite_surface: cow_borrowed!("rgb(210, 210, 210)"),
+        secondary_opposite_surface: cow_borrowed!("rgb(225, 225, 225)"),
+        tertiary_opposite_surface: cow_borrowed!("rgb(235, 235, 235)"),
+        background: cow_borrowed!("rgb(20, 20, 20)"),
+        focused_border: cow_borrowed!("rgb(110, 110, 110)"),
+        solid: cow_borrowed!("rgb(240, 240, 240)"),
+        color: cow_borrowed!("rgb(250, 250, 250)"),
+        placeholder_color: cow_borrowed!("rgb(210, 210, 210)"),
+    },
+    ..BASE_THEME
+};
+
+pub const LIGHT_THEME: Theme = Theme {
+    name: "light",
+    colors: ColorsSheet {
+        primary: cow_borrowed!("rgb(103, 80, 164)"),
+        secondary: cow_borrowed!("rgb(202, 193, 227)"),
+        tertiary: cow_borrowed!("white"),
+        surface: cow_borrowed!("rgb(210, 210, 210)"),
+        secondary_surface: cow_borrowed!("rgb(225, 225, 225)"),
+        neutral_surface: cow_borrowed!("rgb(245, 245, 245)"),
+        focused_surface: cow_borrowed!("rgb(235, 235, 235)"),
+        opposite_surface: cow_borrowed!("rgb(125, 125, 125)"),
+        secondary_opposite_surface: cow_borrowed!("rgb(110, 110, 125)"),
+        tertiary_opposite_surface: cow_borrowed!("rgb(90, 90, 90)"),
+        background: cow_borrowed!("rgb(250, 250, 250)"),
+        solid: cow_borrowed!("rgb(35, 35, 35)"),
+        focused_border: cow_borrowed!("rgb(180, 180, 180)"),
+        color: cow_borrowed!("rgb(10, 10, 10)"),
+        placeholder_color: cow_borrowed!("rgb(100, 100, 100)"),
+    },
+    ..BASE_THEME
+};
+
+pub const BANANA_THEME: Theme = Theme {
+    name: "banana",
+    colors: ColorsSheet {
+        primary: cow_borrowed!("rgb(240, 200, 50)"),
+        secondary: cow_borrowed!("rgb(255, 250, 160)"),
+        tertiary: cow_borrowed!("rgb(255, 255, 240)"),
+        surface: cow_borrowed!("rgb(240, 229, 189)"),
+        secondary_surface: cow_borrowed!("rgb(250, 240, 210)"),
+        neutral_surface: cow_borrowed!("rgb(255, 245, 220)"),
+        focused_surface: cow_borrowed!("rgb(255, 238, 170)"),
+        opposite_surface: cow_borrowed!("rgb(139, 69, 19)"),
+        secondary_opposite_surface: cow_borrowed!("rgb(120, 80, 20)"),
+        tertiary_opposite_surface: cow_borrowed!("rgb(90, 60, 10)"),
+        background: cow_borrowed!("rgb(255, 255, 224)"),
+        solid: cow_borrowed!("rgb(110, 70, 10)"),
+        focused_border: cow_borrowed!("rgb(255, 239, 151)"),
+        color: cow_borrowed!("rgb(85, 60, 5)"),
+        placeholder_color: cow_borrowed!("rgb(56, 44, 5)"),
+    },
+    ..BASE_THEME
+};
diff --git a/crates/hooks/src/use_theme.rs b/crates/hooks/src/use_theme.rs
index c1e4f40c6..4f9d8db20 100644
--- a/crates/hooks/src/use_theme.rs
+++ b/crates/hooks/src/use_theme.rs
@@ -66,12 +66,15 @@ pub fn use_get_theme() -> Theme {
 #[macro_export]
 macro_rules! use_applied_theme {
     ($theme_prop:expr, $theme_name:ident) => {{
-        let mut theme = ::freya_hooks::use_get_theme().$theme_name;
+        let mut theme = ::freya_hooks::use_get_theme();
+        let mut requested_theme = theme.$theme_name;
 
         if let Some(theme_override) = $theme_prop {
-            theme.apply_optional(theme_override);
+            requested_theme.apply_optional(theme_override);
         }
 
-        theme
+        requested_theme.apply_colors(&theme.colors);
+
+        requested_theme
     }};
 }
diff --git a/examples/switch_theme.rs b/examples/switch_theme.rs
index 705b8df7b..32b466e74 100644
--- a/examples/switch_theme.rs
+++ b/examples/switch_theme.rs
@@ -14,6 +14,15 @@ fn ThemeChanger() -> Element {
     let mut theme = use_theme();
 
     rsx!(
+        Tile {
+            onselect: move |_| theme.set(BANANA_THEME),
+            leading: rsx!(
+                Radio {
+                    selected: theme.read().name == "banana",
+                },
+            ),
+            label { "Banana" }
+        }
         TooltipContainer {
             position: TooltipPosition::Besides,
             tooltip: rsx!(
@@ -58,69 +67,82 @@ fn app() -> Element {
 
     rsx!(
         Body {
-            rect {
-                width: "fill",
-                height: "fill",
-                main_align: "center",
-                cross_align: "center",
-                spacing: "20",
-                padding: "40",
-                Switch {
-                    enabled: value() >= 50.,
-                    ontoggled: move |_| {
-                        if value() >= 50. {
-                            value.set(25.0);
-                        } else {
-                            value.set(75.0);
+            ScrollView {
+                rect {
+                    spacing: "20",
+                    padding: "40",
+                    cross_align: "center",
+                    Switch {
+                        enabled: value() >= 50.,
+                        ontoggled: move |_| {
+                            if value() >= 50. {
+                                value.set(25.0);
+                            } else {
+                                value.set(75.0);
+                            }
                         }
                     }
-                }
-                Slider {
-                    size: "fill",
-                    value: value(),
-                    onmoved: move |e| value.set(e),
-                }
-                Slider {
-                    size: "200",
-                    value: value(),
-                    direction: "vertical",
-                    onmoved: move |e| value.set(e),
-                }
-                ProgressBar {
-                    show_progress: true,
-                    progress: value() as f32
-                }
-                Tile {
-                    onselect: move |_| {
-                        if value() >= 50. {
-                            value.set(25.0);
-                        } else {
-                            value.set(75.0);
-                        }
-                    },
-                    leading: rsx!(
-                        Checkbox {
-                            selected: value() >= 50.,
+                    Slider {
+                        size: "fill",
+                        value: value(),
+                        onmoved: move |e| value.set(e),
+                    }
+                    ProgressBar {
+                        show_progress: true,
+                        progress: value() as f32
+                    }
+                    Tile {
+                        onselect: move |_| {
+                            if value() >= 50. {
+                                value.set(25.0);
+                            } else {
+                                value.set(75.0);
+                            }
                         },
-                    ),
-                    label { "First choice" }
-                }
-                Tile {
-                    onselect: move |_| {
-                        if value() < 50. {
-                            value.set(75.0);
-                        } else {
-                            value.set(25.0);
-                        }
-                    },
-                    leading: rsx!(
-                        Checkbox {
-                            selected: value() < 50.,
+                        leading: rsx!(
+                            Checkbox {
+                                selected: value() >= 50.,
+                            },
+                        ),
+                        label { "First choice" }
+                    }
+                    Tile {
+                        onselect: move |_| {
+                            if value() < 50. {
+                                value.set(75.0);
+                            } else {
+                                value.set(25.0);
+                            }
                         },
-                    ),
-                    label { "Second choice" }
+                        leading: rsx!(
+                            Checkbox {
+                                selected: value() < 50.,
+                            },
+                        ),
+                        label { "Second choice" }
+                    }
+                    Input {
+                        value: value().round().to_string(),
+                        onchange: move |num: String| {
+                            if let Ok(num) = num.parse() {
+                                *value.write() = num;
+                            }
+                        }
+                    }
+                    Button {
+                        onclick: move |_| value.set(35.),
+                        label {
+                            "Set to 35%"
+                        }
+                    }
+                    ThemeChanger { }
+                }
+            }
+            SnackBar {
+                open: value() >= 50.,
+                label {
+                    "Hello!"
                 }
-                ThemeChanger { }
             }
         }
     )
diff --git a/examples/themer.rs b/examples/themer.rs
new file mode 100644
index 000000000..db915d9d7
--- /dev/null
+++ b/examples/themer.rs
@@ -0,0 +1,54 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use freya::prelude::*;
+
+fn main() {
+    launch_with_props(app, "Themer", (400.0, 350.0));
+}
+
+fn app() -> Element {
+    use_init_default_theme();
+    let mut theme = use_theme();
+    let mut r = use_signal::<f64>(|| 103. / 255. * 100.);
+    let mut g = use_signal::<f64>(|| 80. / 255. * 100.);
+    let mut b = use_signal::<f64>(|| 164. / 255. * 100.);
+
+    use_effect(move || {
+        let r = (255. / 100. * *r.read()).round() as u8;
+        let g = (255. / 100. * *g.read()).round() as u8;
+        let b = (255. / 100. * *b.read()).round() as u8;
+        theme.write().colors.primary = format!("rgb({r}, {g}, {b})").into();
+    });
+
+    rsx!(
+        rect {
+            height: "fill",
+            width: "fill",
+            main_align: "center",
+            cross_align: "center",
+            padding: "10",
+            Switch {
+                enabled: true,
+                ontoggled: |_| {}
+            }
+            Slider {
+                size: "fill",
+                value: r(),
+                onmoved: move |e| r.set(e),
+            }
+            Slider {
+                size: "fill",
+                value: g(),
+                onmoved: move |e| g.set(e),
+            }
+            Slider {
+                size: "fill",
+                value: b(),
+                onmoved: move |e| b.set(e),
+            }
+        }
+    )
+}