Hi Frappe team and community,
I’m currently developing a custom frappe-theme
app to customize the button colors and general styles in my ERPNext/Frappe project. The theme works well on the standard Frappe frontend pages (like Desk, Login, etc.), and I can see the color changes applied correctly.
However, I’m also working with a frontend that is developed using Doppio, a different frontend UI environment. I cloned this Doppio-based UI from another Git repository. The issue is:
My custom frappe-theme does not affect any styles or buttons in the Doppio frontend.
It only works with the default Frappe UI components.
What I’ve tried:
- Created and installed the
frappe-theme
app viabench get-app
- Added the app in
sites/apps.txt
and in the mainapps.txt
- Ran
bench build
,bench restart
,bench clear-cache
- Verified that styles apply to Frappe’s default interface
- Checked if Doppio uses shadow DOM or isolated CSS
My Questions:
- Is there a way to make
frappe-theme
compatible with frontend apps built using Doppio? - Does Doppio render its UI separately from Frappe’s templating system (thus ignoring theme overrides)?
- Are there best practices or hooks to extend/override styles in custom frontend environments like Doppio?
- Do I need to inject the theme CSS manually or use a different approach when dealing with custom frontends?
Any suggestions or guidance would be really appreciated. Thanks in advance!
— Yam_FBT