Merge pull request #1 from Konyaco/theme

Support light theme
Konyaco · Dec 13, 2022 · 79128cb · 79128cb
2 parents 56885c8 + 53d596c
commit 79128cb
Show file tree

Hide file tree

Showing 14 changed files with 587 additions and 349 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Now supported:
 
 - Coarse implementation of some basic components: `Button`, `Switcher`, `TextField`, `Slider`...
 - A fake `Mica` and `Layer`
-- Only dark theme
+- Dark theme and light theme
 
 There are lots of hard-code and workaround in our source code, we are going to eliminate them in the future
 
@@ -60,7 +60,9 @@ The copyright to the icon assets (in `/resources/icon/`) belongs to Microsoft.
     - [x] Text Field
     - [x] Part of Animation
 - M2
-   - [ ] Theme (Light and Dark, custom Accent color)
+   - [ ] Theme
+       - [x] Light and Dark theme
+       - [ ] Custom Accent color
    - [ ] Animation
    - [ ] Refactor architecture, cleanup code, eliminate hard-code
    - [ ] More

diff --git a/assets/screenshot.png b/assets/screenshot.png
diff --git a/src/jvmMain/kotlin/Main.kt b/src/jvmMain/kotlin/Main.kt
@@ -4,7 +4,6 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.unit.Density
@@ -16,9 +15,9 @@ import androidx.compose.ui.window.rememberWindowState
 import com.konyaco.fluent.FluentTheme
 import com.konyaco.fluent.background.Layer
 import com.konyaco.fluent.background.Mica
-import com.konyaco.fluent.color.Colors
 import com.konyaco.fluent.component.*
 import com.konyaco.fluent.darkColors
+import com.konyaco.fluent.lightColors
 
 fun main() = application {
     Window(
@@ -32,7 +31,10 @@ fun main() = application {
 
 @Composable
 private fun App() {
-    FluentTheme(colors = darkColors()) {
+    val systemDarkMode = isSystemInDarkTheme()
+    var darkMode by remember(systemDarkMode) { mutableStateOf(systemDarkMode) }
+
+    FluentTheme(colors = if (darkMode) darkColors() else lightColors()) {
         Mica(Modifier.fillMaxSize().verticalScroll(rememberScrollState()).horizontalScroll(rememberScrollState())) {
             val density = LocalDensity.current
             var scale by remember { mutableStateOf(density.density) }
@@ -41,14 +43,17 @@ private fun App() {
                 modifier = Modifier.padding(start = 32.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
                     .defaultMinSize(minWidth = 600.dp),
                 shape = RoundedCornerShape(8.dp),
-                border = BorderStroke(1.dp, Colors.Stroke.Control.Default),
+                border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
                 cornerRadius = 8.dp
             ) {
                 Column(Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
-                    Row(verticalAlignment = Alignment.CenterVertically) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        horizontalArrangement = Arrangement.spacedBy(8.dp)
+                    ) {
                         Text("Scale: %.2f".format(scale))
-                        Spacer(Modifier.width(8.dp))
                         Button(onClick = { scale = density.density }) { Text("Reset") }
+                        Switcher(darkMode, text = "Dark Mode", onCheckStateChange = { darkMode = it })
                     }
                     Slider(
                         modifier = Modifier.width(200.dp),
@@ -99,17 +104,17 @@ private fun App() {
                                 modifier = Modifier.size(32.dp),
                                 shape = RoundedCornerShape(4.dp),
                                 cornerRadius = 4.dp,
-                                color = Colors.Fill.Accent.Default,
-                                border = BorderStroke(1.dp, Colors.Stroke.Control.Default),
+                                color = FluentTheme.colors.fillAccent.default,
+                                border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
                                 content = {},
                                 outsideBorder = false
                             )
                             Layer(
                                 modifier = Modifier.size(32.dp),
                                 shape = RoundedCornerShape(4.dp),
                                 cornerRadius = 4.dp,
-                                color = Colors.Fill.Accent.Default,
-                                border = BorderStroke(1.dp, Colors.Stroke.Control.Default),
+                                color = FluentTheme.colors.fillAccent.default,
+                                border = BorderStroke(1.dp, FluentTheme.colors.stroke.control.default),
                                 content = {},
                                 outsideBorder = true
                             )