dara-core 1.21.1__py3-none-any.whl → 1.21.2__py3-none-any.whl

dara/core/configuration.py

@@ -55,6 +55,7 @@ from dara.core.definitions import (
 )
 from dara.core.interactivity.actions import ActionImpl, ResetVariables
 from dara.core.interactivity.any_variable import AnyVariable
+from dara.core.interactivity.client_variable import ClientVariable
 from dara.core.internal.encoder_registry import Encoder
 from dara.core.internal.import_discovery import (
     create_action_definition,
@@ -525,14 +526,14 @@ class ConfigurationBuilder:
 
     def set_theme(
         self,
-        main_theme: Optional[Union[ThemeDef, Literal['light'], Literal['dark']]] = None,
+        main_theme: Optional[Union[ThemeDef, ClientVariable, Literal['light'], Literal['dark']]] = None,
         base_theme: Optional[Union[Literal['light'], Literal['dark']]] = None,
     ):
         """
         Sets the color theme of the app. Takes ThemeDef models for the app, and reverts
         to the default themes if they are not supplied.
 
-        :param main_theme: ThemeDef defining colors for the app, alternatively can be either 'light' or 'dark' to use default Dara colors
+        :param main_theme: ThemeDef defining colors for the app, a string 'light' or 'dark' to use default Dara colors, or a Variable containing one of the before
         """
         if isinstance(main_theme, str):
             if main_theme in ('dark', 'light'):

dara/core/defaults.py

@@ -53,6 +53,8 @@ from dara.core.visual.components import (
     RowFallbackDef,
     SideBarFrame,
     SideBarFrameDef,
+    ThemeProvider,
+    ThemeProviderDef,
     TopBarFrame,
     TopBarFrameDef,
 )
@@ -89,6 +91,7 @@ CORE_COMPONENTS: Dict[str, ComponentTypeAnnotation] = {
     Link.__name__: LinkDef,
     Outlet.__name__: OutletDef,
     PoweredByCausalens.__name__: PoweredByCausalensDef,
+    ThemeProvider.__name__: ThemeProviderDef,
 }
 
 # These actions are provided by the core JS of this module

dara/core/main.py

@@ -402,7 +402,6 @@ def _start_application(config: Configuration):
             'application_name': get_settings().project_name,
             'enable_devtools': config.enable_devtools,
             'live_reload': config.live_reload,
-            # TODO: this will become some backendstore-variable instead, prepopulated in here
             'theme': config.theme,
             'title': config.title,
             'context_components': config.context_components,

dara/core/umd/dara.core.umd.cjs

@@ -5467,6 +5467,75 @@
   var Recoil_index_28 = Recoil_index.useRecoilValueLoadable_TRANSITION_SUPPORT_UNSTABLE;
   var Recoil_index_31 = Recoil_index.useRecoilCallback;
   var Recoil_index_34 = Recoil_index.useRecoilSnapshot;
+  var Key;
+  (function(Key2) {
+    Key2["BACKSPACE"] = "Backspace";
+    Key2["CTRL"] = "Control";
+    Key2["DOWN"] = "ArrowDown";
+    Key2["ENTER"] = "Enter";
+    Key2["ESCAPE"] = "Escape";
+    Key2["LEFT"] = "ArrowLeft";
+    Key2["META"] = "Meta";
+    Key2["MINUS"] = "-";
+    Key2["PERIOD"] = ".";
+    Key2["RIGHT"] = "ArrowRight";
+    Key2["SHIFT"] = "Shift";
+    Key2["TAB"] = "Tab";
+    Key2["UP"] = "ArrowUp";
+  })(Key || (Key = {}));
+  const CONTROL_KEYS = [
+    Key.ESCAPE,
+    Key.TAB,
+    Key.ENTER,
+    Key.BACKSPACE,
+    Key.CTRL,
+    Key.SHIFT,
+    Key.UP,
+    Key.DOWN,
+    Key.LEFT,
+    Key.RIGHT,
+    Key.META
+  ];
+  var jsxRuntime = { exports: {} };
+  var reactJsxRuntime_production_min = {};
+  /**
+   * @license React
+   * react-jsx-runtime.production.min.js
+   *
+   * Copyright (c) Facebook, Inc. and its affiliates.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+  var hasRequiredReactJsxRuntime_production_min;
+  function requireReactJsxRuntime_production_min() {
+    if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
+    hasRequiredReactJsxRuntime_production_min = 1;
+    var f = React$1, k = Symbol.for("react.element"), l2 = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n2 = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p2 = { key: true, ref: true, __self: true, __source: true };
+    function q(c, a2, g) {
+      var b2, d2 = {}, e2 = null, h = null;
+      void 0 !== g && (e2 = "" + g);
+      void 0 !== a2.key && (e2 = "" + a2.key);
+      void 0 !== a2.ref && (h = a2.ref);
+      for (b2 in a2) m.call(a2, b2) && !p2.hasOwnProperty(b2) && (d2[b2] = a2[b2]);
+      if (c && c.defaultProps) for (b2 in a2 = c.defaultProps, a2) void 0 === d2[b2] && (d2[b2] = a2[b2]);
+      return { $$typeof: k, type: c, key: e2, ref: h, props: d2, _owner: n2.current };
+    }
+    reactJsxRuntime_production_min.Fragment = l2;
+    reactJsxRuntime_production_min.jsx = q;
+    reactJsxRuntime_production_min.jsxs = q;
+    return reactJsxRuntime_production_min;
+  }
+  var hasRequiredJsxRuntime;
+  function requireJsxRuntime() {
+    if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+    hasRequiredJsxRuntime = 1;
+    {
+      jsxRuntime.exports = requireReactJsxRuntime_production_min();
+    }
+    return jsxRuntime.exports;
+  }
+  var jsxRuntimeExports = requireJsxRuntime();
   const theme = {
     colors: {
       primary: "#3796F6",
@@ -5566,75 +5635,6 @@
   function useClTheme() {
     return styled.useTheme();
   }
-  var Key;
-  (function(Key2) {
-    Key2["BACKSPACE"] = "Backspace";
-    Key2["CTRL"] = "Control";
-    Key2["DOWN"] = "ArrowDown";
-    Key2["ENTER"] = "Enter";
-    Key2["ESCAPE"] = "Escape";
-    Key2["LEFT"] = "ArrowLeft";
-    Key2["META"] = "Meta";
-    Key2["MINUS"] = "-";
-    Key2["PERIOD"] = ".";
-    Key2["RIGHT"] = "ArrowRight";
-    Key2["SHIFT"] = "Shift";
-    Key2["TAB"] = "Tab";
-    Key2["UP"] = "ArrowUp";
-  })(Key || (Key = {}));
-  const CONTROL_KEYS = [
-    Key.ESCAPE,
-    Key.TAB,
-    Key.ENTER,
-    Key.BACKSPACE,
-    Key.CTRL,
-    Key.SHIFT,
-    Key.UP,
-    Key.DOWN,
-    Key.LEFT,
-    Key.RIGHT,
-    Key.META
-  ];
-  var jsxRuntime = { exports: {} };
-  var reactJsxRuntime_production_min = {};
-  /**
-   * @license React
-   * react-jsx-runtime.production.min.js
-   *
-   * Copyright (c) Facebook, Inc. and its affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-  var hasRequiredReactJsxRuntime_production_min;
-  function requireReactJsxRuntime_production_min() {
-    if (hasRequiredReactJsxRuntime_production_min) return reactJsxRuntime_production_min;
-    hasRequiredReactJsxRuntime_production_min = 1;
-    var f = React$1, k = Symbol.for("react.element"), l2 = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n2 = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p2 = { key: true, ref: true, __self: true, __source: true };
-    function q(c, a2, g) {
-      var b2, d2 = {}, e2 = null, h = null;
-      void 0 !== g && (e2 = "" + g);
-      void 0 !== a2.key && (e2 = "" + a2.key);
-      void 0 !== a2.ref && (h = a2.ref);
-      for (b2 in a2) m.call(a2, b2) && !p2.hasOwnProperty(b2) && (d2[b2] = a2[b2]);
-      if (c && c.defaultProps) for (b2 in a2 = c.defaultProps, a2) void 0 === d2[b2] && (d2[b2] = a2[b2]);
-      return { $$typeof: k, type: c, key: e2, ref: h, props: d2, _owner: n2.current };
-    }
-    reactJsxRuntime_production_min.Fragment = l2;
-    reactJsxRuntime_production_min.jsx = q;
-    reactJsxRuntime_production_min.jsxs = q;
-    return reactJsxRuntime_production_min;
-  }
-  var hasRequiredJsxRuntime;
-  function requireJsxRuntime() {
-    if (hasRequiredJsxRuntime) return jsxRuntime.exports;
-    hasRequiredJsxRuntime = 1;
-    {
-      jsxRuntime.exports = requireReactJsxRuntime_production_min();
-    }
-    return jsxRuntime.exports;
-  }
-  var jsxRuntimeExports = requireJsxRuntime();
   var Collapse = {};
   var hasRequiredCollapse;
   function requireCollapse() {
@@ -73991,6 +73991,20 @@ Inferred class string: "${iconClasses}."`
     }
     return PRELOADED_COMPONENTS[identifier];
   }
+  const GlobalStyle = styled.createGlobalStyle`
+/* stylelint-disable selector-id-pattern */
+html,
+body,
+#dara_root {
+    font-size: ${(props) => props.theme.font.size};
+}
+`;
+  function StyleRoot(props) {
+    const config2 = useConfig();
+    const [mainTheme] = useVariable(config2.theme.main);
+    const theme2 = React$1.useMemo(() => resolveTheme(mainTheme, config2.theme.base), [config2.theme.base, mainTheme]);
+    return /* @__PURE__ */ React.createElement(styled.ThemeProvider, { theme: theme2 }, /* @__PURE__ */ React.createElement(GlobalStyle, null), props.children);
+  }
   function UnauthenticatedRoot() {
     const syncOptions = useUrlSync();
     const navigation = useNavigation();
@@ -74012,7 +74026,7 @@ Inferred class string: "${iconClasses}."`
         }
       }
     }, [navigation.state]);
