Skip to content
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

Merged
merged 5 commits into from
Mar 31, 2025
Merged

✨(frontend) add custom css style #771

merged 5 commits into from
Mar 31, 2025

Conversation

AntoLC
Copy link
Collaborator

@AntoLC AntoLC commented Mar 19, 2025

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:

FRONTEND_CSS_URL=http://anything/custom-style.css

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:

  • Easy customization 🔄: With this feature, you can easily customize the look and feel of our application without requiring any code changes.
  • Flexibility 🌈: You can use any CSS styles you like to create a custom theme that meets your needs.
  • Runtime theming ⏱️: This feature allows you to change the theme of our application at runtime, without requiring a restart or recompilation.

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:

body {
  background-color: #3498db;
}

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

image


image

@AntoLC AntoLC self-assigned this Mar 19, 2025
@AntoLC AntoLC force-pushed the feature/runtime-theme branch from 0e8f1f6 to 386e1fa Compare March 19, 2025 08:47
@AntoLC AntoLC mentioned this pull request Mar 24, 2025
9 tasks
@AntoLC AntoLC force-pushed the feature/runtime-theme branch 2 times, most recently from a0ffd15 to 456f57b Compare March 26, 2025 17:00
@AntoLC AntoLC changed the title POC runtime-theme ✨(frontend) add custom css style Mar 26, 2025
@AntoLC AntoLC force-pushed the feature/runtime-theme branch from 456f57b to ae6a149 Compare March 26, 2025 17:56
@AntoLC AntoLC added feature backend designed A UX/UI design has been proposed and removed wip labels Mar 26, 2025
@AntoLC AntoLC requested review from NathanVss and lunika March 26, 2025 18:02
@lunika
Copy link
Member

lunika commented Mar 27, 2025

You should start a document explaining how to customize and in a first step you should add this runtime solution.
Maybe in docs/theming.md ? docs/customization.md ?

@AntoLC AntoLC force-pushed the feature/runtime-theme branch from ae6a149 to 28a6b8b Compare March 28, 2025 15:22
Comment on lines +64 to +68
<AnalyticsProvider>
<CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
{children}
</CrispProvider>
</AnalyticsProvider>
Copy link
Contributor

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

Copy link
Collaborator Author

@AntoLC AntoLC Mar 31, 2025

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.

@rvveber
Copy link
Collaborator

rvveber commented Mar 31, 2025

Could we determine classNames dynamically?

E.g. in an Abstract UI Component Class with the attribute:
className: --docs-<component-name-snake-cased>

And every UI Component would inherit from this Abstract Base Class.
Ensuring that there is always a className for every (UI) Component.

With the ability to overwrite the className (eg. for backwards compatibility on
component-rename)

AntoLC added 5 commits March 31, 2025 12:01
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.
@AntoLC AntoLC force-pushed the feature/runtime-theme branch from 28a6b8b to ce99f01 Compare March 31, 2025 10:16
@AntoLC
Copy link
Collaborator Author

AntoLC commented Mar 31, 2025

Could we determine classNames dynamically?

E.g. in an Abstract UI Component Class with the attribute: className: --docs-<component-name-snake-cased>

And every UI Component would inherit from this Abstract Base Class. Ensuring that there is always a className for every (UI) Component.

With the ability to overwrite the className (eg. for backwards compatibility on component-rename)

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 hooks. Like you said, it could create backward issues that could be hard to find because the classes will change automatically, other developers not aware about this feature could easily create issues by renaming components.

We can create an issue and have a separate pull request about having more automated classname if you want.

@AntoLC AntoLC merged commit 50b90f9 into main Mar 31, 2025
18 of 19 checks passed
@AntoLC AntoLC deleted the feature/runtime-theme branch March 31, 2025 10:34
@AntoLC AntoLC mentioned this pull request Mar 31, 2025
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backend designed A UX/UI design has been proposed feature frontend
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants