The data-mode attribute can be used to toggle between light and dark modes in a web application. This approach is often used to enhance the user experience by providing an option to switch between different visual themes.

In Sliced you can change or set layout mode in src/slices/layout/reducer.ts file.

1. Light Mode

To display content in light mode, you can use the currentLayoutMode: LAYOUT_MODE.LIGHT which is situated in src/slices/layout/reducer.ts file. This typically results in a theme with a light background and dark text, which is the default for most websites.

2. Dark Mode

To display content in dark mode, you can use the currentLayoutMode: LAYOUT_MODE.DARK which is situated in src/slices/layout/reducer.ts file.. This usually results in a theme with a dark background and light text, which is easier on the eyes in low-light conditions.