Skip to content

Commit

Permalink
rest of custom theme
Browse files Browse the repository at this point in the history
  • Loading branch information
LuftVerbot committed Jul 18, 2024
1 parent ef89764 commit 9047051
Show file tree
Hide file tree
Showing 7 changed files with 290 additions and 60 deletions.
14 changes: 1 addition & 13 deletions app/src/main/java/eu/kanade/domain/ui/UiPreferences.kt
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
package eu.kanade.domain.ui

import android.os.Build
import androidx.compose.ui.graphics.toArgb
import eu.kanade.domain.ui.model.AppTheme
import eu.kanade.domain.ui.model.NavStyle
import eu.kanade.domain.ui.model.StartScreen
import eu.kanade.domain.ui.model.TabletUiMode
import eu.kanade.domain.ui.model.ThemeMode
import eu.kanade.presentation.theme.colorscheme.BaseColorScheme
import eu.kanade.presentation.theme.colorscheme.CloudflareColorScheme
import eu.kanade.presentation.theme.colorscheme.TachiyomiColorScheme
import eu.kanade.tachiyomi.util.system.DeviceUtil
import eu.kanade.tachiyomi.util.system.isDynamicColorAvailable
import tachiyomi.core.common.preference.PreferenceStore
Expand All @@ -29,15 +25,7 @@ class UiPreferences(
if (DeviceUtil.isDynamicColorAvailable) { AppTheme.MONET } else { AppTheme.DEFAULT },
)

fun colorTheme() = preferenceStore.getInt(
"pref_color-theme",
if(themeMode().get() == ThemeMode.DARK) { TachiyomiColorScheme.darkScheme.primary.toArgb() } else {TachiyomiColorScheme.lightScheme.primary.toArgb() }
)

fun colorPickerCoordinates() = preferenceStore.getString(
"color_picker_coordinates",
""
)
fun colorTheme() = preferenceStore.getInt("pref_color_theme", 0)

fun themeDarkAmoled() = preferenceStore.getBoolean("pref_theme_dark_amoled_key", false)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,14 @@ package eu.kanade.presentation.more.settings.screen

