How can I change my diy components' style when toggle dark/light mode?

[gyhyfj]

I want to create one compoents and use it in pages, but idk how to toggle its css color when toggle dark/light mode .
For example, my component is like this:

<template>
  <div class="test">abc</div>
</template>

<style scoped>
  .test{
    background-color: pink;
  }
</style>

How can I change background-color to gray, when toggle dark mode?

[brc-dd]

<style scoped>
.test {
  background-color: pink;
}

:root.dark .test {
  background-color: gray;
}
</style>

[gyhyfj]

Thanks! It works