Feature/theme changing

README.md

@@ -1,98 +1,3 @@
-# 🕒 klokk
-
-![buildStatus](https://img.shields.io/github/workflow/status/theapache64/kinetic-wall-clock/Java%20CI%20with%20Gradle?style=plastic)
-![latestVersion](https://img.shields.io/github/v/release/theapache64/kinetic-wall-clock)
-<a href="https://twitter.com/theapache64" target="_blank">
-<img alt="Twitter: theapache64" src="https://img.shields.io/twitter/follow/theapache64.svg?style=social" />
-</a>
-
-
-![](screenshot.png)
-
-
-> A kinetic wall clock, built using Compose Desktop.
-
-## 🔮 Demo
-
-![](demo.gif)
-
-- [Watch](https://youtu.be/ECNfa3L4U6s) full demo
-- [Watch](https://www.youtube.com/watch?v=lTsZOs_PkbM) Development - Behind the Scenes - Part 1
-- [Watch](https://www.youtube.com/watch?v=ejp9850FWy8) Development - Behind the Scenes - Part 2
-
-## 🏃 Run
-
-- Clone the repo and run `./gradlew run`
-
-## 💡 Inspiration
-
-- Nezih Yılmaz's kinetic countdown timer
-- A million times humans since 1982
-
-## ✍️ Author
-
-👤 **theapache64**
-
-* Twitter: <a href="https://twitter.com/theapache64" target="_blank">@theapache64</a>
-* Email: [email protected]
-
-Feel free to ping me 😉
-
-## 🤝 Contributing
-
-Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any
-contributions you make are **greatly appreciated**.
-
-1. Open an issue first to discuss what you would like to change.
-1. Fork the Project
-1. Create your feature branch (`git checkout -b feature/amazing-feature`)
-1. Commit your changes (`git commit -m 'Add some amazing feature'`)
-1. Push to the branch (`git push origin feature/amazing-feature`)
-1. Open a pull request
-
-Please make sure to update tests as appropriate.
-
-## ❤ Show your support
-
-Give a ⭐️ if this project helped you!
-
-<a href="https://www.patreon.com/theapache64">
-  <img alt="Patron Link" src="https://c5.patreon.com/external/logo/[email protected]" width="160"/>
-</a>
-
-<a href="https://www.buymeacoffee.com/theapache64" target="_blank">
-    <img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" width="160">
-</a>
-
-<a href="https://www.paypal.me/theapache64" target="_blank">
-    <img src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" alt="Donation" width="160">
-</a>
-
-## ☑️ TODO
-
-- [ ] Dark Theme Support
-- [ ] Wave Movement
-- [ ] Tornado Movement
-- [ ] Background Music
-- [x] Add second movement to border clocks
-- [ ] Add alphabets
-
-## 📝 License
-
-```
-Copyright © 2021 - theapache64
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-   http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-```
-
-_This README was generated by [readgen](https://github.com/theapache64/readgen)_ ❤
+# Dark/ Light Mode Feature 
+![image](https://github.com/devbasilinnia/klokk/assets/115192848/f35fe104-53e1-4453-9ebc-e7de3dc4da4a)
+![image](https://github.com/devbasilinnia/klokk/assets/115192848/29860ba5-ab7d-4ad3-ac39-52f02ab5ffae)

src/main/kotlin/com/theapache64/klokk/composable/BottomToolBar.kt

@@ -1,17 +1,25 @@
 package com.theapache64.klokk.composable
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
 import androidx.compose.material.OutlinedButton
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.DarkMode
+import androidx.compose.material.icons.outlined.LightMode
+import androidx.compose.material.icons.outlined.Mood
+import androidx.compose.material.icons.outlined.Paid
 import androidx.compose.material.icons.outlined.PlayArrow
+import androidx.compose.material.icons.outlined.Radar
 import androidx.compose.material.icons.outlined.Stop
 import androidx.compose.material.icons.outlined.Update
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -20,6 +28,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.theapache64.klokk.IS_DEBUG
 import com.theapache64.klokk.movement.core.Movement
+import com.theapache64.klokk.theme.KlokkTheme
 
 @Composable
 fun BottomToolBar(
@@ -31,6 +40,7 @@ fun BottomToolBar(
     onStopClicked: () -> Unit,
     onTextInputChanged: (String) -> Unit,
     modifier: Modifier = Modifier,
+    theme: MutableState<Boolean>,
 ) {
     Row(
         modifier = modifier
@@ -72,7 +82,8 @@ fun BottomToolBar(
 
         Row(
             modifier = Modifier.fillMaxWidth(),
-            horizontalArrangement = Arrangement.End
+            horizontalArrangement = Arrangement.End,
+            verticalAlignment = Alignment.CenterVertically
         ) {
 
             // TextField
@@ -85,15 +96,24 @@ fun BottomToolBar(
                     Text("Try some text here")
                 }
             )*/
-
             // Debug Info
             if (IS_DEBUG) {
                 Text(
                     text = "DEBUG: $activeMovement",
-                    color = Color.White,
                     textAlign = TextAlign.End
                 )
             }
+            IconButton(
+                onClick = {
+                    theme.value = !theme.value
+                }
+            ) {
+                if (theme.value) {
+                    Icon(imageVector = Icons.Outlined.LightMode, contentDescription = "light mode icon")
+                } else {
+                    Icon(imageVector = Icons.Outlined.DarkMode,contentDescription = "dark mode icon")
+                }
+            }
         }
     }
 }
@@ -111,7 +131,6 @@ private fun IconTextButton(
 
         Icon(
             imageVector = imageVector,
-            tint = Color.White,
             contentDescription = "ToolBar Icon",
             modifier = Modifier.padding(end = 10.dp)
         )

src/main/kotlin/com/theapache64/klokk/composable/Clock.kt

@@ -11,21 +11,17 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.size
 import androidx.compose.material.Button
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.MaterialTheme.colors
 import androidx.compose.material.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
-import com.theapache64.klokk.model.ClockData
-import com.theapache64.klokk.theme.CodGray
 import kotlin.math.cos
 import kotlin.math.sin
 
-
-private val NEEDLE_COLOR = Color.White
-val CLOCK_BACKGROUND = CodGray
-
 @Composable
 fun Clock(
     needleOneDegree: Float = 270f,
@@ -34,6 +30,8 @@ fun Clock(
     delay: Int = 0,
     easing: Easing = LinearEasing,
     modifier: Modifier = Modifier,
+    backgroundColor: Color = colors.background,
+    needleColor: Color =  colors.secondary
 ) {
 
     val needleOneRadian = (needleOneDegree * Math.PI / 180).toFloat()
@@ -60,21 +58,21 @@ fun Clock(
         val radius = size.minDimension / 2f
 
         drawCircle(
-            color = CLOCK_BACKGROUND,
+            color= backgroundColor,
             radius = radius
         )
 
         // To make the needle origin rounded.
         drawCircle(
-            color = NEEDLE_COLOR,
+            color= backgroundColor,
             radius = needleWidth * 0.487f
         )
 
         val radius2 = radius - 4
 
         // Needle One
         drawLine(
-            color = NEEDLE_COLOR,
+            color= needleColor,
             start = center,
             end = Offset(
                 // Finding end coordinate for the given radian
@@ -87,7 +85,7 @@ fun Clock(
 
         // Needle two
         drawLine(
-            color = NEEDLE_COLOR,
+            color= needleColor,
             start = center,
             end = Offset(
                 // Finding end coordinate for the given degree

src/main/kotlin/com/theapache64/klokk/main.kt

@@ -1,13 +1,11 @@
 package com.theapache64.klokk
 
 import androidx.compose.foundation.ExperimentalFoundationApi
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Window
 import androidx.compose.ui.window.application
@@ -16,7 +14,6 @@ import com.theapache64.klokk.composable.BottomToolBar
 import com.theapache64.klokk.composable.Clock
 import com.theapache64.klokk.movement.alphabet.TextMatrixGenerator
 import com.theapache64.klokk.movement.core.Movement
-import com.theapache64.klokk.theme.Black
 import com.theapache64.klokk.theme.KlokkTheme
 import kotlinx.coroutines.cancel
 import kotlinx.coroutines.delay
@@ -32,7 +29,6 @@ const val CLOCKS_CONTAINER_WIDTH = CLOCK_SIZE * COLUMNS
 const val CLOCKS_CONTAINER_HEIGHT = CLOCK_SIZE * ROWS
 const val ENJOY_TIME_IN_MILLIS = 1500L
 const val IS_DEBUG = true
-private val BACKGROUND_COLOR = Black
 
 @OptIn(ExperimentalComposeUiApi::class)
 @ExperimentalFoundationApi
@@ -53,6 +49,8 @@ fun main() = application {
         // To hold and control movement transition
         var activeMovement by remember { mutableStateOf<Movement>(Movement.StandBy) }
 
+        val themeState = remember { mutableStateOf(true) }
+
         // To control the auto playing animation
         var shouldPlayAutoAnim by remember { mutableStateOf(true) }
 
@@ -61,11 +59,10 @@ fun main() = application {
         // Generating degree matrix using the active movement
         val degreeMatrix = activeMovement.getMatrixGenerator().getVerifiedMatrix()
 
-        KlokkTheme {
+        KlokkTheme (isDark = themeState.value) {
             Column(
                 modifier = Modifier
-                    .fillMaxSize()
-                    .background(BACKGROUND_COLOR),
+                    .fillMaxSize(),
                 horizontalAlignment = Alignment.CenterHorizontally,
                 verticalArrangement = Arrangement.Center
             ) {
@@ -79,7 +76,7 @@ fun main() = application {
                                 needleOneDegree = clockData.degreeOne,
                                 needleTwoDegree = clockData.degreeTwo,
                                 durationInMillis = activeMovement.durationInMillis,
-                                modifier = Modifier.requiredSize(CLOCK_SIZE.dp)
+                                modifier = Modifier.requiredSize(CLOCK_SIZE.dp),
                             )
                         }
                     }
@@ -174,7 +171,8 @@ fun main() = application {
                     onStopClicked = {
                         shouldPlayAutoAnim = false
                         activeMovement = Movement.StandBy
-                    }
+                    },
+                    theme = themeState
                 )
             }
         }

src/main/kotlin/com/theapache64/klokk/theme/Theme.kt

@@ -7,14 +7,31 @@ import androidx.compose.material.lightColors
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
 
-val LightTheme = lightColors() // TODO :
+val LightTheme = lightColors(
+    primary = Color(0xFF2A2F4F),
+    secondary = Color(0xFF917FB3),
+    background = Color(0xFFE5BEEC),
+    surface = Color(0xFFFDE2F3),
+    onPrimary = Color.White,
+    onSecondary = Color.White,
+    onBackground = Color.Black,
+    onSurface = Color.Black,
+)
+
 val DarkTheme = darkColors(
-    primary = Color.White
+    primary = Color(0xFF1F6E8C),
+    secondary = Color(0xFF455A64),
+    background = Color(0xFF263238),
+    surface = Color(0xFF212121),
+    onPrimary = Color.White,
+    onSecondary = Color.White,
+    onBackground = Color.White,
+    onSurface = Color.White,
 )
 
 @Composable
 fun KlokkTheme(
-    isDark: Boolean = true,
+    isDark: Boolean = false,
     content: @Composable () -> Unit,
 ) {
     MaterialTheme(