1. Home
  2. Forum
  3. React - EJ 2
  4. How to toggle theme to dark and back, per component, not including/excluding dark css

How to toggle theme to dark and back, per component, not including/excluding dark css

Hello,


I have an react app which is built by webpack and uses scss. I want to toggle theme, but examples provided work like include dark css, dont include dark css. I do not want this, since the app is built by webpack and I have no direct control where are the css actually compiled. I want to change theme by setting some prop like this:

<PivotViewComponent
              theme="dark"

Is this even possible ?


2 Replies
SK Sridhar Karunakaran Syncfusion Team December 23, 2024 02:08 PM UTC

Hi Jan,


We understand that you require the ability to switch dynamically between dark and light themes while using SCSS. If this is correct, we are currently validating this requirement with our internal team. We will provide further details within two business days (by December 26, 2024).


We appreciate your patience until then.


Regards,

Sridhar Karunakaran.


AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team December 26, 2024 02:46 PM UTC

Hi Jan,


We understand that your requirement is to dynamically switch between dark and light themes in the React Pivot Table. If so, currently we don’t have built-in option to switch between dark and light themes in the React Pivot Table. However, this can be achieved using the CSS variable “e-dark-mode”, which enables seamless theme switching. This feature is available exclusively in our modern themes - Fluent 2, Material 3, Bootstrap 5.3, and Tailwind 3.4. These themes have distinct class variables for light and dark modes within a single file, ensuring flexibility and ease of implementation.


To activate dark mode, you simply need to append the e-dark-mode class to the <body> section of your application. Below is a code example demonstrating how to append this class dynamically when a checkbox is selected.

Code example:

App.js

 const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (event) => {

    setIsChecked(event.target.checked);

    // Add or remove the class on the body element based on the checkbox state

    if (event.target.checked) {

      document.body.classList.add('dark');

      document.body.classList.add('e-dark-mode');

    } else {

      document.body.classList.remove('dark');

      document.body.classList.remove('e-dark-mode');

    }

  };

return (<div>

  <CheckBoxComponent label="Enable Darkmode" checked={isChecked} onChange={handleCheckboxChange}/>

  <PivotViewComponent id='PivotView'></PivotViewComponent>

</div>

Index.html

<style>

    .dark{

      background-color: black;

    }

</style>


Output screenshot:


For further details, please refer to the following user guide and knowledge base articles:


Additionally, we’ve prepared a sample for your reference, which is attached below.


Furthermore, If you prefer to use SCSS instead of CSS, the same solution can be implemented by loading the SCSS file as the stylesheet in the index.html file.


Regards,

Angelin Faith Sheeba.


Attachment: ej2reactwebpackexternals_d04f18ea.zip

Loader.
Up arrow icon