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.

Changing Icon Colour

The default for this button icon is to be blue text and icon, you can upload a coloured icon and keep the colour by setting the data-ANUWD-01-icon-colour-filter-type="none" attribute on the button or container of the button(s). This will keep the icon colour as it is and not apply any filters to it. If you do want to invert the colour of the icon, so your origonal white icon becomes black, you can set the data-ANUWD-01-icon-colour-filter-type="invert" attribute on

Active State

Disabled State

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 black, mint and magenta using the inline style attribute in the button 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. #000000 for black).

You can also invert the icon colour by setting the data-ANUWD-01-icon-colour-filter-type="true" attribute on the button element. This will change the icon colour to the invert of the colour which may be useful if the icon is not visible against some background colours. Your icon colours depends on the image of the icon you use, so make sure the icon image is suitable for the colour you choose.

You can change the text colour with --ANUWD-01-variables-primary-button-text-colour: {colour} where {colour} is the desired text colour in hex format (e.g. #2f2f2f for dark grey).

By default icons are inverted to make them black, so if you want to keep the original colour of the icon, you can set the data-ANUWD-01-icon-colour-filter-type="none" attribute on the button element. This will keep the icon colour as it is and not apply any filters to it.

You can also apply a filter to the icon by setting the --ANUWD-01-variables-icon-filter: {filter} where {filter} is the desired filter in CSS filter format (e.g. invert(29%) sepia(99%) saturate(7497%) hue-rotate(203deg) brightness(101%) contrast(101%) this will make the white icon blue). The icon you upload should be a white icon.

Rounded Corners

You can also change the radius (roundness) of the corners of the button by changing the --ANUWD-01-variables-button-border-radius-scale variable in the container of the component or in the button. In this demo we applied it to this section div so all buttons inside this section will have the same border radius. This can be done by style="--ANUWD-01-variables-button-border-radius-scale: 50px;" where 50px is the desired border radius in pixels. You can also use other units like em, %, rem, etc. The default value is 15px which is the default border radius of the button.

Customisable Attributes

These customisation is also possible for other attributes:

• --ANUWD-01-variables-primary-colour - to change the primary colour of the component (default is #007bff - blue).
• --ANUWD-01-variables-primary-focous-ring-thickness - to change the thickness of the focus ring around the button when it is focused (set to 0 to disable).
• --ANUWD-01-variables-primary-focous-ring-colour - to change the colour of the focus ring around the button when it is focused.
• --ANUWD-01-variables-button-width - to change the width of the button.
• --ANUWD-01-variables-button-height - to change the height of the button.
• --ANUWD-01-variables-button-border-radius-scale - to change the border radius (roundness) of the button.
• --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-icon-size - to change the size of the icon inside the button.
• --ANUWD-01-variables-icon-filter - to change the filter applied to the icon (e.g. invert, sepia, saturate, hue-rotate, brightness, contrast). (e.g. invert(29%) sepia(99%) saturate(7497%) hue-rotate(203deg) brightness(101%) contrast(101%) this will make the white icon 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.