Implement theme switching

Author: LimeBeck

src/jsMain/kotlin/Application.kt

@@ -6,20 +6,50 @@ import components.Layout
 import components.PageContent
 import components.PageFooter
 import components.PageHeader
-import org.jetbrains.compose.web.css.*
+import org.jetbrains.compose.web.css.Color
+import org.jetbrains.compose.web.css.Style
 import org.jetbrains.compose.web.dom.*
 import org.jetbrains.compose.web.renderComposableInBody
 
+enum class Theme { Dark, Light }
+
 fun main() {
     renderComposableInBody {
+        var theme by remember { mutableStateOf(Theme.Light) }
         Style {
+            root {
+                when (theme) {
+                    Theme.Light -> {
+                        ThemeVariables.mainColor(Color("#333"))
+                        ThemeVariables.accentColor(Color("#6200ea"))
+                        ThemeVariables.backgroundColor(Color("#f0f0f0"))
+                    }
+                    Theme.Dark -> {
+                        ThemeVariables.mainColor(Color("#f0f0f0"))
+                        ThemeVariables.accentColor(Color("#6200ea"))
+                        ThemeVariables.backgroundColor(Color("#333"))
+                    }
+                }
+            }
         }
 
         Style(BaseStyles)
 
         Layout {
             PageHeader {
                 H1 { Text("My delicious site") }
+                Div {
+                    Button(attrs = {
+                        onClick {
+                            theme = when (theme) {
+                                Theme.Light -> Theme.Dark
+                                Theme.Dark -> Theme.Light
+                            }
+                        }
+                    }) {
+                        Text("Switch theme")
+                    }
+                }
             }
             PageContent {
                 var counter: Int by remember { mutableStateOf(0) }

src/jsMain/kotlin/Styles.kt

@@ -8,12 +8,6 @@ object ThemeVariables {
 
 object BaseStyles : StyleSheet() {
     init {
-        root {
-            ThemeVariables.mainColor(Color("#333"))
-            ThemeVariables.accentColor(Color("#6200ea"))
-            ThemeVariables.backgroundColor(Color("#f0f0f0"))
-        }
-
         "#root" style {
             display(DisplayStyle.Flex)
             flexDirection(FlexDirection.Column)
@@ -28,8 +22,9 @@ object BaseStyles : StyleSheet() {
             flex(0, 0, 60.px)
             display(DisplayStyle.Flex)
             alignItems(AlignItems.Center)
-            justifyContent(JustifyContent.Center)
+            justifyContent(JustifyContent.SpaceBetween)
             fontSize(1.5.cssRem)
+            padding(10.px)
         }
 
         "main" style {