Add a custom theme

Author: FabiPunktExe

composeApp/src/commonMain/kotlin/diruptio/aquarium/ui/App.kt

@@ -5,7 +5,12 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowUpward
-import androidx.compose.material3.*
+import androidx.compose.material3.Icon
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRow
+import androidx.compose.material3.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -14,11 +19,21 @@ import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.LocalLifecycleOwner
 import diruptio.aquarium.core.getPlatform
+import diruptio.aquarium.ui.component.Button
 import diruptio.verticallyspinningfish.VerticallySpinningFishApi
 import kotlinx.coroutines.cancel
 import kotlinx.coroutines.launch
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
+@Composable
+fun Providers(content: @Composable () -> Unit) {
+    MaterialTheme(colorScheme = appColorScheme, typography = appTypography) {
+        CompositionLocalProvider(LocalContentColor provides MaterialTheme.colorScheme.onSurface) {
+            content()
+        }
+    }
+}
+
 @Preview
 @Composable
 fun App() {
@@ -38,7 +53,7 @@ fun App() {
         }
     }
 
-    MaterialTheme {
+    Providers {
         Column(
             modifier = Modifier
                 .background(MaterialTheme.colorScheme.primaryContainer)

composeApp/src/commonMain/kotlin/diruptio/aquarium/ui/Theme.kt

@@ -0,0 +1,30 @@
+package diruptio.aquarium.ui
+
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
+
+val appColorScheme
+    @Composable get() = MaterialTheme.colorScheme.copy(
+        primary = Color(0xFFAA00DD),
+        onPrimary = Color(0xFFFFFFFF),
+        primaryContainer = Color(0xFF111122),
+        surface = Color(0xFF333355),
+        onSurface = Color(0xFFDDDDDD),
+        surfaceContainer = Color(0xFF333355),
+        outlineVariant = Color(0xFF888888))
+
+val appTypography
+    @Composable get() = MaterialTheme.typography.copy(
+        headlineLarge = MaterialTheme.typography.headlineLarge.copy(color = appColorScheme.onPrimary),
+        headlineMedium = MaterialTheme.typography.headlineMedium.copy(color = appColorScheme.onPrimary),
+        headlineSmall = MaterialTheme.typography.headlineSmall.copy(color = appColorScheme.onPrimary),
+        titleLarge = MaterialTheme.typography.titleLarge.copy(color = appColorScheme.onPrimary),
+        titleMedium = MaterialTheme.typography.titleMedium.copy(color = appColorScheme.onPrimary),
+        titleSmall = MaterialTheme.typography.titleSmall.copy(color = appColorScheme.onPrimary),
+        bodyLarge = MaterialTheme.typography.bodyLarge.copy(color = appColorScheme.onSurface),
+        bodyMedium = MaterialTheme.typography.bodyMedium.copy(color = appColorScheme.onSurface),
+        bodySmall = MaterialTheme.typography.bodySmall.copy(color = appColorScheme.onSurface),
+        labelLarge = MaterialTheme.typography.labelLarge.copy(color = appColorScheme.onPrimary),
+        labelMedium = MaterialTheme.typography.labelMedium.copy(color = appColorScheme.onPrimary),
+        labelSmall = MaterialTheme.typography.labelSmall.copy(color = appColorScheme.onPrimary))

composeApp/src/commonMain/kotlin/diruptio/aquarium/ui/component/StatusChip.kt

@@ -21,6 +21,10 @@ fun StatusChip(status: Status) {
             Status.UNAVAILABLE -> Color(0xFFDDDD66)
         }
     ) {
-        Text(status.name, Modifier.padding(4.dp, 0.dp))
+        Text(
+            text = status.name,
+            modifier = Modifier.padding(4.dp, 0.dp),
+            color = MaterialTheme.colorScheme.primaryContainer,
+            style = MaterialTheme.typography.labelLarge)
     }
 }