UWD: Component

Light and Dark Themes

There are three settings for setting light/dark themes for the toggle switch component:

• Light theme
  set data-ANUWD-01-theme="light" in the html code of the component container (div, section, etc.) and the components inside will be set to be in light theme always.

• Dark theme
  set data-ANUWD-01-theme="dark" in the html code of the component container (div, section, etc.) and the components inside will be set to be in dark theme always.

• Your system theme
  set data-ANUWD-01-theme="auto" (or no data value will be treated as auto) in the html code of the component container (div, section, etc.) and the components inside will follow the user's system theme. However, if your website has it's own theme setting control, you can set the theme using the javascript function ANUWD_01_ui_selection_controls_toggle_switch.setGlobalTheme() and passing in either 'light', 'dark' or 'auto' as the parameter/value to set the theme globally for all components on the page.

You can test the auto theme by changing your system theme to light or dark mode and/or you can test the javascript theme changer by clicking the button below. The toggle switch will change the `Your system theme` component to the theme you set using the javascript function ANUWD_01_ui_selection_controls_toggle_switch.setGlobalTheme().

Light Dark Auto

Note:
It wont change the background colour of the box, this would expected to be set by your own javascript code or css styles. Additionally, the function will not change the 'light theme' and 'dark theme' components, as their themes are set by the data-ANUWD-01-theme attribute in the html code of the component container, which takes precedence over the global theme setting.

Active State

Disabled State

Toggled off

Toggled on

Changing Colour of Components

In the demos above, the primary colour for them is set by the page's root CSS variable --ANUWD-01-variables-primary-colour: #007bff; which is set to #007bff (blue). You can change this colour to any colour and all of those components on that page will be that colour.

You can also set individual component to different colours by setting the inline style of the component container (div, section, label, form, etc) to the desired colour by style="--ANUWD-01-variables-primary-colour: #ff0000;" where #ff0000 (red) is the desired colour. This will only change the colour of that component that are inside that container.

This also means if you want to change multiple components in the same container to different colour, you can do so by setting the container's inline style to style="--ANUWD-01-variables-primary-colour: #00ff00;" where #00ff00 (green) is the desired colour for those components. This will only change the colour of that components that are inside that container.

Here's an example of how to set the colour of the component using the inline style attribute in the component container (in this case, the label element):

We set these colours of cyan, yellow and magenta using the inline style attribute in the label element of the component. You can change these colours to any colour you want by changing the value of the --ANUWD-01-variables-primary-colour: {colour} where {colour} is the desired colour in hex format (e.g. #00FFFF for cyan).

Customisable Attributes

These customisation is also possible for other attributes:

• --ANUWD-01-variables-primary-focous-ring-thickness - to change the thickness of the focus ring around the toggle switch when it is focused (0 to disable the focus ring).
• --ANUWD-01-variables-primary-focous-ring-colour - to change the colour of the focus ring around the toggle switch when it is focused.
• --ANUWD-01-variables-component-scale - to change the scale of the component (default is 1, 0.5 for half size, 2 for double size, etc).
• --ANUWD-01-variables-primary-colour - as mentioned, to change the primary colour of the component (default is #007bff - blue).

Copyright Notice

All UI components, designs, and assets on this site are © 2025 Alam Network. They are the exclusive property of Alam Network. Use of any part of this guide without express written permission is strictly prohibited. The buttons, toggles, icons, and other UI elements you see here are part of Alam Network’s copyrighted design system. You need a valid license or written consent from Alam Network to use them in any project.