import android.app.Activity
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.core.app.ActivityCompat
import cafe.adriel.voyager.navigator.LocalNavigator
import cafe.adriel.voyager.navigator.currentOrThrow
import com.github.skydoves.colorpicker.compose.ColorEnvelope
import com.github.skydoves.colorpicker.compose.HsvColorPicker
import com.github.skydoves.colorpicker.compose.rememberColorPickerController
import eu.kanade.domain.ui.UiPreferences
import eu.kanade.domain.ui.model.AppTheme
import eu.kanade.domain.ui.model.NavStyle
Expand All @@ -27,12 +18,11 @@ import eu.kanade.domain.ui.model.TabletUiMode
import eu.kanade.domain.ui.model.ThemeMode
import eu.kanade.domain.ui.model.setAppCompatDelegateThemeMode
import eu.kanade.presentation.more.settings.Preference
import eu.kanade.presentation.more.settings.screen.appearance.AppCustomThemeColorPickerScreen
import eu.kanade.presentation.more.settings.screen.appearance.AppLanguageScreen
import eu.kanade.presentation.more.settings.widget.AppThemeModePreferenceWidget
import eu.kanade.presentation.more.settings.widget.AppThemePreferenceWidget
import eu.kanade.presentation.more.settings.widget.ThemeColorPickerWidget
import eu.kanade.tachiyomi.util.system.toast
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
import kotlinx.collections.immutable.toImmutableMap
import tachiyomi.core.common.i18n.stringResource
Expand Down Expand Up @@ -64,34 +54,25 @@ object SettingsAppearanceScreen : SearchableSettings {
uiPreferences: UiPreferences,
): Preference.PreferenceGroup {
val context = LocalContext.current
val controller = rememberColorPickerController()
val navigator = LocalNavigator.currentOrThrow

val themeModePref = uiPreferences.themeMode()
val themeMode by themeModePref.collectAsState()

val appThemePref = uiPreferences.appTheme()
val appTheme by appThemePref.collectAsState()

val customColorPref = uiPreferences.colorTheme()
val customColor by customColorPref.collectAsState()

val amoledPref = uiPreferences.themeDarkAmoled()
val amoled by amoledPref.collectAsState()

val customPreferenceItem = if (appTheme == AppTheme.CUSTOM) {
listOf(Preference.PreferenceItem.CustomPreference(
title = stringResource(MR.strings.pref_custom_color),
) {
Column {
ThemeColorPickerWidget(
value = controller.selectedPoint.value,
controller = controller,
onItemClick = { color ->
customColorPref.set(color)
}
)
}
})
listOf(
Preference.PreferenceItem.TextPreference(
title = stringResource(MR.strings.pref_custom_color),
subtitle = stringResource(MR.strings.custom_color_description),
onClick = { navigator.push(AppCustomThemeColorPickerScreen()) },
),
)
} else {
emptyList()
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
package eu.kanade.presentation.more.settings.screen.appearance

import android.app.Activity
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.core.app.ActivityCompat
import cafe.adriel.voyager.navigator.LocalNavigator
import cafe.adriel.voyager.navigator.currentOrThrow
import com.github.skydoves.colorpicker.compose.rememberColorPickerController
import eu.kanade.domain.ui.UiPreferences
import eu.kanade.presentation.components.AppBar
import eu.kanade.presentation.more.settings.widget.ThemeColorPickerWidget
import eu.kanade.presentation.util.Screen
import tachiyomi.i18n.MR
import tachiyomi.presentation.core.components.material.Scaffold
import tachiyomi.presentation.core.i18n.stringResource
import tachiyomi.presentation.core.util.collectAsState
import uy.kohesive.injekt.Injekt
import uy.kohesive.injekt.api.get

class AppCustomThemeColorPickerScreen : Screen() {

@Composable
override fun Content() {
val uiPreferences: UiPreferences = Injekt.get()

val context = LocalContext.current
val navigator = LocalNavigator.currentOrThrow
val controller = rememberColorPickerController()

val customColorPref = uiPreferences.colorTheme()
val customColor by customColorPref.collectAsState()

val appThemePref = uiPreferences.appTheme()

val currentColor by remember {
mutableIntStateOf(customColor)
}

LaunchedEffect(customColorPref) {
customColorPref.set(currentColor)
}

Scaffold(
topBar = { scrollBehavior ->
AppBar(
title = stringResource(MR.strings.pref_custom_color),
navigateUp = navigator::pop,
scrollBehavior = scrollBehavior,
)
},
) { contentPadding ->
Column(
modifier = Modifier.padding(contentPadding),
) {
ThemeColorPickerWidget(
controller = controller,
initialColor = Color(currentColor),
onItemClick = { color, appTheme ->
customColorPref.set(color.toArgb())
appThemePref.set(appTheme)
(context as? Activity)?.let { ActivityCompat.recreate(it) }
},
)
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
package eu.kanade.presentation.more.settings.widget

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Canvas
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.ImageBitmapConfig
import androidx.compose.ui.graphics.LinearGradientShader
import androidx.compose.ui.graphics.Paint
import androidx.compose.ui.graphics.PaintingStyle
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.dp
import com.github.skydoves.colorpicker.compose.BrightnessSlider
import com.github.skydoves.colorpicker.compose.ColorPickerController

@Composable
fun CustomBrightnessSlider(
initialColor: Color,
controller: ColorPickerController,
modifier: Modifier = Modifier,
) {
// Define your colors and sizes directly
val borderColor = Color.LightGray // Color for the slider border
val thumbRadius = 12.dp // Example thumb radius
val trackHeight = 4.dp // Example track height
val borderSize = 1.dp // Example border size for the slider

// Set up the paint for the thumb (wheel)
val wheelPaint = Paint().apply {
color = Color.White
alpha = 1.0f
}

// Set up the paint for the border if necessary
val borderPaint = Paint().apply {
style = PaintingStyle.Stroke
strokeWidth = with(LocalDensity.current) { borderSize.toPx() }
color = borderColor
}

// This function creates the ImageBitmap for the gradient background of the slider
@Composable
fun rememberSliderGradientBitmap(
width: Dp,
height: Dp,
startColor: Color,
endColor: Color,
): ImageBitmap {
val sizePx = with(LocalDensity.current) { IntSize(width.roundToPx(), height.roundToPx()) }
return remember(sizePx, startColor, endColor) {
ImageBitmap(sizePx.width, sizePx.height, ImageBitmapConfig.Argb8888).apply {
val canvas = Canvas(this)
val shader = LinearGradientShader(
colors = listOf(startColor, endColor),
from = Offset(0f, 0f),
to = Offset(sizePx.width.toFloat(), 0f),
tileMode = TileMode.Clamp,
)
val paint = Paint().apply {
this.shader = shader
}
canvas.drawRect(
0f,
0f,
sizePx.width.toFloat(),
sizePx.height.toFloat(),
paint,
)
}
}
}

// Obtain the Composable's size for the gradient background
val sliderWidth = 20.dp // Example width, adjust to your needs
val sliderHeight = thumbRadius * 2 // The height is double the thumb radius
val gradientBitmap = rememberSliderGradientBitmap(
width = sliderWidth, // Subtract the thumb radii from the total width
height = trackHeight,
startColor = Color.White,
endColor = Color.White,
)

BrightnessSlider(
modifier = modifier
.height(sliderHeight)
.fillMaxWidth()
.padding(horizontal = thumbRadius), // Padding equals thumb radius
controller = controller,
initialColor = initialColor,
borderRadius = thumbRadius, // Use thumbRadius for the rounded corners
borderSize = borderSize,
borderColor = borderColor, // Use borderColor for the slider border
wheelRadius = thumbRadius,
wheelColor = Color.White, // Thumb (wheel) color
wheelImageBitmap = gradientBitmap, // Use the generated gradient bitmap as the background
wheelAlpha = 1.0f, // Full opacity for the thumb
wheelPaint = wheelPaint, // Use the defined wheel paint
)
}
Loading

0 comments on commit 9047051

Please sign in to comment.