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?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme(
colorScheme = darkColorScheme(
primary = AppColors.Primary,
onPrimary = Color.White,
primaryContainer = AppColors.Primary.copy(alpha = 0.3f),
onPrimaryContainer = Color.White,
secondary = AppColors.Secondary,
onSecondary = Color.White,
secondaryContainer = AppColors.Secondary.copy(alpha = 0.3f),
onSecondaryContainer = Color.White,
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
),
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
) {
NotesApp()
}
}
NotesAppTheme()
}
}
}
@Composable
fun NotesAppTheme(content: @Composable () -> Unit = { NotesApp() }) {
val context = LocalContext.current
val dataStoreManager = remember { DataStoreManager(context) }
var isDarkTheme by remember { mutableStateOf(true) }
// Load theme preference
LaunchedEffect(Unit) {
dataStoreManager.themeFlow.collect { theme ->
isDarkTheme = theme == "dark"
AppColors.setTheme(isDarkTheme)
}
}
// Create dynamic color scheme based on theme
val colorScheme = if (isDarkTheme) {
darkColorScheme(
primary = AppColors.Primary,
onPrimary = Color.White,
primaryContainer = AppColors.Primary.copy(alpha = 0.3f),
onPrimaryContainer = Color.White,
secondary = AppColors.Secondary,
onSecondary = Color.White,
secondaryContainer = AppColors.Secondary.copy(alpha = 0.3f),
onSecondaryContainer = Color.White,
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
)
} else {
lightColorScheme(
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
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.Color
object AppColors {
// Theme state
private var isDarkTheme by mutableStateOf(true)
// Primary Colors
val Primary = Color(0xFF6C63FF)
val Secondary = Color(0xFF03DAC6)
val Accent = Color(0xFFFF6B9D)
val Primary: Color
get() = if (isDarkTheme) Color(0xFF6C63FF) else Color(0xFF5A52D5)
val Secondary: Color
get() = if (isDarkTheme) Color(0xFF03DAC6) else Color(0xFF018786)
val Accent: Color
get() = if (isDarkTheme) Color(0xFFFF6B9D) else Color(0xFFE91E63)
// Background Colors
val Background = Color(0xFF121212)
val Surface = Color(0xFF1E1E1E)
val SurfaceVariant = Color(0xFF2A2A2A)
val SurfaceElevated = Color(0xFF252525)
val Background: Color
get() = if (isDarkTheme) Color(0xFF121212) else Color(0xFFFAFAFA)
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
val OnBackground = Color(0xFFE1E1E1)
val OnSurface = Color(0xFFCCCCCC)
val OnSurfaceVariant = Color(0xFF9E9E9E)
val OnSurfaceTertiary = Color(0xFF757575)
val OnBackground: Color
get() = if (isDarkTheme) Color(0xFFE1E1E1) else Color(0xFF1C1B1F)
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
val Error = Color(0xFFCF6679)
val Warning = Color(0xFFFFB74D)
val Success = Color(0xFF81C784)
val Info = Color(0xFF64B5F6)
val Error: Color
get() = if (isDarkTheme) Color(0xFFCF6679) else Color(0xFFB3261E)
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
val Border = Color(0xFF3A3A3A)
val Divider = Color(0xFF2E2E2E)
val Border: Color
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 {