Skip to content

Commit 3c0a763

Browse files
basilinniabasilinnia
authored
Merge pull request #3 from basilinnia/feature/theme-changing
1 parent 6a8b30f commit 3c0a763

File tree

4 files changed

+58
-26
lines changed

4 files changed

+58
-26
lines changed

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
package com.theapache64.klokk.composable
22

3+
import androidx.compose.foundation.background
34
import androidx.compose.foundation.layout.Arrangement
45
import androidx.compose.foundation.layout.Row
56
import androidx.compose.foundation.layout.fillMaxWidth
67
import androidx.compose.foundation.layout.padding
78
import androidx.compose.material.Icon
9+
import androidx.compose.material.IconButton
810
import androidx.compose.material.OutlinedButton
911
import androidx.compose.material.Text
1012
import androidx.compose.material.icons.Icons
13+
import androidx.compose.material.icons.outlined.DarkMode
14+
import androidx.compose.material.icons.outlined.LightMode
15+
import androidx.compose.material.icons.outlined.Mood
16+
import androidx.compose.material.icons.outlined.Paid
1117
import androidx.compose.material.icons.outlined.PlayArrow
18+
import androidx.compose.material.icons.outlined.Radar
1219
import androidx.compose.material.icons.outlined.Stop
1320
import androidx.compose.material.icons.outlined.Update
1421
import androidx.compose.runtime.Composable
22+
import androidx.compose.runtime.MutableState
1523
import androidx.compose.ui.Alignment
1624
import androidx.compose.ui.Modifier
1725
import androidx.compose.ui.graphics.Color
@@ -20,6 +28,7 @@ import androidx.compose.ui.text.style.TextAlign
2028
import androidx.compose.ui.unit.dp
2129
import com.theapache64.klokk.IS_DEBUG
2230
import com.theapache64.klokk.movement.core.Movement
31+
import com.theapache64.klokk.theme.KlokkTheme
2332

