67606561d3
* partly add some radix-ui/themes based components * add @radix-ui/themes integration to top-level app * WiP: compile _app_wrap based on which component library is used TODO: working color mode * WiP get color mode working with agnostic provider still not perfect, as the RadixColorModeProvider seems to trip hydration errors when using color_mode_cond component, but for now, this provides a nice balance between the two libraries and allows them to interoperate. * WiP template _app.js instead of making a separate wrap file * WiP: use next-themes for consistent darkmode switching * strict pin chakra deps * Move ChakraColorModeProvider to separate js file * move nasty radix themes js code into js files * remove chakra from default imports * chakra fixup import to use .js extension * Add radix theme typography and layout components * do NOT special case the radix theme... avoid templating json and applying it, avoid non-customizable logic just add the radix Theme component as an app wrap if the user specifies it to rx.App, and any other app-wrap theme-like component could _also_ be used without having to change the code. this also allows different themes for different sections of the app by simply placing elements inside a different rdxt.theme wrapper. * Theme uses "radius" not "borderRadius" * move next-themes to main packages.json this is always used, regardless of the component library * test_app: test cases for app_wrap interface * Finish wrapping Button, Switch, and TextField components * docstring, comments, static fixups * debounce: use alias or tag when passing child Element Fix REF-830 * test_app: ruin my beautiful indentation * py38 compatibility * Add event triggers for switch and TextField * Add type hints for radix theme components * radix themes fixups from writing the tests * Add integration test for radix themes components * test_app: mock out package installation we only need the compile result, we're not actually trying to install packages * avoid incompatible version of @emotion/react * test_radix_themes: include theme_panel component * next-themes default scheme: "light" until all of our components look good in dark mode, need to keep the default as light mode regardless of the system setting.
36 lines
757 B
Django/Jinja
36 lines
757 B
Django/Jinja
{% extends "web/pages/base_page.js.jinja2" %}
|
|
|
|
{% block declaration %}
|
|
import { EventLoopProvider } from "/utils/context.js";
|
|
import { ThemeProvider } from 'next-themes'
|
|
|
|
{% for custom_code in custom_codes %}
|
|
{{custom_code}}
|
|
{% endfor %}
|
|
{% endblock %}
|
|
|
|
{% block export %}
|
|
function AppWrap({children}) {
|
|
|
|
{% for hook in hooks %}
|
|
{{ hook }}
|
|
{% endfor %}
|
|
|
|
return (
|
|
{{utils.render(render, indent_width=0)}}
|
|
)
|
|
}
|
|
|
|
export default function MyApp({ Component, pageProps }) {
|
|
return (
|
|
<ThemeProvider defaultTheme="light" storageKey="chakra-ui-color-mode" attribute="class">
|
|
<AppWrap>
|
|
<EventLoopProvider>
|
|
<Component {...pageProps} />
|
|
</EventLoopProvider>
|
|
</AppWrap>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
{% endblock %} |