tor-browser

commit 79bf8cd0f3811882bfdfbd228567d58a1c00b521
parent 1affd958896f7f2cdf87ee21eda07667b4ea9ccc
Author: John Oberhauser <j.git-global@obez.io>
Date:   Wed,  7 Jan 2026 16:25:18 +0000

Bug 2008748 - Fixing a dark mode issue with text on the Accessibility settings page r=android-reviewers,007

Differential Revision: https://phabricator.services.mozilla.com/D278024

Diffstat:
M
mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/FontSizeSlider.kt
 | 
138
+++++++++++++++++++++++++++++++++++++++++++++++++------------------------------

1 file changed, 86 insertions(+), 52 deletions(-)
diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/FontSizeSlider.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/settings/FontSizeSlider.kt
@@ -21,6 +21,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Slider
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -34,10 +35,12 @@ import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTag
 import androidx.compose.ui.semantics.testTagsAsResourceId
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import mozilla.components.ui.colors.PhotonColors
 import org.mozilla.fenix.R
+import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
 import kotlin.math.roundToInt
 
 private const val HALF_ALPHA = 0.5F
@@ -66,42 +69,44 @@ fun FontSizePreference(
     // The values used to align with the top bar
     val paddingFontSizeSection = PaddingValues(start = 72.dp, top = 16.dp, end = 16.dp, bottom = 16.dp)
 
-    Column(
-        modifier = Modifier
-            .alpha(alpha)
-            .padding(paddingFontSizeSection),
-    ) {
-        Text(
-            text = stringResource(id = R.string.preference_accessibility_font_size_title),
-            modifier = Modifier.semantics {
-                testTagsAsResourceId = true
-                testTag = "fontSizeTitle"
-            },
-            style = MaterialTheme.typography.bodyLarge,
-        )
+    Surface {
+        Column(
+            modifier = Modifier
+                .alpha(alpha)
+                .padding(paddingFontSizeSection),
+        ) {
+            Text(
+                text = stringResource(id = R.string.preference_accessibility_font_size_title),
+                modifier = Modifier.semantics {
+                    testTagsAsResourceId = true
+                    testTag = "fontSizeTitle"
+                },
+                style = MaterialTheme.typography.bodyLarge,
+            )
 
-        Text(
-            text = stringResource(id = R.string.preference_accessibility_text_size_summary),
-            modifier = Modifier.semantics {
-                testTagsAsResourceId = true
-                testTag = "fontSizeSubtitle"
-            },
-            style = MaterialTheme.typography.bodyMedium,
-            color = MaterialTheme.colorScheme.onSurfaceVariant,
-        )
+            Text(
+                text = stringResource(id = R.string.preference_accessibility_text_size_summary),
+                modifier = Modifier.semantics {
+                    testTagsAsResourceId = true
+                    testTag = "fontSizeSubtitle"
+                },
+                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+            )
 
-        Spacer(modifier = Modifier.height(12.dp))
+            Spacer(modifier = Modifier.height(12.dp))
 
-        FontSizeSlider(
-            isEnabled = isEnabled,
-            value = value,
-            onValueChange = onValueChange,
-            onValueChangeFinished = onValueChangeFinished,
-        )
+            FontSizeSlider(
+                isEnabled = isEnabled,
+                value = value,
+                onValueChange = onValueChange,
+                onValueChangeFinished = onValueChangeFinished,
+            )
 
-        Spacer(modifier = Modifier.height(12.dp))
+            Spacer(modifier = Modifier.height(12.dp))
 
-        SampleText(fontSize = value)
+            SampleText(fontSize = value)
+        }
     }
 }
 
@@ -112,7 +117,10 @@ private fun SampleText(fontSize: Float) {
     Box(
         modifier = Modifier
             .wrapContentSize()
-            .background(color = PhotonColors.Violet05)
+            .background(
+                color = MaterialTheme.colorScheme.secondaryContainer,
+                shape = RoundedCornerShape(28.dp),
+            )
             .padding(16.dp),
     ) {
         Text(
@@ -246,32 +254,58 @@ private fun FilledTrack(fraction: Float, isEnabled: Boolean) {
     ) {}
 }
 
-@Preview
+@PreviewLightDark
 @Composable
 private fun FontSizePreferencePreview() {
-    MaterialTheme {
-        Box(Modifier.background(MaterialTheme.colorScheme.surface)) {
-            FontSizePreference(
-                isEnabled = true,
-                value = 100f,
-                onValueChange = {},
-                onValueChangeFinished = {},
-            )
-        }
+    FirefoxTheme {
+        FontSizePreference(
+            isEnabled = true,
+            value = 100f,
+            onValueChange = {},
+            onValueChangeFinished = {},
+        )
     }
 }
 
 @Preview
 @Composable
+private fun PrivateFontSizePreferencePreview() {
+    FirefoxTheme(
+        theme = Theme.Private,
+    ) {
+        FontSizePreference(
+            isEnabled = true,
+            value = 100f,
+            onValueChange = {},
+            onValueChangeFinished = {},
+        )
+    }
+}
+
+@PreviewLightDark
+@Composable
 private fun FontSizePreferenceDisabledPreview() {
-    MaterialTheme {
-        Box(Modifier.background(MaterialTheme.colorScheme.surface)) {
-            FontSizePreference(
-                isEnabled = false,
-                value = 200f,
-                onValueChange = {},
-                onValueChangeFinished = {},
-            )
-        }
+    FirefoxTheme {
+        FontSizePreference(
+            isEnabled = false,
+            value = 200f,
+            onValueChange = {},
+            onValueChangeFinished = {},
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun PrivateFontSizePreferenceDisabledPreview() {
+    FirefoxTheme(
+        theme = Theme.Private,
+    ) {
+        FontSizePreference(
+            isEnabled = false,
+            value = 200f,
+            onValueChange = {},
+            onValueChangeFinished = {},
+        )
     }
 }