-    return /* @__PURE__ */ React.createElement(PathParamSync, null, /* @__PURE__ */ React.createElement(RecoilSync_index_3, { ...syncOptions }, /* @__PURE__ */ React.createElement(Outlet, null)));
+    return /* @__PURE__ */ React.createElement(PathParamSync, null, /* @__PURE__ */ React.createElement(RecoilSync_index_3, { ...syncOptions }, /* @__PURE__ */ React.createElement(StyleRoot, null, /* @__PURE__ */ React.createElement(Outlet, null))));
   }
   class SingleUseCache {
     constructor(options = {}) {
@@ -74534,7 +74548,7 @@ Inferred class string: "${iconClasses}."`
     );
   }
   function Root(props) {
-    return /* @__PURE__ */ React.createElement(ConfigContextProvider, { initialConfig: props.daraData }, /* @__PURE__ */ React.createElement(reactQuery.QueryClientProvider, { client: props.queryClient }, /* @__PURE__ */ React.createElement(styled.ThemeProvider, { theme: props.theme }, /* @__PURE__ */ React.createElement(ErrorBoundary$1, null, /* @__PURE__ */ React.createElement(importersCtx.Provider, { value: props.importers }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "row" } }, /* @__PURE__ */ React.createElement(Recoil_index_5, null, /* @__PURE__ */ React.createElement(GlobalTaskProvider, null, /* @__PURE__ */ React.createElement(RouterRoot, { daraData: props.daraData })))))))));
+    return /* @__PURE__ */ React.createElement(ConfigContextProvider, { initialConfig: props.daraData }, /* @__PURE__ */ React.createElement(reactQuery.QueryClientProvider, { client: props.queryClient }, /* @__PURE__ */ React.createElement(ErrorBoundary$1, null, /* @__PURE__ */ React.createElement(importersCtx.Provider, { value: props.importers }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "row" } }, /* @__PURE__ */ React.createElement(Recoil_index_5, null, /* @__PURE__ */ React.createElement(GlobalTaskProvider, null, /* @__PURE__ */ React.createElement(RouterRoot, { daraData: props.daraData }))))))));
   }
   async function run(importers) {
     const queryClient = new reactQuery.QueryClient();
@@ -74549,10 +74563,9 @@ Inferred class string: "${iconClasses}."`
       preloadComponents(importers, Object.values(daraData.components)),
       preloadActions(importers, Object.values(daraData.actions))
     ]);
