Paste the JSON Configuration of the custom Theme Style in your original applicationĭone! You have a brand new Theme Style, a complete copy of the one you created in your first application. Navigate to the Theme Roller Attributes \ JSON Configuration Scroll down to the Styles section and select the newly created Theme Style Go to Shared Components \ Themes \ Universal Theme - 42 Once loaded click on Save and give your Theme Style a name. Then from the Developer Toolbar, select Customize / Theme Roller. While being logged into the APEX Builder, run you app. The steps are exactly the same as when creating you original theme style. Here are the steps to make use of it and copy your custom Theme Style to another application.Īn your new application, create a new Theme Style. The essence of the whole process is the JSON Configuration from the previous steps. From the default blue color ( #056AC8) to the yellow we defined ( #ecdd00).Ĭopying Theme Style to another application For example, the g_Focus has changed several different Universal Theme CSS variables of the output file. Each of those variables is used by APEX to generate the output CSS file, as one of the variables from the JSON could be used to change multiple variables in the output CSS file.I have chosen "Demo Style" for this example. Once done with the changes, click on Save and give your Theme Style a name. They better be put in the :root pseudo-class so they are accessible everywhere. I will not go into much details about the APEX CSS variables, but will mention that the ones prefixed with -pm are my own vars, while the -ut ones will overwrite already existing ones in the APEX Universal Theme. I also changed some border radiuses, like the Container Border Radius and Buttons Border Radius.įinally, I added some Custom CSS. Their hex codes are as follows: #b6aa00, #fafafa, #857c00, #ecdd00. I have changed some of the Global Colors, as seen from the pictures. Note that the Theme Roller changes are only illustrative and I encourage you to use your own, matching your vision or brand guidelines. Now we will start editing the Vita style from scratch. Let us first build a custom style in one of our APEX applications. See how APEX translates your Theme Roller changes into CSS variables and applies them to your app ? How and where a configuration is saved and how to use it ⚙️ Using the Theme Roller In this blog post I have summarized the steps you'd need in order to copy a Theme Style from one application to another.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |