Package: amis-admin-theme-editor
amis-admin-theme-editor - Theme-Editor forfastapi-amis-adminIncludes definition for cxd, antd, ang and dark Theme of amis.FeaturesSupported Themes/Styles: cxd, antd, ang and dark.Supported Vars/Elements: Includes all CSS vars defined in Theme CSS files.Supports to add custom css stylePreview View: After page refresh (currently) shows you most formitem types to check the changesTodo: Translations to DE, CNInstallpipinstallamis-admin-theme-editorUsage example:fromfastapiimportFastAPIfromfastapi_amis_admin.adminimportSettings,AdminSitefromfastapi_amis_admin.amisimportPagefromstarlette.requestsimportRequestfromstarlette.responsesimportRedirectResponsefromamis_admin_theme_editor.adminimportCustomThemeAdminfromamis_admin_theme_editor.modelimportCustomTheme# 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 ThemeclassMySettings(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 afield 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()classMyAdminSite(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."""asyncdefget_page(self,request:Request)->Page:page=awaitsuper().get_page(request)ifself.app.site.settings.custom_theme:page.cssVars=self.app.site.settings.custom_theme.configpage.css=self.app.site.settings.custom_theme.custom_stylereturnpagesettings=MySettings()myCustomTheme=CustomTheme(baseTheme=settings.amis_theme)# as usual create the FastAPI app and the admin siteapp=FastAPI(debug=settings.debug)site=MyAdminSite(settings=settings)# create the CustomThemeAdmin and set/bind your custom theme instancetheme_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")deftheme_change_callback_handler(data:CustomTheme):print("theme_change_callback_handler",data)@app.on_event("startup")asyncdefstartup():# as usual mount your admin site with the fastapi appsite.mount_app(app)@app.get("/")asyncdefindex():# 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 routerreturnRedirectResponse(url=site.router_path)Interface PreviewTheme Editor with applied changes on pagesLicense Agreementamis-admin-theme-editoris based onMITopen source and free to use, it is free for commercial use, but please show/list the copyright information about amis-admin-theme-editor somewhere.