-    const theme2 = resolveTheme(daraData.theme?.main, daraData.theme?.base);
     const container = document.getElementById("dara_root");
     const root = clientExports.createRoot(container);
-    root.render(/* @__PURE__ */ React.createElement(Root, { daraData, queryClient, importers, theme: theme2 }));
+    root.render(/* @__PURE__ */ React.createElement(Root, { daraData, queryClient, importers }));
   }
   function isValidHttpUrl(url) {
     if (url.startsWith("/")) {
@@ -98283,7 +98296,7 @@ Inferred class string: "${iconClasses}."`
     const logoSrc = theme2.themeType === "dark" ? DaraDark : DaraLight;
     const daraLogo = /* @__PURE__ */ React.createElement("img", { alt: "Dara Logo", src: logoSrc });
     const showPoweredBy = props.powered_by_causalens ?? config2.powered_by_causalens;
-    return /* @__PURE__ */ React.createElement(Wrapper, { backgroundColor: theme2.colors.background }, props.side_bar_position === "right" && /* @__PURE__ */ React.createElement(Wrapper, null, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })), /* @__PURE__ */ React.createElement(styled.ThemeContext.Provider, { value: resolveTheme(config2.theme?.main, config2.theme?.base) }, /* @__PURE__ */ React.createElement(SideBar, { style: { padding: props.side_bar_padding }, width: props.side_bar_width }, !props.hide_logo && props.logo_position !== "bottom" && logo, /* @__PURE__ */ React.createElement(Wrapper, { direction: "column" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "column" } }, props.side_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.side_bar }))), !props.hide_logo && props.logo_position === "bottom" && logo, /* @__PURE__ */ React.createElement(LogoutButton$1, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow$1, { style: { marginRight: "0.5rem" } }), "Logout"), /* @__PURE__ */ React.createElement(BuiltWithLink, { href: "https://github.com/causalens/dara", target: "_blank", rel: "noopener noreferrer" }, "Built with ", daraLogo), showPoweredBy && /* @__PURE__ */ React.createElement(PoweredByCausalens, null))), props.side_bar_position !== "right" && /* @__PURE__ */ React.createElement(Wrapper, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
+    return /* @__PURE__ */ React.createElement(Wrapper, { backgroundColor: theme2.colors.background }, props.side_bar_position === "right" && /* @__PURE__ */ React.createElement(Wrapper, null, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })), /* @__PURE__ */ React.createElement(SideBar, { style: { padding: props.side_bar_padding }, width: props.side_bar_width }, !props.hide_logo && props.logo_position !== "bottom" && logo, /* @__PURE__ */ React.createElement(Wrapper, { direction: "column" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "column" } }, props.side_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.side_bar }))), !props.hide_logo && props.logo_position === "bottom" && logo, /* @__PURE__ */ React.createElement(LogoutButton$1, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow$1, { style: { marginRight: "0.5rem" } }), "Logout"), /* @__PURE__ */ React.createElement(BuiltWithLink, { href: "https://github.com/causalens/dara", target: "_blank", rel: "noopener noreferrer" }, "Built with ", daraLogo), showPoweredBy && /* @__PURE__ */ React.createElement(PoweredByCausalens, null)), props.side_bar_position !== "right" && /* @__PURE__ */ React.createElement(Wrapper, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
   }
   const shouldForwardProp = (prop) => !["width"].includes(prop);
   const TopBar = styled.div.withConfig({ shouldForwardProp })`
@@ -98362,11 +98375,10 @@ Inferred class string: "${iconClasses}."`
   const LogoutArrow = getIcon("fa-solid fa-arrow-right-from-bracket");
   function TopBarFrame(props) {
     const theme2 = useClTheme();
-    const config2 = useConfig();
     const logo = props.logo_path && /* @__PURE__ */ React.createElement(LogoImage, { alt: "Logo", src: prependBaseUrl(props.logo_path), width: props.logo_width });
     const logoSrc = theme2.themeType === "dark" ? DaraDark : DaraLight;
     const daraLogo = /* @__PURE__ */ React.createElement("img", { alt: "Dara", src: logoSrc });
-    return /* @__PURE__ */ React.createElement(Wrapper, { backgroundColor: theme2.colors.background, direction: "column" }, /* @__PURE__ */ React.createElement(styled.ThemeContext.Provider, { value: resolveTheme(config2?.theme?.main, config2?.theme?.base) }, /* @__PURE__ */ React.createElement(TopBar, { height: props.top_bar_height, style: { padding: props.top_bar_padding } }, /* @__PURE__ */ React.createElement(TopBarContent, null, !props.hide_logo && logo, props.top_bar && /* @__PURE__ */ React.createElement(RouteButtons, { direction: "row" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "row" } }, props.top_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.top_bar }))), /* @__PURE__ */ React.createElement(LogoutButton, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow, { style: { marginRight: "0.5rem" } }), "Logout")), /* @__PURE__ */ React.createElement(BuiltWithSpan, null, "Built with ", daraLogo))), /* @__PURE__ */ React.createElement(Wrapper, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
+    return /* @__PURE__ */ React.createElement(Wrapper, { backgroundColor: theme2.colors.background, direction: "column" }, /* @__PURE__ */ React.createElement(TopBar, { height: props.top_bar_height, style: { padding: props.top_bar_padding } }, /* @__PURE__ */ React.createElement(TopBarContent, null, !props.hide_logo && logo, props.top_bar && /* @__PURE__ */ React.createElement(RouteButtons, { direction: "row" }, /* @__PURE__ */ React.createElement(directionCtx.Provider, { value: { direction: "row" } }, props.top_bar && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.top_bar }))), /* @__PURE__ */ React.createElement(LogoutButton, { href: "/logout", styling: "error" }, /* @__PURE__ */ React.createElement(LogoutArrow, { style: { marginRight: "0.5rem" } }), "Logout")), /* @__PURE__ */ React.createElement(BuiltWithSpan, null, "Built with ", daraLogo)), /* @__PURE__ */ React.createElement(Wrapper, { style: { padding: "2rem 3rem" } }, props.content && /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: props.content })));
   }
   const RowDots = styled(Dots)`
     height: 2.5rem;
@@ -98452,6 +98464,16 @@ Inferred class string: "${iconClasses}."`
     const { suspend } = useFallbackCtx();
     return /* @__PURE__ */ React__namespace.createElement(fallbackCtx.Provider, { value: { suspend: false } }, /* @__PURE__ */ React__namespace.createElement(ForImpl, { ...props, suspend }));
   }
+  const StyledDiv = injectCss(styled.div`
+    /* empty */
+`);
+  function ThemeProvider(props) {
+    const [style, css2] = useComponentStyles(props);
+    const [mainTheme] = useVariable(props.theme);
+    const [baseTheme] = useVariable(props.base_theme);
+    const theme2 = React$1.useMemo(() => resolveTheme(mainTheme, baseTheme), [baseTheme, mainTheme]);
+    return /* @__PURE__ */ React.createElement(styled.ThemeProvider, { theme: theme2 }, /* @__PURE__ */ React.createElement(StyledDiv, { style: { fontSize: theme2.font.size, ...style }, $rawCss: css2 }, props.children.map((c) => /* @__PURE__ */ React.createElement(DynamicComponent$1, { component: c, key: c.uid }))));
+  }
   exports.ActionImpl = ActionImpl;
   exports.AuthType = AuthType;
   exports.AuthenticatedRoot = TemplateRoot;
@@ -98495,6 +98517,7 @@ Inferred class string: "${iconClasses}."`
   exports.RowFallback = RowFallback;
   exports.ServerVariableSyncProvider = ServerVariableSyncProvider;
   exports.SideBarFrame = SideBarFrame;
+  exports.ThemeProvider = ThemeProvider;
   exports.TopBarFrame = TopBarFrame;
   exports.TriggerVariable = TriggerVariable;
   exports.UpdateVariable = UpdateVariable;

dara/core/umd/style.css

@@ -743,6 +743,11 @@
 .react-datepicker__portal .react-datepicker-time__header {
   font-size: 1.44rem;
 }
+/*
+ * This file only contains styles independent of the theme,
+ * mostly a css reset. Theme-specific styles are created using createGlobalStyle.
+ */
+
 @font-face {
     font-family: 'Manrope';
     font-weight: 300 900;
@@ -759,7 +764,6 @@ body,
     width: 100%;
 
     font-family: 'Manrope';
-    font-size: 16px;
 }
 
 /* The following is a css-reset from: https://piccalil.li/blog/a-modern-css-reset */
@@ -839,13 +843,12 @@ select {
     }
 }
 
+/* NOTE: the nprogress color is hard-coded intentionally as we want a blue progress bar regardless of the theme */
 #nprogress {
     pointer-events: none;
 }
 
 #nprogress .bar {
