amis-admin-theme-editor 0.0.3

amis-admin-theme-editor - CSS Theme Editor for fastapi-amis-admin, includes definitions for cxd, antd, ang and dark theme of amis.

---

amis-admin-theme-editor - Theme-Editor for fastapi-amis-admin
Includes definition for cxd, antd, ang and dark Theme of amis.

Features

• Supported Themes/Styles: cxd, antd, ang and dark.
• Supported Vars/Elements: Includes all CSS vars defined in Theme CSS files.
• Supports to add custom css style
• Preview View: After page refresh (currently) shows you most formitem types to check the changes
• Todo: Translations to DE, CN

Install

    pip install amis-admin-theme-editor

Usage example:

from fastapi import FastAPI
from fastapi_amis_admin.admin import Settings, AdminSite
from fastapi_amis_admin.amis import Page
from starlette.requests import Request
from starlette.responses import RedirectResponse

from amis_admin_theme_editor.admin import CustomThemeAdmin
from amis_admin_theme_editor.model import CustomTheme

# If you change the amis_theme value in settings don't forget to change the baseTheme value 
# in the CustomeTheme instance too, this is used by amis to show the correct default values of the selected Theme

class MySettings(Settings):
    """
    To add cssVars and/or css style to the amis render, we need to apply them for each page.
    Which means you need to override: `async def get_page(self, request: Request) -> Page`

    Easiest way is to add your customTheme instance to the site.settings object by override the Settings class and add a
    field which holds the current theme-editor settings.
    
    This way you can refernce it in any admin or form by self.site.settings.custom_theme
    """
    custom_theme: CustomTheme = CustomTheme()


class MyAdminSite(AdminSite):
    """ Beside the forms pages you need to override, we can do this, as an example, for the adminsite itself.
    Don't forget, this will not take any effect, you need to apply the changes per page,
    just for the whole site won't work, amis acts per page.

    But you can use this as an example. So you can Create your own FormAdmin version by inherit FormAdmin,
    override the get_page there and use your new class instead of the normal FormAdmin.
    """
    async def get_page(self, request: Request) -> Page:
        page = await super().get_page(request)
        if self.app.site.settings.custom_theme:
            page.cssVars = self.app.site.settings.custom_theme.config
            page.css = self.app.site.settings.custom_theme.custom_style
        return page


settings = MySettings()
myCustomTheme = CustomTheme(baseTheme=settings.amis_theme)

# as usual create the FastAPI app and the admin site
app = FastAPI(debug=settings.debug)
site = MyAdminSite(settings=settings)

# create the CustomThemeAdmin and set/bind your custom theme instance
theme_app = site.get_admin_or_create(CustomThemeAdmin)
theme_app.bind_custom_theme(myCustomTheme)


# If you want to react on changes of the Theme-Editor you can register a callback
# the event name: `settings_changed`
@theme_app.on_event("settings_changed")
def theme_change_callback_handler(data: CustomTheme):
    print("theme_change_callback_handler", data)


@app.on_event("startup")
async def startup():
    # as usual mount your admin site with the fastapi app
    site.mount_app(app)


@app.get("/")
async def index():
    # as usual, if you mount late and don't provide the fastapi app instance while creating the site,
    # you need to Redirect the response to the admin site router
    return RedirectResponse(url=site.router_path)

Interface Preview

Theme Editor with applied changes on pages

License Agreement

• amis-admin-theme-editor is based on MIT open source and free to use, it is free for commercial use, but please show/list the copyright information about amis-admin-theme-editor somewhere.