Perbaikan Light Mode Toggle

This commit is contained in:
202310715297 RAIHAN ARIQ MUZAKKI 2025-12-24 08:51:18 +07:00
parent bf50a794af
commit 19cb4f1c80
2 changed files with 150 additions and 66 deletions

View File

@ -40,52 +40,95 @@ class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
setContent { setContent {
MaterialTheme( NotesAppTheme()
colorScheme = darkColorScheme( }
primary = AppColors.Primary, }
onPrimary = Color.White, }
primaryContainer = AppColors.Primary.copy(alpha = 0.3f),
onPrimaryContainer = Color.White, @Composable
secondary = AppColors.Secondary, fun NotesAppTheme(content: @Composable () -> Unit = { NotesApp() }) {
onSecondary = Color.White, val context = LocalContext.current
secondaryContainer = AppColors.Secondary.copy(alpha = 0.3f), val dataStoreManager = remember { DataStoreManager(context) }
onSecondaryContainer = Color.White, var isDarkTheme by remember { mutableStateOf(true) }
background = AppColors.Background,
onBackground = AppColors.OnBackground, // Load theme preference
surface = AppColors.Surface, LaunchedEffect(Unit) {
onSurface = AppColors.OnSurface, dataStoreManager.themeFlow.collect { theme ->
surfaceVariant = AppColors.SurfaceVariant, isDarkTheme = theme == "dark"
onSurfaceVariant = AppColors.OnSurfaceVariant, AppColors.setTheme(isDarkTheme)
error = AppColors.Error, }
onError = Color.White, }
outline = AppColors.Border,
outlineVariant = AppColors.Divider // Create dynamic color scheme based on theme
), val colorScheme = if (isDarkTheme) {
typography = Typography( darkColorScheme(
displayLarge = MaterialTheme.typography.displayLarge.copy( primary = AppColors.Primary,
fontWeight = FontWeight.Bold onPrimary = Color.White,
), primaryContainer = AppColors.Primary.copy(alpha = 0.3f),
headlineLarge = MaterialTheme.typography.headlineLarge.copy( onPrimaryContainer = Color.White,
fontWeight = FontWeight.Bold secondary = AppColors.Secondary,
), onSecondary = Color.White,
titleLarge = MaterialTheme.typography.titleLarge.copy( secondaryContainer = AppColors.Secondary.copy(alpha = 0.3f),
fontWeight = FontWeight.SemiBold onSecondaryContainer = Color.White,
), background = AppColors.Background,
bodyLarge = MaterialTheme.typography.bodyLarge.copy( onBackground = AppColors.OnBackground,
lineHeight = 24.sp surface = AppColors.Surface,
), onSurface = AppColors.OnSurface,
bodyMedium = MaterialTheme.typography.bodyMedium.copy( surfaceVariant = AppColors.SurfaceVariant,
lineHeight = 20.sp onSurfaceVariant = AppColors.OnSurfaceVariant,
) error = AppColors.Error,
) onError = Color.White,
) { outline = AppColors.Border,
Surface( outlineVariant = AppColors.Divider
modifier = Modifier.fillMaxSize(), )
color = MaterialTheme.colorScheme.background } else {
) { lightColorScheme(
NotesApp() primary = AppColors.Primary,
} onPrimary = Color.White,
} primaryContainer = AppColors.Primary.copy(alpha = 0.1f),
onPrimaryContainer = AppColors.Primary,
secondary = AppColors.Secondary,
onSecondary = Color.White,
secondaryContainer = AppColors.Secondary.copy(alpha = 0.1f),
onSecondaryContainer = AppColors.Secondary,
background = AppColors.Background,
onBackground = AppColors.OnBackground,
surface = AppColors.Surface,
onSurface = AppColors.OnSurface,
surfaceVariant = AppColors.SurfaceVariant,
onSurfaceVariant = AppColors.OnSurfaceVariant,
error = AppColors.Error,
onError = Color.White,
outline = AppColors.Border,
outlineVariant = AppColors.Divider
)
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography(
displayLarge = MaterialTheme.typography.displayLarge.copy(
fontWeight = FontWeight.Bold
),
headlineLarge = MaterialTheme.typography.headlineLarge.copy(
fontWeight = FontWeight.Bold
),
titleLarge = MaterialTheme.typography.titleLarge.copy(
fontWeight = FontWeight.SemiBold
),
bodyLarge = MaterialTheme.typography.bodyLarge.copy(
lineHeight = 24.sp
),
bodyMedium = MaterialTheme.typography.bodyMedium.copy(
lineHeight = 20.sp
)
)
) {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
content()
} }
} }
} }
@ -529,6 +572,4 @@ fun NotesApp() {
) )
} }
} }
} }
private fun AppColors.setTheme(darkTheme: Boolean) {}

