Integrated latest changes at 07-12-2024 4:30:10 AM

Author: SyncfusionBuild

ej2-vue-toc.html

@@ -73,7 +73,7 @@
     <li><a href="/ej2-vue/appearance/size-modes">Size-Modes</a></li>
     <li><a href="/ej2-vue/appearance/icons">Icons</a></li>
     <li><a href="/ej2-vue/appearance/theme-studio">Theme Studio</a></li>
-    <li><a href="/ej2-vue/appearance/material3">Material 3 Theme</a></li>
+    <li><a href="/ej2-vue/appearance/css-variables">CSS Variables</a></li>
     </ul>
 </li>
 <li>
@@ -2685,9 +2685,9 @@
 </li>
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/tooltip/">API Reference</a></li>
 </ul>
-</li><li>
-    <a href="/ej2-vue/treegrid/overview">TreeGrid</a>
+</li><li>TreeGrid
 <ul>
+<li><a href="/ej2-vue/treegrid/overview">Overview</a></li>
 <li>Getting Started
 <ul>
 <li><a href="/ej2-vue/treegrid/getting-started">Vue 2</a></li>

ej2-vue/appearance/css-variables.md

@@ -0,0 +1,137 @@
+---
+layout: post
+title: Themes using CSS Variables in Vue Appearance component | Syncfusion
+description: Learn here all about Themes using CSS Variables in Syncfusion Vue Appearance component of Syncfusion Essential JS 2 and more.
+control: Themes using CSS Variables 
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# About CSS variables in themes
+
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used.
+
+Syncfusion currently offers two modern and highly customizable themes using CSS variables. These themes are designed to provide a consistent and visually appealing look and feel across all Syncfusion components. The themes available are:
+
+* Material 3 Theme
+* Fluent 2 Theme
+
+## CSS themes - Syncfusion Vue components
+
+[Material 3](https://m3.material.io/) and [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) 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.
+
+> 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;.
+
+### Utilization of CSS variables in modern themes
+
+Modern themes like Material 3 and Fluent 2 incorporate support for CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors and `Fluent 2` uses `hex` values for color customization. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of our themes.  The examples below shows CSS variables with their values used for the respective themes.
+
+{% tabs %}
+{% highlight ts tabtitle="material3.css" %}
+{% include code-snippet/common/css-value-cs1/material3.css %}
+{% endhighlight %}
+{% highlight ts tabtitle="fluent2.css" %}
+{% include code-snippet/common/css-value-cs1/fluent2.css %}
+{% endhighlight %}
+{% endtabs %}
+
+### How to get these themes?
+
+To access themes provided by Syncfusion, you have two primary options,
+
+* Package
+* CDN links
+
+|    |  Light  |  Dark  |
+|-----------|---------|--------|
+|Package  | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
+|  | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
+| CDN  | [Material 3 Light](https://cdn.syncfusion.com/ej2/24.2.8/material3.css)  |  [Material 3 Dark](https://cdn.syncfusion.com/ej2/24.2.8/material3-dark.css)  |
+|  |  [Fluent 2 light](https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css)  |  [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css)  |
+
+### Color Customization in themes
+
+CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.
+
+#### Customization using CSS
+
+Here you can find the example for `Material 3` customization using CSS class.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/material3-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
+
+**Default primary value**
+
+![default primary value](images/material3-default.png)
+
+**Customized primary value**
+
+![customized primary value](images/material3-customize.png)
+
+Example for `Fluent 2` customization using CSS class.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/fluent2-cs2/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs2" %}
+
+**Default primary value**
+
+![default primary value](images/fluent2-default.png)
+
+**Customized primary value**
+
+![customized primary value](images/fluent2-customize.png)
+
+With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion Vue Components.
+
+### Switching Light and Dark mode with CSS variables
+
+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.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/material3-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+
+### Mode switching in Fluent 2 theme
+
+Similar to `Material 3`, we offer both Light and Dark variants with `Fluent 2`. In the Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
+
+{% tabs %}
+{% highlight html tabtitle="app.vue" %}
+{% include code-snippet/common/fluent2-cs1/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+
+### How to switch dark mode?
+
+To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3` and `Fluent 2` theme. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
+
+`Material 3` dark mode
+
+![dark mode](images/material3-dark.png)
+
+`Fluent 2` dark mode
+
+![dark mode](images/fluent2-dark.png)
+
+### ThemeStudio Application
+
+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.
+
+Access the Syncfusion ThemeStudio application, featuring our themes, via the following link: [Link to Syncfusion ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=material3)