You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ej2-react/appearance/css-variables.md
+55-4Lines changed: 55 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -17,16 +17,19 @@ Syncfusion currently offers two modern and highly customizable themes using CSS
17
17
* Material 3 Theme
18
18
* Fluent 2 Theme
19
19
* Bootstrap 5.3 Theme
20
+
* Tailwind 3.4 Theme
20
21
21
22
## CSS themes - Syncfusion React components
22
23
23
-
[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) and [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
24
+
[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
24
25
25
26
> Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
26
27
27
28
### Utilization of CSS variables in modern themes
28
29
29
-
Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support with CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors while `Fluent 2` uses `hex` values for color customization. `Bootstrap 5.3` allows color customization with both `rgb()` and `hex` values. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes. The examples below shows CSS variables with their values used for the respective themes.
30
+
Modern themes make it easy to change the colors of controls using CSS variables. Each theme has its own way of setting these variables, so it's important to follow the specific instructions for each theme. Doing this helps keep the styling consistent and efficient across different parts of your application.
31
+
32
+
Below are examples of how CSS variables can be defined for these themes:
30
33
31
34
{% tabs %}
32
35
{% highlight ts tabtitle="material3.css" %}
@@ -38,6 +41,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support wi
38
41
{% highlight ts tabtitle="bootstrap5.3.css" %}
39
42
{% include code-snippet/common/css-value-cs1/bootstrap5.3.css %}
40
43
{% endhighlight %}
44
+
{% highlight ts tabtitle="tailwind3.4.css" %}
45
+
{% include code-snippet/common/css-value-cs1/tailwind3.4.css %}
46
+
{% endhighlight %}
41
47
{% endtabs %}
42
48
43
49
### How to get these themes?
@@ -52,9 +58,11 @@ To access themes provided by Syncfusion, you have two primary options,
With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion React Components.
138
170
139
171
### Switching Light and Dark mode with CSS variables
140
172
141
-
Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
173
+
Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In all themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
142
174
143
175
{% tabs %}
144
176
{% highlight js tabtitle="index.jsx" %}
@@ -181,9 +213,24 @@ Similar to `Fluent 2`, we offer both Light and Dark variants with `Bootstrap 5.3
Similar to `Fluent 2`, we offer both Light and Dark variants with `Tailwind 3.4`. In the Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
219
+
220
+
{% tabs %}
221
+
{% highlight js tabtitle="index.jsx" %}
222
+
{% include code-snippet/common/tailwind3.4-cs1/app/index.jsx %}
223
+
{% endhighlight %}
224
+
{% highlight ts tabtitle="index.tsx" %}
225
+
{% include code-snippet/common/tailwind3.4-cs1/app/index.tsx %}
To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2` and `Bootstrap 5.3` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
233
+
To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2`, `Bootstrap 5.3` and `Tailwind 3.4` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
187
234
188
235
`Material 3` dark mode
189
236
@@ -197,6 +244,10 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o
197
244
198
245
199
246
247
+
`Tailwind 3.4` dark mode
248
+
249
+
250
+
200
251
### ThemeStudio Application
201
252
202
253
The ThemeStudio application now includes seamless integration with the Material 3 and Fluent 2 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
0 commit comments