-    background: #3796f6;
-
     position: fixed;
     z-index: 1031;
     top: 0;
@@ -853,27 +856,29 @@ select {
 
     width: 100%;
     height: 2px;
+
+    background: #3796f6;
 }
 
 #nprogress .peg {
-    display: block;
     position: absolute;
-    right: 0px;
+    right: 0;
+    transform: rotate(3deg) translate(0, -4px);
+
+    display: block;
+
     width: 100px;
     height: 100%;
+
+    opacity: 1;
     box-shadow:
         0 0 10px #3796f6,
         0 0 5px #3796f6;
-    opacity: 1;
-
-    -webkit-transform: rotate(3deg) translate(0px, -4px);
-    -ms-transform: rotate(3deg) translate(0px, -4px);
-    transform: rotate(3deg) translate(0px, -4px);
 }
 
 .nprogress-custom-parent {
-    overflow: hidden;
     position: relative;
+    overflow: hidden;
 }
 
 .nprogress-custom-parent #nprogress .spinner,

dara/core/visual/components/__init__.py

@@ -43,6 +43,7 @@ from .progress_tracker import (
 from .raw_string import RawString
 from .router_content import RouterContent, RouterContentDef
 from .sidebar_frame import SideBarFrame, SideBarFrameDef
+from .theme_provider import ThemeProvider, ThemeProviderDef
 from .topbar_frame import TopBarFrame, TopBarFrameDef
 
 __all__ = [
@@ -67,6 +68,8 @@ __all__ = [
     'Fallback',
     'PoweredByCausalens',
     'PoweredByCausalensDef',
+    'ThemeProvider',
+    'ThemeProviderDef',
 ]
 
 for symbol in list(globals().values()) + [Fallback.Default, Fallback.Row]:

dara/core/visual/components/theme_provider.py

@@ -0,0 +1,44 @@
+from typing import Literal, Union
+
+from dara.core.definitions import ComponentInstance, JsComponentDef, StyledComponentInstance
+from dara.core.interactivity.client_variable import ClientVariable
+from dara.core.visual.themes.definitions import ThemeDef
+
+ThemeProviderDef = JsComponentDef(name='ThemeProvider', js_module='@darajs/core', py_module='dara.core')
+
+
+class ThemeProvider(StyledComponentInstance):
+    """
+    ThemeProvider can be used to provide a different theme to a subtree of components.
+
+    ```python
+    from dara.core import ConfigurationBuilder
+    from dara.core.visual.components import ThemeProvider
+    from dara.core.visual.themes import Light
+
+    config = ConfigurationBuilder()
+
+    # Define a theme by cloning Light and modifying it
+    theme = Light.model_copy()
+    theme.colors.text = 'red'
+
+    def ThemePage():
+        return Stack(
+            Text('This text is default color'),
+            ThemeProvider(
+                Text('This text is red'),
+                theme=theme
+            )
+        )
+
+    config.router.add_page(path='theme', content=ThemePage)
+    """
+
+    theme: Union[ThemeDef, ClientVariable, Literal['light', 'dark']]
+    base: Union[ClientVariable, Literal['light', 'dark']] = 'light'
+
+    def __init__(self, *children: ComponentInstance, **kwargs):
+        components = list(children)
+        if 'children' not in kwargs:
+            kwargs['children'] = components
+        super().__init__(**kwargs)

dara/core/visual/themes/definitions.py

@@ -18,6 +18,7 @@ limitations under the License.
 from typing import Literal, Optional, Union
 
 from dara.core.base_definitions import DaraBaseModel as BaseModel
+from dara.core.interactivity.client_variable import ClientVariable
 
 
 class ThemeColors(BaseModel):
@@ -96,5 +97,5 @@ class BaseTheme(BaseModel):
     Defines the base theming scheme of an app
     """
 
-    main: Union[ThemeDef, Literal['light'], Literal['dark']]
+    main: Union[ThemeDef, ClientVariable, Literal['light'], Literal['dark']]
     base: Optional[Union[Literal['light'], Literal['dark']]] = None

{dara_core-1.21.1.dist-info → dara_core-1.21.2.dist-info}/METADATA

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: dara-core
-Version: 1.21.1
+Version: 1.21.2
 Summary: Dara Framework Core
 Home-page: https://dara.causalens.com/
 License: Apache-2.0
@@ -21,10 +21,10 @@ Requires-Dist: cachetools (>=5.0.0,<6.0.0)
 Requires-Dist: certifi (>=2024.7.4)
 Requires-Dist: click (==8.1.3)
 Requires-Dist: colorama (>=0.4.6,<0.5.0)
-Requires-Dist: create-dara-app (==1.21.1)
+Requires-Dist: create-dara-app (==1.21.2)
 Requires-Dist: croniter (>=1.0.15,<3.0.0)
 Requires-Dist: cryptography (>=42.0.4)
-Requires-Dist: dara-components (==1.21.1) ; extra == "all"
+Requires-Dist: dara-components (==1.21.2) ; extra == "all"
 Requires-Dist: exceptiongroup (>=1.1.3,<2.0.0)
 Requires-Dist: fastapi (>=0.115.0,<0.116.0)
 Requires-Dist: fastapi_vite_dara (==0.4.0)
@@ -55,7 +55,7 @@ Description-Content-Type: text/markdown
 
 # Dara Application Framework
 
-<img src="https://github.com/causalens/dara/blob/v1.21.1/img/dara_light.svg?raw=true">
+<img src="https://github.com/causalens/dara/blob/v1.21.2/img/dara_light.svg?raw=true">
 
 ![Master tests](https://github.com/causalens/dara/actions/workflows/tests.yml/badge.svg?branch=master)
 [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://www.apache.org/licenses/LICENSE-2.0)
@@ -100,7 +100,7 @@ source .venv/bin/activate
 dara start
 ```
 
-![Dara App](https://github.com/causalens/dara/blob/v1.21.1/img/components_gallery.png?raw=true)
+![Dara App](https://github.com/causalens/dara/blob/v1.21.2/img/components_gallery.png?raw=true)
 
 Note: `pip` installation uses [PEP 660](https://peps.python.org/pep-0660/) `pyproject.toml`-based editable installs which require `pip >= 21.3` and `setuptools >= 64.0.0`. You can upgrade both with:
 
@@ -117,9 +117,9 @@ Explore some of our favorite apps - a great way of getting started and getting t
 
 | Dara App                                                                                                 | Description                                                                                                                                                                                                       |
 | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Large Language Model](https://github.com/causalens/dara/blob/v1.21.1/img/llm.png?raw=true)              | Demonstrates how to use incorporate a LLM chat box into your decision app to understand model insights                                                                                                            |
-| ![Plot Interactivity](https://github.com/causalens/dara/blob/v1.21.1/img/plot_interactivity.png?raw=true) | Demonstrates how to enable the user to interact with plots, trigger actions based on clicks, mouse movements and other interactions with `Bokeh` or `Plotly` plots                                                |
-| ![Graph Editor](https://github.com/causalens/dara/blob/v1.21.1/img/graph_viewer.png?raw=true)             | Demonstrates how to use the `CausalGraphViewer` component to display your graphs or networks, customising the displayed information through colors and tooltips, and updating the page based on user interaction. |
+| ![Large Language Model](https://github.com/causalens/dara/blob/v1.21.2/img/llm.png?raw=true)              | Demonstrates how to use incorporate a LLM chat box into your decision app to understand model insights                                                                                                            |
+| ![Plot Interactivity](https://github.com/causalens/dara/blob/v1.21.2/img/plot_interactivity.png?raw=true) | Demonstrates how to enable the user to interact with plots, trigger actions based on clicks, mouse movements and other interactions with `Bokeh` or `Plotly` plots                                                |
+| ![Graph Editor](https://github.com/causalens/dara/blob/v1.21.2/img/graph_viewer.png?raw=true)             | Demonstrates how to use the `CausalGraphViewer` component to display your graphs or networks, customising the displayed information through colors and tooltips, and updating the page based on user interaction. |
 
 Check out our [App Gallery](https://dara.causalens.com/gallery) for more inspiration!
 
@@ -146,9 +146,9 @@ And the supporting UI packages and tools.
 - `ui-utils` - miscellaneous utility functions
 - `ui-widgets` - widget components
 
-More information on the repository structure can be found in the [CONTRIBUTING.md](https://github.com/causalens/dara/blob/v1.21.1/CONTRIBUTING.md) file.
+More information on the repository structure can be found in the [CONTRIBUTING.md](https://github.com/causalens/dara/blob/v1.21.2/CONTRIBUTING.md) file.
 
 ## License
 
-Dara is open-source and licensed under the [Apache 2.0 License](https://github.com/causalens/dara/blob/v1.21.1/LICENSE).
+Dara is open-source and licensed under the [Apache 2.0 License](https://github.com/causalens/dara/blob/v1.21.2/LICENSE).
 

{dara_core-1.21.1.dist-info → dara_core-1.21.2.dist-info}/RECORD

@@ -8,10 +8,10 @@ dara/core/auth/routes.py,sha256=0o5KXApRbkL0F5qFsarQk_cq5lbQ3QfIHR_mwLRgBEY,7217
 dara/core/auth/utils.py,sha256=iEWP5qwfH17Mi-5t3sP-DNMUrWN0oSRk96NhieY2Zw4,7334
 dara/core/base_definitions.py,sha256=ptc6OSx-qElWWSuZB4-06kWmnj6hekpKR47eeB36igQ,16915
 dara/core/cli.py,sha256=V__LAK3ozWGsVTEQHqvJwqSfpC3o6R76YGABJ-YVoSE,8185
-dara/core/configuration.py,sha256=8gp2rsQBAigv6GD69Op0_xyW7d5WZEI3CcUYXgp7LTY,23381
+dara/core/configuration.py,sha256=caPebHNUmYqh9czEBwQiIDjGrH8ltsphayZICj1CRhc,23489
 dara/core/css.py,sha256=UkNZ6n7RDBLsHmpZvn_a3K2nAwxVggQJbQMKNbgXONA,1753
 dara/core/data_utils.py,sha256=RD5_GdyGyGr1LVThCo8mpuOMWrd9_c1iyRqjuyoarXM,12578
-dara/core/defaults.py,sha256=yZbioRVDMZU8nw99jryKaazAi46Z2GAZw_gl9CNTOQQ,4594
+dara/core/defaults.py,sha256=J1-IX4nKcE6kXzqx7kq1ereU4MKXiMitZxSZo2rs7-U,4681
 dara/core/definitions.py,sha256=I4TUJ6zu968T4PNmeqbC-u-DfiKay-4XxurLNASkDz0,18358
 dara/core/http.py,sha256=-OzbCHlYSnfVnw2492C_UmaWOI5oSONfWk03eEGxSRI,4761
 dara/core/interactivity/__init__.py,sha256=ZppwTvxaCsaAdf0qX6j1qTcmbj6wxVcbiaMZfwTVKtU,2679
@@ -82,7 +82,7 @@ dara/core/js_tooling/templates/dara.config.json,sha256=RZG_R_xJv_5rYIoz2QZulcG49
 dara/core/js_tooling/templates/vite.config.template.ts,sha256=W-R9LtXPMv7vQkqMawMmeFrjaQ22xrGU0iYyS_nHkh4,1199
 dara/core/log_configs/logging.yaml,sha256=YJyD18psAmSVz6587dcEOyoulLuRFFu1g8yMXl1ylM0,706
 dara/core/logging.py,sha256=8kJPQfRpivxzJXpmsK6-sYnWjR_VBDHzIelD1rstIeM,13260
-dara/core/main.py,sha256=h37Ao7opyQm7QIqxKr0YMNkcAGwYE_k9nxM6J04OTJg,20847
+dara/core/main.py,sha256=DtJgblyovl5X_ZEeeQ5Pru1j29GCcnoi9VeO6OZ0qUc,20753
 dara/core/metrics/__init__.py,sha256=2UqpWHv-Ie58QLJIHJ9Szfjq8xifAuwy5FYGUIFwWtI,823
 dara/core/metrics/cache.py,sha256=c1PSst_oZZvuVzBXYWdpf8Sbb97u6q0HS2dlsEVLpQU,2632
 dara/core/metrics/runtime.py,sha256=YP-6Dz0GeI9_Yr7bUk_-OqShyFySGH_AKpDO126l6es,1833
@@ -93,10 +93,10 @@ dara/core/router/compat.py,sha256=WAVzDcJFJOVoIQ5inplIhXD58TWsWwTTebTCqpG4nGs,31
 dara/core/router/components.py,sha256=MDaiQ8Y0-94EH0Jm4j7p9S141k8G4osSbOKSTSu3aOM,4433
 dara/core/router/dependency_graph.py,sha256=AyjSk3DuvCgACrgpID4oSpms1X6GQJUbt-scY5X_LN4,2305
 dara/core/router/router.py,sha256=1r3rFGiftOXC6GP66hKqTdcVNDRJsZWBWvL74wNG4dA,29719
-dara/core/umd/dara.core.umd.cjs,sha256=nfYm5XYPXkhx_-RUlfwa2vSadNT3sVYIcYYlHHlT5-Q,5142814
-dara/core/umd/style.css,sha256=aywwY47sVAdfUt4q8c3xCi81TuHXoIJdwrWtppRGJrk,4095751
+dara/core/umd/dara.core.umd.cjs,sha256=xWbTSf5MuczWptv2bOgW9Sslvai_3SXNIQq4DR_iCBw,5143689
+dara/core/umd/style.css,sha256=yT3PKpi2sKI2-kQIF8xtVbTPQqgpK7-Ua7tfzDPuSsI,4095881
 dara/core/visual/__init__.py,sha256=QN0wbG9HPQ_vXh8BO8DnBXeYLIENVTNtRmYzZf1lx7c,577
-dara/core/visual/components/__init__.py,sha256=igEOGkaX56VM6IOPLBeG6ru6zMuzHtGIP1zNDB2R8XI,2342
+dara/core/visual/components/__init__.py,sha256=nmCsnMLXeZAjkhMYz-mIFodpVY-69IO1fvwwXbFlMQ4,2447
 dara/core/visual/components/dynamic_component.py,sha256=w7rxrM9ZTNvkHymkAto_s9UKg7EE8VrlpL9QdRe4sgY,692
 dara/core/visual/components/fallback.py,sha256=cnuPcblmQ1gyzZHrwHtrD5C5Bo7-JXeiMO0KZ1ACbPM,4764
 dara/core/visual/components/for_cmp.py,sha256=HykNfue2YzjZjWiWaJakLZmbdd_M7IfUi9kNhG2mLOE,6347
@@ -108,6 +108,7 @@ dara/core/visual/components/progress_tracker.py,sha256=5p_nEJf7RK2oPimXL4YhAN7v0
 dara/core/visual/components/raw_string.py,sha256=jtG9hDZz3s-sCg__Eg4__XkD80OhnNaWiRo-W88LK4M,921
 dara/core/visual/components/router_content.py,sha256=ZFJBuT-Vpn4yvbzgt5IGQbBqiWFhYfHa6mgB2O8Xt8I,978
 dara/core/visual/components/sidebar_frame.py,sha256=vUd8BM-VD3HvI4I1RssS1A2r5-4gtAl-UrMxLdz0sDI,1291
+dara/core/visual/components/theme_provider.py,sha256=cerZVnvQmGHqe_0uIiWXB8U4ArCUQLqWInSOroHim9g,1458
 dara/core/visual/components/topbar_frame.py,sha256=7L4Bi7Ba_gdfS6yoduXQ3k0-XQaNuahmkumyfzlpzzY,1255
 dara/core/visual/components/types.py,sha256=uH2IGufr4-I8cNbZgnEd3YbqoPFgyqG91rfNXZVG7a0,686
 dara/core/visual/css/Property.py,sha256=XJzlMeASyrquhXmaQZvrsgin3xlVfm94dHRY9aJkhXk,43028
@@ -117,10 +118,10 @@ dara/core/visual/progress_updater.py,sha256=IdtWihnMYk8hqsHqDd0nzuuHeQu8wjnZT42s
 dara/core/visual/template.py,sha256=y0KJU2913Q10y1TVMpTVnIxIoUsabzYfpUHEGuX2QyM,5707
 dara/core/visual/themes/__init__.py,sha256=aM4mgoIYo2neBSw5FRzswsht7PUKjLthiHLmFIkyRKw,794
 dara/core/visual/themes/dark.py,sha256=UQGDooOc8ric73eHs9E0ltYP4UCrwqQ3QxqN_fb4PwY,1942
-dara/core/visual/themes/definitions.py,sha256=nS_gQvOzCt5hTmj74d0_siq_9QWuj6wNuir4VCHy0Dk,2779
+dara/core/visual/themes/definitions.py,sha256=5g83t24w8Ar51Cl9REBJfCU7_DtlashBQeUTKDg3D1M,2862
 dara/core/visual/themes/light.py,sha256=-Tviq8oEwGbdFULoDOqPuHO0UpAZGsBy8qFi0kAGolQ,1944
-dara_core-1.21.1.dist-info/LICENSE,sha256=r9u1w2RvpLMV6YjuXHIKXRBKzia3fx_roPwboGcLqCc,10944
-dara_core-1.21.1.dist-info/METADATA,sha256=EwB6xMLHeQpO34pWrs2FkZxRCmJPX-OjCc8vmf3zSSA,7534
-dara_core-1.21.1.dist-info/WHEEL,sha256=sP946D7jFCHeNz5Iq4fL4Lu-PrWrFsgfLXbbkciIZwg,88
-dara_core-1.21.1.dist-info/entry_points.txt,sha256=H__D5sNIGuPIhVam0DChNL-To5k8Y7nY7TAFz9Mz6cc,139
-dara_core-1.21.1.dist-info/RECORD,,
+dara_core-1.21.2.dist-info/LICENSE,sha256=r9u1w2RvpLMV6YjuXHIKXRBKzia3fx_roPwboGcLqCc,10944
+dara_core-1.21.2.dist-info/METADATA,sha256=SlVuhAHMJ77CYjCiJKE8xGI0q8IppVGtyMso8jFPckY,7534
+dara_core-1.21.2.dist-info/WHEEL,sha256=sP946D7jFCHeNz5Iq4fL4Lu-PrWrFsgfLXbbkciIZwg,88
+dara_core-1.21.2.dist-info/entry_points.txt,sha256=H__D5sNIGuPIhVam0DChNL-To5k8Y7nY7TAFz9Mz6cc,139
+dara_core-1.21.2.dist-info/RECORD,,