To change a color based on whether Light Mode or Dark Mode used, you’d typically use a prefers-color-scheme Media Query. To make things easier, CSS now comes with a utility function named light-dark().
The function accepts two color values as its arguments. Based on which
color scheme you are actively using, it will output the first or the
second argument.