View File

@ -1,34 +1,77 @@
package com.example.notesai.util package com.example.notesai.util
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
object AppColors { object AppColors {
// Theme state
private var isDarkTheme by mutableStateOf(true)
// Primary Colors // Primary Colors
val Primary = Color(0xFF6C63FF) val Primary: Color
val Secondary = Color(0xFF03DAC6) get() = if (isDarkTheme) Color(0xFF6C63FF) else Color(0xFF5A52D5)
val Accent = Color(0xFFFF6B9D)
val Secondary: Color
get() = if (isDarkTheme) Color(0xFF03DAC6) else Color(0xFF018786)
val Accent: Color
get() = if (isDarkTheme) Color(0xFFFF6B9D) else Color(0xFFE91E63)
// Background Colors // Background Colors
val Background = Color(0xFF121212) val Background: Color
val Surface = Color(0xFF1E1E1E) get() = if (isDarkTheme) Color(0xFF121212) else Color(0xFFFAFAFA)
val SurfaceVariant = Color(0xFF2A2A2A)
val SurfaceElevated = Color(0xFF252525) val Surface: Color
get() = if (isDarkTheme) Color(0xFF1E1E1E) else Color(0xFFFFFFFF)
val SurfaceVariant: Color
get() = if (isDarkTheme) Color(0xFF2A2A2A) else Color(0xFFF5F5F5)
val SurfaceElevated: Color
get() = if (isDarkTheme) Color(0xFF252525) else Color(0xFFFFFFFF)
// Text Colors // Text Colors
val OnBackground = Color(0xFFE1E1E1) val OnBackground: Color
val OnSurface = Color(0xFFCCCCCC) get() = if (isDarkTheme) Color(0xFFE1E1E1) else Color(0xFF1C1B1F)
val OnSurfaceVariant = Color(0xFF9E9E9E)
val OnSurfaceTertiary = Color(0xFF757575) val OnSurface: Color
get() = if (isDarkTheme) Color(0xFFCCCCCC) else Color(0xFF1C1B1F)
val OnSurfaceVariant: Color
get() = if (isDarkTheme) Color(0xFF9E9E9E) else Color(0xFF49454F)
val OnSurfaceTertiary: Color
get() = if (isDarkTheme) Color(0xFF757575) else Color(0xFF79747E)
// Utility Colors // Utility Colors
val Error = Color(0xFFCF6679) val Error: Color
val Warning = Color(0xFFFFB74D) get() = if (isDarkTheme) Color(0xFFCF6679) else Color(0xFFB3261E)
val Success = Color(0xFF81C784)
val Info = Color(0xFF64B5F6) val Warning: Color
get() = if (isDarkTheme) Color(0xFFFFB74D) else Color(0xFFF57C00)
val Success: Color
get() = if (isDarkTheme) Color(0xFF81C784) else Color(0xFF388E3C)
val Info: Color
get() = if (isDarkTheme) Color(0xFF64B5F6) else Color(0xFF1976D2)
// Border & Divider // Border & Divider
val Border = Color(0xFF3A3A3A) val Border: Color
val Divider = Color(0xFF2E2E2E) get() = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE0E0E0)
val Divider: Color
get() = if (isDarkTheme) Color(0xFF2E2E2E) else Color(0xFFE0E0E0)
// Function to update theme
fun setTheme(darkTheme: Boolean) {
isDarkTheme = darkTheme
}
// Get current theme state
fun isDark(): Boolean = isDarkTheme
} }
object Constants { object Constants {