Dark Mode

implementation(npm("next-themes","0.2.1"))
                  Copy

@file:JsModule("next-themes")
@file:JsNonModule
@file:Suppress("UnusedProperty")

package example.shadcn_kotlin.ui.theme

import react.Props

external interface UseThemeProps {
    operator fun component1(): (theme: String) -> Unit

    var themes: Array<String>
    var forcedTheme: String?
    var setTheme: (theme: String) -> Unit
    var theme: String?
    var resolvedTheme: String?
    var systemTheme: String? /* 'dark' | 'light' */
}
external interface ThemeProviderProps: Props {
    var themes: Array<String>
    var forcedTheme: String?
    var enableSystem: Boolean?
    var disableTransitionOnChange: Boolean?
    var enableColorScheme: Boolean?
    var storageKey: String
    var defaultTheme: String?
    var attribute: String?
    var value: Any?
    var nonce: String?
    var children: react.ReactNode?
}

@JsName("useTheme")
external val useTheme: () -> UseThemeProps

@JsName("ThemeProvider")
external val ThemeProvider: react.FC<ThemeProviderProps>
                  Copy

@Composable
fun ReactPageLayout(
    children: ReactNode
) {
    kotlinext.js.require("./globals.css")
    val Layout = FC<Props> {
        ThemeProvider {
            defaultTheme = "system"
            enableSystem = true
            div {
                +children
            }
        }
    }
    LaunchedEffect(Unit) {
        val root = document.getElementById("root")
        createRoot(root!!).render(Layout.create())
    }
}
                  Copy