Theming

Theming in Dynamic Framework allows you to customize the appearance and style of your widgets to meet specific design requirements.

Explore the basics of theme design, discover the available CSS variables (or tokens), and learn how to make your own theme.

Theming in Dynamic Framework involves establishing a set of styles that govern the visual presentation of your widgets throughout your application. This promotes consistency in design elements such as colors, typography, spacing, and other visual aspects, ensuring a cohesive user experience.

Overview of CSS Variables or Tokens Available

Dynamic Framework, similar to Bootstrap, employs CSS variables (often referred to as tokens) to streamline the customization of styles across your user interfaces. This approach offers a powerful and efficient way to maintain a consistent visual language throughout your applications.

CSS variables act as placeholders for values within your stylesheets. You can define a variable once and then reference it multiple times throughout your code. This reduces repetition and makes it easier to manage and update your styles.

Dynamic Framework provides a comprehensive set of CSS variables that cover a wide range of styling aspects, including colors, typography, spacing, and more. A detailed list of these variables can be found in the official Dynamic Framework documentation.

Creating a Theme in Modyo

With the Dynamic Framework seamlessly integrated into every new Modyo app you create, crafting custom themes is easy. Here's how to create your custom theme

1. Prepare Your Custom CSS

Before diving into theming with Dynamic Framework, ensure you have a custom CSS file ready to house your styles. You can follow Modyo's developer tips on how to set up a custom CSS file.

2. Add HTML Components

Once your custom CSS is ready, you can add any HTML component from Modyo's catalog to your application. Let's take this Hero component as an example:

				<section class="bg-white py-8 df-hero-component">
	<div class="container">
		<div class="row">
			<div class="col-lg-7 d-lg-flex mb-lg-4 align-items-center">
					<div>
						<span class="badge text-bg-light mb-2">Benefits</span>
						<h2 class="h3 mb-4">Unlock Financial Freedom with Dynamic Bank</h2>
						<h5 class="fw-normal text-gray-500 mb-3">Empower Your Wealth Journey with Dynamic Bank</h5>

						<div class="mt-4">
							<a href="" class="btn btn-primary btn-lg rounded-pill">Request a demo</a>
							<a href="" class="btn btn-link-secondary btn-lg rounded-pill">Request a demo</a>
						</div>
					</div>
			</div>
			<div class="col-lg-5">
				<picture>
					<img class="mw-100 h-100 rounded-3" src="https://cdn.modyo.cloud/uploads/16ceb73d-4b61-4b8e-ad60-d572013ad8ea/original/Frame_33428.png">
				</picture>
			</div>
		</div>
	</div>
</section>

Note that we've added a .df-hero-component class to the <section> tag in our HTML to ensure the styles are applied correctly.

3. Define Custom CSS Variables

Now, let's add custom CSS variables to your stylesheet to tailor the appearance of this component:

				:root {
	--df-hero-background-color: #f0f0f0;
	--df-hero-font-family: monospace;
	--df-hero-button-background-color: #ff5722;
	--df-hero-button-text-color: #fff;
}

4. Apply Custom Styles

Now that the CSS variables are available, you can apply them to the component using CSS rules, add to this code to the same style sheet:

				.df-hero-component {
	background-color: var(--df-hero-background-color);
	color: var(--df-hero-text-color); /* Assuming you defined this variable */
	font-family: var(--df-hero-font-family);
}

.df-hero-component .btn-primary {
	background-color: var(--df-hero-button-background-color);
	color: var(--df-hero-button-text-color);
}

5. Continue Customizing

To make additional modifications or create more complex themes, simply compose additional CSS rules in your custom stylesheet. This approach allows you to maintain full control over the visual presentation of your Modyo applications while leveraging the power and flexibility of the Dynamic Framework.

Creating a Custom Theme for a Widget

While in the creating a Theme in Modyo section, we discuss how to apply styles across your entire application, theming individual widgets can use a slightly different approach.

Creating a theme for your widgets could help to make your app mode modular and easier to maintain. Please note that the global CSS styles you create might inadvertently affect the behavior of your individual widget's CSS. In some cases, you may need to employ higher CSS specificity to ensure your styles are applied correctly.

Please note that the global CSS styles you create might inadvertently affect the behavior of your individual widget's CSS. In some cases, you may need to employ higher CSS specificity to ensure your styles are applied correctly.

You have two main options for creating themes for your widgets:

Global CSS on your app: Define your theme within the main CSS file of your site. This is a straightforward approach, but it might require you to use more specific selectors to target widget elements.
Embedded in React CSS: If your widget is a React application, you can embed the theme directly in its CSS file. This provides a more encapsulated and modular way to style your widget.

Note that React components in the Dynamic Framework have their own set of predefined custom properties. You can leverage these properties to customize the appearance and behavior of your widgets. Refer to the component documentation for a detailed list of available properties.

Example: Creating a Themed Component

Let's assume you have a React project set up using the Dynamic Framework installation process detailed in the documentation.

Navigate to Your Component: Open the src/components/myComponent.tsx file.

Replace the Code: Replace the existing code with the List component:

						import { DList, DListItem } from '@dynamic-framework/ui-react';
export default function MyComponent() {
	const items = ['Item 1', 'Item 2', 'Item 3'];
	return (
		<div id="my-component">
			<DList>
				{items.map((item) => (
						<DListItem key={item}>{item}</DListItem>
				))}
			</DList>
		</div>
	);
}

Note the addition of the id="my-component" attribute to the wrapping div. This will improve CSS specificity for styling.

Define Your Custom Variables Add the following CSS variables to your styles/base.css file (or your main site CSS file):

						:root {
	--custom-widget-text-color: #fff;
	--custom-widget-background-color: #4848b7;
}

#my-component .list-group-item{
	color: var(--custom-widget-text-color);
	background-color: var(--custom-widget-background-color);
}

You can create a custom complex themes for your widgets mixing CSS variables, component properties, and Bootstrap classes.

Remember that you can always add more CSS rules to your stylesheet to further customize the appearance and behavior of your widget.