2433
@Composable
2534
fun BottomToolBar(
@@ -31,6 +40,7 @@ fun BottomToolBar(
3140
onStopClicked: () -> Unit,
3241
onTextInputChanged: (String) -> Unit,
3342
modifier: Modifier = Modifier,
43+
theme: MutableState<Boolean>,
3444
) {
3545
Row(
3646
modifier = modifier
@@ -72,7 +82,8 @@ fun BottomToolBar(
7282

7383
Row(
7484
modifier = Modifier.fillMaxWidth(),
75-
horizontalArrangement = Arrangement.End
85+
horizontalArrangement = Arrangement.End,
86+
verticalAlignment = Alignment.CenterVertically
7687
) {
7788

7889
// TextField
@@ -85,15 +96,24 @@ fun BottomToolBar(
8596
Text("Try some text here")
8697
}
8798
)*/
88-
8999
// Debug Info
90100
if (IS_DEBUG) {
91101
Text(
92102
text = "DEBUG: $activeMovement",
93-
color = Color.White,
94103
textAlign = TextAlign.End
95104
)
96105
}
106+
IconButton(
107+
onClick = {
108+
theme.value = !theme.value
109+
}
110+
) {
111+
if (theme.value) {
112+
Icon(imageVector = Icons.Outlined.LightMode, contentDescription = "light mode icon")
113+
} else {
114+
Icon(imageVector = Icons.Outlined.DarkMode,contentDescription = "dark mode icon")
115+
}
116+
}
97117
}
98118
}
99119
}
@@ -111,7 +131,6 @@ private fun IconTextButton(
111131

112132
Icon(
113133
imageVector = imageVector,
114-
tint = Color.White,
115134
contentDescription = "ToolBar Icon",
116135
modifier = Modifier.padding(end = 10.dp)
117136
)

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

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,17 @@ import androidx.compose.foundation.layout.Box
1111
import androidx.compose.foundation.layout.fillMaxSize
1212
import androidx.compose.foundation.layout.size
1313
import androidx.compose.material.Button
14+
import androidx.compose.material.MaterialTheme
15+
import androidx.compose.material.MaterialTheme.colors
1416
import androidx.compose.material.Text
1517
import androidx.compose.runtime.*
1618
import androidx.compose.ui.Modifier
1719
import androidx.compose.ui.geometry.Offset
1820
import androidx.compose.ui.graphics.Color
1921
import androidx.compose.ui.unit.dp
20-
import com.theapache64.klokk.model.ClockData
21-
import com.theapache64.klokk.theme.CodGray
2222
import kotlin.math.cos
2323
import kotlin.math.sin
2424

25-
26-
private val NEEDLE_COLOR = Color.White
27-
val CLOCK_BACKGROUND = CodGray
28-
2925
@Composable
3026
fun Clock(
3127
needleOneDegree: Float = 270f,
@@ -34,6 +30,8 @@ fun Clock(
3430
delay: Int = 0,
3531
easing: Easing = LinearEasing,
3632
modifier: Modifier = Modifier,
33+
backgroundColor: Color = colors.background,
34+
needleColor: Color = colors.secondary
3735
) {
3836

3937
val needleOneRadian = (needleOneDegree * Math.PI / 180).toFloat()
@@ -60,21 +58,21 @@ fun Clock(
6058
val radius = size.minDimension / 2f
6159

6260
drawCircle(
63-
color = CLOCK_BACKGROUND,
61+
color= backgroundColor,
6462
radius = radius
6563
)
6664

6765
// To make the needle origin rounded.
6866
drawCircle(
69-
color = NEEDLE_COLOR,
67+
color= backgroundColor,
7068
radius = needleWidth * 0.487f
7169
)
7270

7371
val radius2 = radius - 4
7472

7573
// Needle One
7674
drawLine(
77-
color = NEEDLE_COLOR,
75+
color= needleColor,
7876
start = center,
7977
end = Offset(
8078
// Finding end coordinate for the given radian
@@ -87,7 +85,7 @@ fun Clock(
8785

8886
// Needle two
8987
drawLine(
90-
color = NEEDLE_COLOR,
88+
color= needleColor,
9189
start = center,
9290
end = Offset(
9391
// Finding end coordinate for the given degree

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
package com.theapache64.klokk
22

33
import androidx.compose.foundation.ExperimentalFoundationApi
4-
import androidx.compose.foundation.background
54
import androidx.compose.foundation.layout.*
65
import androidx.compose.runtime.*
76
import androidx.compose.ui.Alignment
87
import androidx.compose.ui.ExperimentalComposeUiApi
98
import androidx.compose.ui.Modifier
10-
import androidx.compose.ui.unit.IntSize
119
import androidx.compose.ui.unit.dp
1210
import androidx.compose.ui.window.Window
1311
import androidx.compose.ui.window.application
@@ -16,7 +14,6 @@ import com.theapache64.klokk.composable.BottomToolBar
1614
import com.theapache64.klokk.composable.Clock
1715
import com.theapache64.klokk.movement.alphabet.TextMatrixGenerator
1816
import com.theapache64.klokk.movement.core.Movement
19-
import com.theapache64.klokk.theme.Black
2017
import com.theapache64.klokk.theme.KlokkTheme
2118
import kotlinx.coroutines.cancel
2219
import kotlinx.coroutines.delay
@@ -32,7 +29,6 @@ const val CLOCKS_CONTAINER_WIDTH = CLOCK_SIZE * COLUMNS
3229
const val CLOCKS_CONTAINER_HEIGHT = CLOCK_SIZE * ROWS
3330
const val ENJOY_TIME_IN_MILLIS = 1500L
3431
const val IS_DEBUG = true
35-
private val BACKGROUND_COLOR = Black
3632

3733
@OptIn(ExperimentalComposeUiApi::class)
3834
@ExperimentalFoundationApi
@@ -53,6 +49,8 @@ fun main() = application {
5349
// To hold and control movement transition
5450
var activeMovement by remember { mutableStateOf<Movement>(Movement.StandBy) }
5551

52+
val themeState = remember { mutableStateOf(true) }
53+
5654
// To control the auto playing animation
5755
var shouldPlayAutoAnim by remember { mutableStateOf(true) }
5856

@@ -61,11 +59,10 @@ fun main() = application {
6159
// Generating degree matrix using the active movement
6260
val degreeMatrix = activeMovement.getMatrixGenerator().getVerifiedMatrix()
6361

64-
KlokkTheme {
62+
KlokkTheme (isDark = themeState.value) {
6563
Column(
6664
modifier = Modifier
67-
.fillMaxSize()
68-
.background(BACKGROUND_COLOR),
65+
.fillMaxSize(),
6966
horizontalAlignment = Alignment.CenterHorizontally,
7067
verticalArrangement = Arrangement.Center
7168
) {
@@ -79,7 +76,7 @@ fun main() = application {
7976
needleOneDegree = clockData.degreeOne,
8077
needleTwoDegree = clockData.degreeTwo,
8178
durationInMillis = activeMovement.durationInMillis,
82-
modifier = Modifier.requiredSize(CLOCK_SIZE.dp)
79+
modifier = Modifier.requiredSize(CLOCK_SIZE.dp),
8380
)
8481
}
8582
}
@@ -174,7 +171,8 @@ fun main() = application {
174171
onStopClicked = {
175172
shouldPlayAutoAnim = false
176173
activeMovement = Movement.StandBy
177-
}
174+
},
175+
theme = themeState
178176
)
179177
}
180178
}

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

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,31 @@ import androidx.compose.material.lightColors
77
import androidx.compose.runtime.Composable
88
import androidx.compose.ui.graphics.Color
99

10-
val LightTheme = lightColors() // TODO :
10+
val LightTheme = lightColors(
11+
primary = Color(0xFF2A2F4F),
12+
secondary = Color(0xFF917FB3),
13+
background = Color(0xFFE5BEEC),
14+
surface = Color(0xFFFDE2F3),
15+
onPrimary = Color.White,
16+
onSecondary = Color.White,
17+
onBackground = Color.Black,
18+
onSurface = Color.Black,
19+
)
20+
1121
val DarkTheme = darkColors(
12-
primary = Color.White
22+
primary = Color(0xFF1F6E8C),
23+
secondary = Color(0xFF455A64),
24+
background = Color(0xFF263238),
25+
surface = Color(0xFF212121),
26+
onPrimary = Color.White,
27+
onSecondary = Color.White,
28+
onBackground = Color.White,
29+
onSurface = Color.White,
1330
)
1431

1532
@Composable
1633
fun KlokkTheme(
17-
isDark: Boolean = true,
34+
isDark: Boolean = false,
1835
content: @Composable () -> Unit,
1936
) {
2037
MaterialTheme(

0 commit comments

Comments
 (0)