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

None selected

One selected

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):

In the example above, the first box all radio buttons are set to cyan colour, this is done by setting the form (which is the container of the radio buttons) inline style to --ANUWD-01-variables-primary-colour: #00FFFF; (cyan colour). For the next box we set diffrent colours for each radio button by setting the inline style of the label element to different colours. The first radio button is set to cyan, the second one is set to yellow and the third one is set to magenta by doing style="--ANUWD-01-variables-primary-colour: {colour};" where {colour} is the desired colour in hex format (e.g. #FFFF00 for yellow and #FF00FF for magenta). For the last box, no inline style is set fr the first two radio buttons, so they will use the default primary colour set by the page's root CSS variable (in this case, blue), but the third radio button is set to magenta colour by setting the inline style of the label element to style="--ANUWD-01-variables-primary-colour: #FF00FF;" (magenta colour).

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.