Изменение цвета виджета Discord на основе предпочтительной цветовой схемы системы

Question

Я пытаюсь сделать что-то вроде этого:

if preferred color scheme : dark {
   <iframe src="https://discordapp.com/widget?id=123&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
} else {
   <iframe src="https://discordapp.com/widget?id=123&theme=light" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
}

Но я не уверен, как это сделать в JavaScript. Есть мысли?

Answer 1

Этот ответ показывает способ обнаружения темного режима пользователя в JavaScript:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    //dark mode
}

Таким образом, вы хотели бы что-то вроде этого:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
    // append to element/body:  <iframe src="https://discordapp.com/widget?id=123&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0"></iframe>
} else {
    // light mode
    // append to element/body:  <iframe src="https://discordapp.com/widget?id=123&theme=light" width="350" height="500" allowtransparency="true" 
}

Надеюсь, это поможет!