Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a SystemThemeObserver implementation for wasmJs #998

Merged
merged 2 commits into from
Feb 6, 2024
Merged

Add a SystemThemeObserver implementation for wasmJs #998

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1808957
Add a SystemThemeObserver implementation for wasmJs
eygraber Jan 17, 2024
d8c8921
fix JsFun isMatchMediaSupported
eymar Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
57 changes: 51 additions & 6 deletions compose/ui/ui/src/wasmJsMain/kotlin/androidx/compose/ui/window/SystemThemeObserver.wasm.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,58 @@ package androidx.compose.ui.window
import androidx.compose.runtime.State
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.SystemTheme
import org.w3c.dom.MediaQueryList
import org.w3c.dom.MediaQueryListEvent
import org.w3c.dom.Window
import org.w3c.dom.events.Event

internal actual fun getSystemThemeObserver(window: Window): SystemThemeObserver {
return object : SystemThemeObserver {
override val currentSystemTheme: State<SystemTheme>
get() = mutableStateOf(SystemTheme.Unknown)
internal class SystemThemeObserverImpl(window : Window) : SystemThemeObserver {

override fun dispose() {}
override val currentSystemTheme: State<SystemTheme>
get() = _currentSystemTheme

private val media: MediaQueryList by lazy {
window.matchMedia("(prefers-color-scheme: dark)")
}

private val _currentSystemTheme = mutableStateOf(
when {
!isMatchMediaSupported() -> SystemTheme.Unknown
media.matches -> SystemTheme.Dark
else -> SystemTheme.Light
}
)

private val listener: (Event) -> Unit = { event ->
_currentSystemTheme.value = if ((event as MediaQueryListEvent).matches)
SystemTheme.Dark else SystemTheme.Light
}

override fun dispose() {
if (isMatchMediaSupported()){
try {
media.removeEventListener("change", listener)
} catch (t : Throwable){
media.removeListener(listener)
}
}
}

init {
if (isMatchMediaSupported()) {
try {
media.addEventListener("change", listener)
} catch (t: Throwable) {
media.addListener(listener)
}
}
}
}
}

internal actual fun getSystemThemeObserver(window: Window): SystemThemeObserver =
SystemThemeObserverImpl(window)

// supported by all browsers since 2015
// https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question out of curiosity: why was this JsFun hack used instead of accessing the window global directly?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe I did that because the window global's matchMedia isn't nullable, and this check is to see if it exists, which I think wouldn't go well with using the global if it actually didn't exist (although I didn't actually test to see if it would crash).

@JsFun("() => window.matchMedia != undefined")
private external fun isMatchMediaSupported(): Boolean