snippets i've made, feel free to copy paste them into your codes :3

automatic theme switch visualizer

Current Theme: light 
 For view Dark theme enable Dark mode preference for this site on your browser or system settings
 
Current Theme: Dark 
For view light (Default) theme disable dark mode preference for this site on your browser or system settings
 
Current Theme: accessibility 
For view light (Default) or Dark theme disable Accessibility preference (not recommended) for this site on your browser or system settings

/*light mode (default)*/
@media (prefers-color-scheme: light) {
  
.light-theme {
  display: block;
  }
  
.dark-theme {
  display: none;
}
  
.accessibility-theme{
  display: none;
}

}

/*dark mode*/
@media (prefers-color-scheme: dark) {
  
.light-theme {
  display: none;
  }
  
.dark-theme {
  display: block;
}
  
.accessibility-theme{
  display: none;
}
}

/*reduced-motion*/
@media (prefers-reduced-motion: reduce) {
  
  *{
    animation: none;
    background: none;
    background-image: none;
    color: black;
  }
  
.light-theme {
  display: none;
  }
  
.dark-theme {
  display: none;
}
  
.accessibility-theme{
  display: block;
}
}

preview:

Current Theme: light

For view Dark theme enable Dark mode preference for this site on your browser or system settings

Current Theme: Dark

For view light (Default) theme disable dark mode preference for this site on your browser or system settings

Current Theme: accessibility

For view light (Default) or Dark theme disable Accessibility preference (not recommended) for this site on your browser or system settings