Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED
CSS optimization for DarkMode
1 Accepted Solution
Correct answer by
Hi @adi411
To use CSS Modules, you can create a separate CSS file for each component and import it into the component's JavaScript file. Then, you can use the CSS classes defined in that file in your component's HTML. This way, you can ensure that only the CSS classes required for that component are loaded on the page.
import React from 'react';
import styles from './MyComponent.module.css';
const MyComponent = () => {
return (
<div className={styles.container}>
<h1 className={styles.title}>Hello World</h1>
<p className={styles.description}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
);
};
export default MyComponent;
we have a component called MyComponent and a CSS file called MyComponent.module.css. We import the CSS file into the component's JavaScript file using the import statement and assign it to a variable called styles. We can then use the CSS classes defined in the file by accessing them as properties of the styles object.
<div class="MyComponent_container_abc123">
<h1 class="MyComponent_title_abc123">Hello World</h1>
<p class="MyComponent_description_abc123">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
As you can see, the CSS classes are automatically given unique names based on a hash of the file contents. This ensures that the CSS is scoped to the component and won't interfere with other components on the page.
Correct answer by
Hi @adi411
To use CSS Modules, you can create a separate CSS file for each component and import it into the component's JavaScript file. Then, you can use the CSS classes defined in that file in your component's HTML. This way, you can ensure that only the CSS classes required for that component are loaded on the page.
import React from 'react';
import styles from './MyComponent.module.css';
const MyComponent = () => {
return (
<div className={styles.container}>
<h1 className={styles.title}>Hello World</h1>
<p className={styles.description}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
);
};
export default MyComponent;
we have a component called MyComponent and a CSS file called MyComponent.module.css. We import the CSS file into the component's JavaScript file using the import statement and assign it to a variable called styles. We can then use the CSS classes defined in the file by accessing them as properties of the styles object.
<div class="MyComponent_container_abc123">
<h1 class="MyComponent_title_abc123">Hello World</h1>
<p class="MyComponent_description_abc123">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
As you can see, the CSS classes are automatically given unique names based on a hash of the file contents. This ensures that the CSS is scoped to the component and won't interfere with other components on the page.
Here is an earlier adobe community question related to dark mode in AEM if is of any use
Here are some of the things you can do for optimization or different way to implement this
- Use Sling Dynamic Include to get the dynamic cache state from the server and set the necessary mode on page load. This approach allows you to retrieve the theme mode from the server during page rendering, ensuring the correct mode is applied initially.
- Add a blocking script on the client-side JavaScript that will run during the body loading. This script can check the user's preference (e.g., from local storage or cookies) and apply the appropriate styles before the page is fully rendered.
- Inject inline CSS styles dynamically using JavaScript. By defining your dark and light mode styles as JavaScript objects or strings, you can dynamically create <style> elements and inject them into the page's <head> section based on the desired mode. This approach avoids the need for external stylesheets and is compatible with email clients that may not support external CSS.
- Use a clientlib with the category cq.authoring.editor.hook. This category allows you to add custom functionality to the AEM authoring interface, such as a button that toggles between dark and light modes for dialog boxes.
- Set the theme color in the HTML node. This approach involves modifying the HTML markup to include the desired theme color, which can be used to apply dark or light mode styles.
The most suitable solution to optimize CSS and load it dynamically for components in Adobe Experience Manager (AEM) would be to use Client-Side Libraries (ClientLibs) along with the ui.frontend module and a webpack development server.
Hi @gkalyan , @HrishikeshKa , @Raja_Reddy
Thank you for your inputs, I found the Inlining of CSS can be done in AEM
and my team tried, but we faced lot of dependency errors. You can see the screenshot below from Adobe's article. Can you let me know, how it works
Link to the aritcle - https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/inclu...
@kautuk_sahni - I just want to know the above article and the Inlining approach mentioned in the adobe article, does it requires more dependency to be added in pom files to work.
@adi411 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.
Kautuk Sahni
Related Conversations
