-
Notifications
You must be signed in to change notification settings - Fork 248
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
✨(frontend) add custom css style #771
Conversation
0e8f1f6
to
386e1fa
Compare
a0ffd15
to
456f57b
Compare
456f57b
to
ae6a149
Compare
You should start a document explaining how to customize and in a first step you should add this runtime solution. |
ae6a149
to
28a6b8b
Compare
<AnalyticsProvider> | ||
<CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}> | ||
{children} | ||
</CrispProvider> | ||
</AnalyticsProvider> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe not in the approriate commit
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is the indentation that made it as a new piece of code.
Could we determine classNames dynamically? E.g. in an Abstract UI Component Class with the attribute: And every UI Component would inherit from this Abstract Base Class. With the ability to overwrite the className (eg. for backwards compatibility on |
We added the `FRONTEND_CSS_URL` environment variable. It will give the possibility to add a css layer at runtime.
From the config, we can add custom css style to the app.
To be easily customized, we added a classname to most of the components.
Add a documentation page about runtime theming. It explains how to use the theming system and provide a example.
Some tests were flaky, causing them to fail intermittently. This commit aims to address this issue.
28a6b8b
to
ce99f01
Compare
Seems a big refacto for something that aims to be easy. It means we will have to modify all our functional components to use Class components to get this inheritance. Class component is not really the way to do anymore, I don't think Class component supports easily We can create an issue and have a separate pull request about having more automated classname if you want. |
Runtime Theming 🎨
Introduction
We are excited to introduce a new feature that allows you to easily change the theme of our frontend application at runtime ⏱️. This feature provides a flexible way to customize the look and feel of our application without requiring any code changes.
Overwriting the Theme with Custom CSS
Our application now supports a new setting,
FRONTEND_CSS_URL
🔗, which allows you to add a custom CSS layer on top of our default theme. This setting can be used to override our default styles and apply your own custom theme.How to Use
To use this feature, simply set the
FRONTEND_CSS_URL
environment variable to the URL of your custom CSS file. For example:Once you've set this variable, our application will load your custom CSS file and apply the styles to our frontend application.
Benefits
This feature provides several benefits, including:
Example Use Case
Let's say you want to change the background color of our application to a custom color. You can create a custom CSS file with the following contents:
Then, set the
FRONTEND_CSS_URL
environment variable to the URL of your custom CSS file. Once you've done this, our application will load your custom CSS file and apply the styles, changing the background color to the custom color you specified.Conclusion
Our new runtime theming feature provides a flexible and easy way to customize the look and feel of our frontend application 🎉.
By setting the
FRONTEND_CSS_URL
environment variable, you can add a custom CSS layer on top of our default theme and apply your own custom styles.We hope this feature helps you to create a customized experience that meets your needs.
Demo
Just by including a custom css, you can totally change the look and feel of your application:
https://antolc.github.io/docs-customized/docs-custom/public/custom-style.css