💄 Additional basic settings

composeApp/src/commonMain/kotlin/com/clipevery/ui/SettingsUI.kt

@@ -18,6 +18,7 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Icon
+import androidx.compose.material.Switch
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -57,7 +58,7 @@ fun SettingsUI(currentPage: MutableState<PageType>) {
 @Composable
 fun SettingsContentUI(currentPage: MutableState<PageType>) {
     val current = LocalKoinApplication.current
-    val copywriter by remember { mutableStateOf(current.koin.get<GlobalCopywriter>()) }
+    val copywriter = current.koin.get<GlobalCopywriter>()
     var hasBeenClicked by remember { mutableStateOf(false) }
     var showMoreLanguage by remember { mutableStateOf(false) }
 
@@ -88,7 +89,7 @@ fun SettingsContentUI(currentPage: MutableState<PageType>) {
 
 
     Column(modifier = Modifier.fillMaxSize()) {
-        Row(modifier = Modifier.fillMaxWidth().padding(25.dp, 10.dp, 0.dp, 10.dp),
+        Row(modifier = Modifier.fillMaxWidth().padding(25.dp, 5.dp, 0.dp, 5.dp),
             verticalAlignment = Alignment.CenterVertically) {
             Text(text = "${copywriter.getText("Language")}:",
                 fontSize = 14.sp,
@@ -162,6 +163,50 @@ fun SettingsContentUI(currentPage: MutableState<PageType>) {
                 }
             }
         }
+
+        Row(modifier = Modifier.fillMaxWidth().padding(25.dp, 5.dp, 0.dp, 5.dp),
+            verticalAlignment = Alignment.CenterVertically) {
+            Text(text = "${copywriter.getText("Theme")}:",
+                fontSize = 14.sp,
+                fontFamily = FontFamily.SansSerif,
+                style = TextStyle(fontWeight = FontWeight.Light))
+            Row(Modifier.padding(5.dp, 0.dp, 0.dp, 0.dp)) {
+                ThemeSegmentedControl()
+            }
+        }
+
+        Row(modifier = Modifier.fillMaxWidth().height(40.dp).padding(20.dp, 5.dp, 0.dp, 5.dp),
+            verticalAlignment = Alignment.CenterVertically) {
+            var isChecked by remember { mutableStateOf(false) }
+            // TODO: Boot_start_up
+            Switch(
+                checked = isChecked,
+                onCheckedChange = { isChecked = it }
+            )
+
+            Text(text = copywriter.getText("Boot_start_up"),
+                fontSize = 14.sp,
+                fontFamily = FontFamily.SansSerif,
+                style = TextStyle(fontWeight = FontWeight.Light))
+        }
+
+        Row(modifier = Modifier.fillMaxWidth().height(40.dp).padding(20.dp, 5.dp, 0.dp, 5.dp),
+            verticalAlignment = Alignment.CenterVertically) {
+            var isChecked by remember { mutableStateOf(false) }
+            // TODO: AutomaticUpdate
+            Switch(
+                checked = isChecked,
+                onCheckedChange = { isChecked = it }
+            )
+
+            Text(text = copywriter.getText("AutomaticUpdate"),
+                fontSize = 14.sp,
+                fontFamily = FontFamily.SansSerif,
+                style = TextStyle(fontWeight = FontWeight.Light))
+        }
+
+        Spacer(modifier = Modifier.height(10.dp))
+
         SettingsItemUI("Network") {
             Row(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
                 Text(

composeApp/src/commonMain/kotlin/com/clipevery/ui/ThemeSegmentedControl.kt

@@ -0,0 +1,91 @@
+package com.clipevery.ui
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Button
+import androidx.compose.material.ButtonDefaults
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.clipevery.LocalKoinApplication
+import com.clipevery.i18n.GlobalCopywriter
+
+@Composable
+fun ThemeSegmentedControl() {
+    val current = LocalKoinApplication.current
+    val copywriter = current.koin.get<GlobalCopywriter>()
+    val selectedOption = remember { mutableStateOf("System") }
+
+    Row(verticalAlignment = Alignment.CenterVertically) {
+        // Light Button
+        Button(
+            modifier = Modifier.height(28.dp),
+            onClick = { selectedOption.value = "Light" },
+            // Apply the shape only to the left side for the first button
+            shape = RoundedCornerShape(topStart = 4.dp, bottomStart = 4.dp, topEnd = 0.dp, bottomEnd = 0.dp),
+            // Change the background and content colors based on selection
+            colors = if (selectedOption.value == "Light") ButtonDefaults.buttonColors(backgroundColor = Color(0xff1672ff))
+            else ButtonDefaults.buttonColors(backgroundColor = Color.White),
+            border = BorderStroke(1.dp, Color(0xFFAFCBE1)),
+            contentPadding = PaddingValues(horizontal = 8.dp, vertical = 0.dp),
+            elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp, hoveredElevation = 0.dp, focusedElevation = 0.dp)
+            ) {
+            Text(copywriter.getText("Light"),
+                fontSize = 14.sp,
+                fontFamily = FontFamily.SansSerif,
+                style = TextStyle(fontWeight = FontWeight.Light),
+                color = if (selectedOption.value == "Light") Color.White else Color.Black)
+        }
+
+        // System Button
+        Button(
+            modifier = Modifier.height(28.dp).offset(x = (-1).dp),
+            onClick = { selectedOption.value = "System" },
+            // No shape for the middle button to keep it rectangular
+            shape = RoundedCornerShape(0.dp),
+            colors = if (selectedOption.value == "System") ButtonDefaults.buttonColors(backgroundColor = Color(0xff1672ff))
+            else ButtonDefaults.buttonColors(backgroundColor = Color.White),
+            border = BorderStroke(1.dp, Color(0xFFAFCBE1)),
+            contentPadding = PaddingValues(horizontal = 8.dp, vertical = 0.dp),
+            elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp, hoveredElevation = 0.dp, focusedElevation = 0.dp)
+        ) {
+            Text(copywriter.getText("System"),
+                fontSize = 14.sp,
+                fontFamily = FontFamily.SansSerif,
+                style = TextStyle(fontWeight = FontWeight.Light),
+                color = if (selectedOption.value == "System") Color.White else Color.Black)
+        }
+
+        // Dark Button
+        Button(
+            modifier = Modifier.height(28.dp).offset(x = (-2).dp),
+            onClick = { selectedOption.value = "Dark" },
+            // Apply the shape only to the right side for the last button
+            shape = RoundedCornerShape(topStart = 0.dp, bottomStart = 0.dp, topEnd = 4.dp, bottomEnd = 4.dp),
+            colors = if (selectedOption.value == "Dark") ButtonDefaults.buttonColors(backgroundColor = Color(0xff1672ff))
+            else ButtonDefaults.buttonColors(backgroundColor = Color.White),
+            border = BorderStroke(1.dp, Color(0xFFAFCBE1)),
+            contentPadding = PaddingValues(horizontal = 8.dp, vertical = 0.dp),
+            elevation = ButtonDefaults.elevation(defaultElevation = 0.dp, pressedElevation = 0.dp, hoveredElevation = 0.dp, focusedElevation = 0.dp)
+        ) {
+            Text(copywriter.getText("Dark"),
+                fontSize = 14.sp,
+                fontFamily = FontFamily.SansSerif,
+                style = TextStyle(fontWeight = FontWeight.Light),
+                color = if (selectedOption.value == "Dark") Color.White else Color.Black)
+        }
+    }
+}

composeApp/src/desktopMain/resources/i18n/en.properties

@@ -9,6 +9,12 @@ FQA=FQA↗
 Quit=Quit
 Return=Return
 Language=Language
+Theme=Theme
+Light=Light
+System=System
+Dark=Dark
+Boot_start_up=Boot start up
+AutomaticUpdate=Automatic update
 CurrentLanguage=English
 Network=Network
 Store=Store

composeApp/src/desktopMain/resources/i18n/es.properties

@@ -9,6 +9,12 @@ FQA=Preguntas frecuentes↗
 Quit=Salir
 Return=Volver
 Language=Idioma
+Theme=Tema
+Light=Claro
+System=Sistema
+Dark=Oscuro
+Boot_start_up=Inicio de arranque
+AutomaticUpdate=Actualización automática
 CurrentLanguage=Español
 Network=Red
 Store=Tienda

composeApp/src/desktopMain/resources/i18n/jp.properties

@@ -9,6 +9,12 @@ FQA=よくある問題↗
 Quit=終了
 Return=戻る
 Language=言語
+Theme=テーマ
+Light=明色
+System=システム
+Dark=暗い
+Boot_start_up=起動時に開始
+AutomaticUpdate=自動更新
 CurrentLanguage=日本語
 Network=ネットワーク
 Store=ストア

composeApp/src/desktopMain/resources/i18n/zh.properties

@@ -9,6 +9,12 @@ FQA=常见问题↗
 Quit=退出
 Return=返回
 Language=语言
+Theme=主题
+Light=浅色
+System=系统
+Dark=深色
+Boot_start_up=开机启动
+AutomaticUpdate=自动更新
 CurrentLanguage=简体中文
 Network=网络
 Store=存储