[help] Is there a way to detect if a user is using one of the litely or darkly themes?
I’m currently using const prefersDarkTheme = window.matchMedia(‘(prefers-color-scheme: dark)’).matches;
but it doesn’t take into consideration users that use a light system with a dark website.
EDIT: Solved with the following:
<span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">element </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#0086b3;">document</span><span style="color:#323232;">.</span><span style="color:#0086b3;">getElementById</span><span style="color:#323232;">(</span><span style="color:#183691;">"app"</span><span style="color:#323232;">);
</span><span style="font-weight:bold;color:#a71d5d;">const </span><span style="color:#323232;">themeVariant </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#323232;">element.</span><span style="color:#0086b3;">getAttribute</span><span style="color:#323232;">(</span><span style="color:#183691;">"data-bs-theme"</span><span style="color:#323232;">);
</span><span style="font-weight:bold;color:#a71d5d;">if </span><span style="color:#323232;">(themeVariant </span><span style="font-weight:bold;color:#a71d5d;">=== </span><span style="color:#183691;">"light"</span><span style="color:#323232;">) {
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">var </span><span style="color:#323232;">primaryBackground </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"#f0f0f0"</span><span style="color:#323232;">;
</span><span style="color:#323232;">} </span><span style="font-weight:bold;color:#a71d5d;">else </span><span style="color:#323232;">{
</span><span style="color:#323232;"> </span><span style="font-weight:bold;color:#a71d5d;">var </span><span style="color:#323232;">primaryBackground </span><span style="font-weight:bold;color:#a71d5d;">= </span><span style="color:#183691;">"#121317"</span><span style="color:#323232;">;
</span><span style="color:#323232;">}
</span>