Skip to Content (Press Enter)
2022-05-01 03-47-53
Jun Mun Chan
28Views
6Comments
Allows user to change custom application theme color
Question
Reactive
Application Type
Reactive

Hi Community,

I am trying to develop a custom theme template. Even thou I want to define the main color, i want to still allow users the flexibility to change.

Am following the steps here, and this part confuses me quite a bit. Where actually should i place the /*primary-color*/ ??


Thanks!

0
0
06 Feb 2025
Copy Link
2026-02-16 05-51-10
Sahana K

Hi Jun Mun Chan,

  • Inside the CSS of your theme (Stylesheets in the Theme module).
  • Target properties like color, background-color, border-color, etc.
  • Only use it for elements where you want users to have control over the primary color.

    Example:
    :root {    --primary-color: #007BFF; /*primary-color*/
    }


    .button-primary {
        background-color: var(--primary-color); /*primary-color*/
        color: white;
    }



0
0
06 Feb 2025
Copy Link
2022-05-01 03-47-53
Jun Mun Chan

Do you mean something like this?

0
0
06 Feb 2025
Copy Link
2016-04-22 00-29-45
Nuno Reis
 
MVP

Replying to Jun Mun Chan's comment on 06 Feb 2025 06:28:38

CSS variables are easy to use after you understand them. Just doing it by copying someone else's code may give you surprises at the end.

Follow the links provided by Navneet. to study the topic.

0
0
06 Feb 2025
Copy Link
2021-11-12 04-59-31
Manikandan Sambasivam

Hi,

whether you need to build a theme switcher?

0
0
06 Feb 2025
Copy Link
2025-12-03 17-22-41
Lavanya Kamalaguru

Hi @Jun Mun Chan,

Please check out this post. 

Thanks,

Lavanya Kamalaguru.

0
0
06 Feb 2025
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.