Add color tokens and user some of them in our theme

Also switch to dark theme as base theme

35 files changed, 230 insertions, 113 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt
index 18eebb8b85..23c17f1075 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ConnectionButton.kt
@@ -25,9 +25,9 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisconnectButton
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisconnectButton
 import net.mullvad.mullvadvpn.model.TunnelState
 
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt
index d3945f7069..8abe879082 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/ExternalActionButton.kt
@@ -15,10 +15,10 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.constraintlayout.compose.ConstraintLayout
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
index 41ab2cf876..c95c1bf82d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/RedeemVoucherButton.kt
@@ -10,9 +10,9 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.SpacedColumn
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
index bc82bca29c..59292a9aa6 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SitePaymentButton.kt
@@ -11,10 +11,10 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.SpacedColumn
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
index 906afbb65c..c76166d548 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/button/SwitchLocationButton.kt
@@ -16,9 +16,9 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.SpacedColumn
-import net.mullvad.mullvadvpn.lib.theme.Alpha20
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.Alpha20
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt
index 7021081963..9e2d002f84 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/CustomPortCell.kt
@@ -26,10 +26,10 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.SpacedColumn
-import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
index 331e9d2248..c2283d6f47 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/ExpandableComposeCell.kt
@@ -22,10 +22,10 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ChevronView
 import net.mullvad.mullvadvpn.compose.component.textResource
 import net.mullvad.mullvadvpn.compose.extensions.toAnnotatedString
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
index 1ee34a908a..f6228ec687 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/InformationComposeCell.kt
@@ -16,11 +16,11 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.MullvadBlue
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
index 855bc82982..faa65de250 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/RelayLocationCell.kt
@@ -29,12 +29,12 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ChevronView
-import net.mullvad.mullvadvpn.lib.theme.Alpha40
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
-import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.Alpha40
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 import net.mullvad.mullvadvpn.model.GeographicLocationConstraint
 import net.mullvad.mullvadvpn.relaylist.Relay
 import net.mullvad.mullvadvpn.relaylist.RelayCity
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
index b43217614c..b22ff378ec 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SelectableCell.kt
@@ -14,10 +14,10 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.SpacedColumn
-import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
index c44d5da61e..ba5dc959b6 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/cell/SplitTunnelingCell.kt
@@ -26,9 +26,9 @@ import androidx.compose.ui.unit.dp
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.Alpha40
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.Alpha40
 import net.mullvad.mullvadvpn.lib.theme.typeface.listItemText
 
 @Preview
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
index 66d9aea0fa..77929b38f3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/List.kt
@@ -24,9 +24,9 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.AlphaDescription
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 import net.mullvad.mullvadvpn.lib.theme.typeface.listItemSubText
 import net.mullvad.mullvadvpn.lib.theme.typeface.listItemText
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
index 161bce9b75..b8f48c4e1a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/LocationInfo.kt
@@ -15,11 +15,11 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
-import net.mullvad.mullvadvpn.lib.theme.AlphaInvisible
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInvisible
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
 import net.mullvad.mullvadvpn.model.GeoIpLocation
 import net.mullvad.talpid.net.TransportProtocol
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
index 332c841d87..ce12644b54 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
@@ -25,7 +25,8 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
-import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 
 @Composable
 fun ScaffoldWithTopBar(
@@ -126,6 +127,7 @@ fun ScaffoldWithMediumTopBar(
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
     lazyListState: LazyListState = rememberLazyListState(),
+    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
     content: @Composable (modifier: Modifier, lazyListState: LazyListState) -> Unit
 ) {
 
@@ -145,7 +147,9 @@ fun ScaffoldWithMediumTopBar(
         },
         content = {
             content(
-                Modifier.fillMaxSize().padding(it).drawVerticalScrollbar(lazyListState),
+                Modifier.fillMaxSize()
+                    .padding(it)
+                    .drawVerticalScrollbar(state = lazyListState, color = scrollbarColor),
                 lazyListState
             )
         }
@@ -159,6 +163,7 @@ fun ScaffoldWithMediumTopBar(
     modifier: Modifier = Modifier,
     navigationIcon: @Composable () -> Unit = {},
     actions: @Composable RowScope.() -> Unit = {},
+    scrollbarColor: Color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar),
     content: @Composable (modifier: Modifier) -> Unit
 ) {
     val appBarState = rememberTopAppBarState()
@@ -185,7 +190,7 @@ fun ScaffoldWithMediumTopBar(
             content(
                 Modifier.fillMaxSize()
                     .padding(it)
-                    .drawVerticalScrollbar(scrollState)
+                    .drawVerticalScrollbar(state = scrollState, color = scrollbarColor)
                     .verticalScroll(scrollState)
             )
         }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt
index 52f2f1d726..a0061d1240 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scrollbar.kt
@@ -71,16 +71,6 @@ import kotlinx.coroutines.flow.collectLatest
 
 fun Modifier.drawHorizontalScrollbar(
     state: ScrollState,
-    reverseScrolling: Boolean = false
-): Modifier = composed { drawScrollbar(state, Orientation.Horizontal, BarColor, reverseScrolling) }
-
-fun Modifier.drawVerticalScrollbar(
-    state: ScrollState,
-    reverseScrolling: Boolean = false
-): Modifier = composed { drawScrollbar(state, Orientation.Vertical, BarColor, reverseScrolling) }
-
-fun Modifier.drawHorizontalScrollbar(
-    state: ScrollState,
     color: Color,
     reverseScrolling: Boolean = false
 ): Modifier = drawScrollbar(state, Orientation.Horizontal, color, reverseScrolling)
@@ -118,13 +108,15 @@ private fun Modifier.drawScrollbar(
 
 fun Modifier.drawHorizontalScrollbar(
     state: LazyListState,
+    color: Color,
     reverseScrolling: Boolean = false
-): Modifier = composed { drawScrollbar(state, Orientation.Horizontal, BarColor, reverseScrolling) }
+): Modifier = drawScrollbar(state, Orientation.Horizontal, color, reverseScrolling)
 
 fun Modifier.drawVerticalScrollbar(
     state: LazyListState,
+    color: Color,
     reverseScrolling: Boolean = false
-): Modifier = composed { drawScrollbar(state, Orientation.Vertical, BarColor, reverseScrolling) }
+): Modifier = drawScrollbar(state, Orientation.Vertical, color, reverseScrolling)
 
 private fun Modifier.drawScrollbar(
     state: LazyListState,
@@ -297,9 +289,6 @@ private fun Modifier.drawScrollbar(
     }
 }
 
-private val BarColor: Color
-    @Composable get() = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
-
 private val Thickness = 8.dp
 private val Radius = 4.dp
 private val FadeOutAnimationSpec =
@@ -310,7 +299,12 @@ private val FadeOutAnimationSpec =
 private fun PreviewScrollbar() {
     val state = rememberScrollState()
     Column(
-        modifier = Modifier.drawVerticalScrollbar(state).verticalScroll(state),
+        modifier =
+            Modifier.drawVerticalScrollbar(
+                    state = state,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+                )
+                .verticalScroll(state),
     ) {
         repeat(50) {
             Text(text = "Item ${it + 1}", modifier = Modifier.fillMaxWidth().padding(16.dp))
@@ -322,7 +316,14 @@ private fun PreviewScrollbar() {
 @Composable
 private fun PreviewLazyListScrollbar() {
     val state = rememberLazyListState()
-    LazyColumn(modifier = Modifier.drawVerticalScrollbar(state), state = state) {
+    LazyColumn(
+        modifier =
+            Modifier.drawVerticalScrollbar(
+                state = state,
+                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+            ),
+        state = state
+    ) {
         items(50) {
             Text(text = "Item ${it + 1}", modifier = Modifier.fillMaxWidth().padding(16.dp))
         }
@@ -333,7 +334,14 @@ private fun PreviewLazyListScrollbar() {
 @Composable
 private fun PreviewHorizontalScrollbar() {
     val state = rememberScrollState()
-    Row(modifier = Modifier.drawHorizontalScrollbar(state).horizontalScroll(state)) {
+    Row(
+        modifier =
+            Modifier.drawHorizontalScrollbar(
+                    state = state,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+                )
+                .horizontalScroll(state)
+    ) {
         repeat(50) {
             Text(
                 text = (it + 1).toString(),
@@ -347,7 +355,14 @@ private fun PreviewHorizontalScrollbar() {
 @Composable
 private fun PreviewLazyListHorizontalScrollbar() {
     val state = rememberLazyListState()
-    LazyRow(modifier = Modifier.drawHorizontalScrollbar(state), state = state) {
+    LazyRow(
+        modifier =
+            Modifier.drawHorizontalScrollbar(
+                state = state,
+                color = MaterialTheme.colorScheme.onSurfaceVariant.copy(alpha = 0.6f)
+            ),
+        state = state
+    ) {
         items(50) {
             Text(
                 text = (it + 1).toString(),
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
index 90fe865588..bc344196c3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Switch.kt
@@ -21,11 +21,11 @@ import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
-import net.mullvad.mullvadvpn.lib.theme.AlphaVisible
-import net.mullvad.mullvadvpn.lib.theme.MullvadGreen
-import net.mullvad.mullvadvpn.lib.theme.MullvadRed
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaVisible
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadGreen
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
index 5e8fc2c78b..64ef36bea6 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/TopBar.kt
@@ -151,6 +151,7 @@ fun MullvadTopBar(
                 IconButton(onClick = onAccountClicked) {
                     Icon(
                         painter = painterResource(R.drawable.icon_account),
+                        tint = iconTintColor,
                         contentDescription = stringResource(id = R.string.settings_account),
                     )
                 }
@@ -160,6 +161,7 @@ fun MullvadTopBar(
                 IconButton(onClick = onSettingsClicked) {
                     Icon(
                         painter = painterResource(R.drawable.icon_settings),
+                        tint = iconTintColor,
                         contentDescription = stringResource(id = R.string.settings),
                     )
                 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt
index e23af13564..32e8df77a7 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/CustomPortDialog.kt
@@ -19,11 +19,11 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.test.CUSTOM_PORT_DIALOG_INPUT_TEST_TAG
 import net.mullvad.mullvadvpn.compose.textfield.CustomPortTextField
-import net.mullvad.mullvadvpn.lib.theme.AlphaDescription
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 import net.mullvad.mullvadvpn.model.PortRange
 import net.mullvad.mullvadvpn.util.asString
 import net.mullvad.mullvadvpn.util.isPortInValidRanges
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt
index 52077dbfba..cce0bb7356 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DnsDialog.kt
@@ -28,11 +28,11 @@ import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.textfield.DnsTextField
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.MullvadBlue
-import net.mullvad.mullvadvpn.lib.theme.MullvadRed
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite20
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite60
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite20
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite60
 import net.mullvad.mullvadvpn.viewmodel.CustomDnsItem
 import net.mullvad.mullvadvpn.viewmodel.StagedDns
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt
index 39f3302a99..beca8a9f43 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/MtuDialog.kt
@@ -28,11 +28,11 @@ import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.textfield.MtuTextField
 import net.mullvad.mullvadvpn.constant.MTU_MAX_VALUE
 import net.mullvad.mullvadvpn.constant.MTU_MIN_VALUE
-import net.mullvad.mullvadvpn.lib.theme.AlphaDescription
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 import net.mullvad.mullvadvpn.util.isValidMtu
 
 @Preview
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
index 4d6f3f1261..3753b4d2e6 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/RedeemVoucherDialog.kt
@@ -36,11 +36,11 @@ import net.mullvad.mullvadvpn.compose.state.VoucherDialogUiState
 import net.mullvad.mullvadvpn.compose.textfield.GroupedTextField
 import net.mullvad.mullvadvpn.compose.util.vouchersVisualTransformation
 import net.mullvad.mullvadvpn.constant.VOUCHER_LENGTH
-import net.mullvad.mullvadvpn.lib.theme.AlphaDescription
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisabled
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisabled
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
 import org.joda.time.DateTimeConstants
 
 @Preview(device = Devices.TV_720p)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
index f694079ae3..2c2e9d7abc 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
@@ -45,9 +45,10 @@ import net.mullvad.mullvadvpn.compose.test.RECONNECT_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SCROLLABLE_COLUMN_TEST_TAG
 import net.mullvad.mullvadvpn.compose.test.SELECT_LOCATION_BUTTON_TEST_TAG
 import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser
-import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 import net.mullvad.mullvadvpn.model.TunnelState
 import net.mullvad.mullvadvpn.viewmodel.ConnectViewModel
 import net.mullvad.talpid.tunnel.ActionAfterDisconnect
@@ -140,7 +141,10 @@ fun ConnectScreen(
                 Modifier.padding(it)
                     .background(color = MaterialTheme.colorScheme.primary)
                     .fillMaxHeight()
-                    .drawVerticalScrollbar(scrollState)
+                    .drawVerticalScrollbar(
+                        scrollState,
+                        color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaScrollbar)
+                    )
                     .verticalScroll(scrollState)
                     .padding(bottom = Dimens.screenVerticalMargin)
                     .testTag(SCROLLABLE_COLUMN_TEST_TAG)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
index 4036d9547c..5230575600 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceListScreen.kt
@@ -31,10 +31,10 @@ import net.mullvad.mullvadvpn.compose.dialog.ShowDeviceRemovalDialog
 import net.mullvad.mullvadvpn.compose.state.DeviceListItemUiState
 import net.mullvad.mullvadvpn.compose.state.DeviceListUiState
 import net.mullvad.mullvadvpn.lib.common.util.parseAsDateTime
-import net.mullvad.mullvadvpn.lib.theme.AlphaInactive
-import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaInactive
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 import net.mullvad.mullvadvpn.model.Device
 import net.mullvad.mullvadvpn.util.formatDate
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
index 22fa8a0469..f7a15c2fea 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/DeviceRevokedScreen.kt
@@ -27,8 +27,8 @@ import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.button.ActionButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.state.DeviceRevokedUiState
-import net.mullvad.mullvadvpn.lib.theme.AlphaDisconnectButton
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDisconnectButton
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
index 3ba1498eb5..d27b4196aa 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoadingScreen.kt
@@ -22,8 +22,8 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
-import net.mullvad.mullvadvpn.lib.theme.AlphaDescription
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaDescription
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
index 823e4f4226..bdce1c1660 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/LoginScreen.kt
@@ -63,9 +63,9 @@ import net.mullvad.mullvadvpn.compose.state.LoginUiState
 import net.mullvad.mullvadvpn.compose.test.LOGIN_TITLE_TEST_TAG
 import net.mullvad.mullvadvpn.compose.textfield.mullvadWhiteTextFieldColors
 import net.mullvad.mullvadvpn.compose.util.accountTokenVisualTransformation
-import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 
 @Preview
 @Composable
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
index 994e45b556..bd43dc518a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/OutOfTimeScreen.kt
@@ -32,9 +32,10 @@ import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBarAndDeviceName
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.compose.extensions.createOpenAccountPageHook
 import net.mullvad.mullvadvpn.compose.state.OutOfTimeUiState
-import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
 import net.mullvad.mullvadvpn.model.TunnelState
 import net.mullvad.mullvadvpn.viewmodel.OutOfTimeViewModel
 import net.mullvad.talpid.tunnel.ActionAfterDisconnect
@@ -140,7 +141,10 @@ fun OutOfTimeScreen(
             modifier =
                 Modifier.fillMaxSize()
                     .verticalScroll(scrollState)
-                    .drawVerticalScrollbar(scrollState)
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar)
+                    )
                     .background(color = MaterialTheme.colorScheme.background)
                     .padding(it)
         ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
index 078e6c9b78..6a46ec351a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
@@ -51,6 +51,7 @@ import net.mullvad.mullvadvpn.compose.test.CIRCULAR_PROGRESS_INDICATOR
 import net.mullvad.mullvadvpn.compose.textfield.SearchTextField
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.relaylist.RelayCountry
 import net.mullvad.mullvadvpn.relaylist.RelayItem
 
@@ -140,7 +141,10 @@ fun SelectLocationScreen(
             modifier =
                 Modifier.focusRequester(listFocus)
                     .fillMaxSize()
-                    .drawVerticalScrollbar(lazyListState),
+                    .drawVerticalScrollbar(
+                        lazyListState,
+                        MaterialTheme.colorScheme.onBackground.copy(alpha = AlphaScrollbar)
+                    ),
             state = lazyListState,
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
index cdef4bdbb3..5f45e2535a 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ViewLogsScreen.kt
@@ -25,6 +25,7 @@ import net.mullvad.mullvadvpn.compose.component.NavigateBackIconButton
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
 import net.mullvad.mullvadvpn.viewmodel.ViewLogsUiState
 
 @Preview
@@ -76,7 +77,8 @@ fun ViewLogsScreen(
                         modifier =
                             Modifier.drawVerticalScrollbar(
                                 scrollState,
-                                color = MaterialTheme.colorScheme.primary
+                                color =
+                                    MaterialTheme.colorScheme.primary.copy(alpha = AlphaScrollbar)
                             )
                     ) {
                         TextField(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
index 5cae9e966a..240e84eca3 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
@@ -43,10 +43,11 @@ import net.mullvad.mullvadvpn.compose.state.WelcomeUiState
 import net.mullvad.mullvadvpn.compose.util.createCopyToClipboardHandle
 import net.mullvad.mullvadvpn.lib.common.util.groupWithSpaces
 import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser
-import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaScrollbar
+import net.mullvad.mullvadvpn.lib.theme.color.AlphaTopBar
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite
 import net.mullvad.mullvadvpn.viewmodel.WelcomeViewModel
 
 @Preview
@@ -119,7 +120,10 @@ fun WelcomeScreen(
             modifier =
                 Modifier.fillMaxSize()
                     .verticalScroll(scrollState)
-                    .drawVerticalScrollbar(scrollState)
+                    .drawVerticalScrollbar(
+                        state = scrollState,
+                        color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaScrollbar)
+                    )
                     .background(color = MaterialTheme.colorScheme.primary)
                     .padding(it)
         ) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt
index e5350f9844..619b5ee4ed 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/CustomTextField.kt
@@ -37,8 +37,8 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import net.mullvad.mullvadvpn.R
-import net.mullvad.mullvadvpn.lib.theme.MullvadBlue
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite10
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite10
 
 private const val EMPTY_STRING = ""
 private const val NEWLINE_STRING = "\n"
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt
index 55c0283aff..2f743a8d23 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/textfield/SearchTextField.kt
@@ -28,7 +28,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
-import net.mullvad.mullvadvpn.lib.theme.MullvadWhite10
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite10
 
 @Preview
 @Composable
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
index 9ab3fc1e0f..33a6081099 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Theme.kt
@@ -4,7 +4,7 @@ import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Shapes
 import androidx.compose.material3.Typography
-import androidx.compose.material3.lightColorScheme
+import androidx.compose.material3.darkColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.remember
@@ -15,6 +15,19 @@ import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadBlue20
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadDarkBlue
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadGreen
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadRed
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadWhite60
+import net.mullvad.mullvadvpn.lib.theme.color.MullvadYellow
+import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_error
+import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onError
+import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onPrimary
+import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_onSurfaceVariant
+import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_primary
+import net.mullvad.mullvadvpn.lib.theme.color.md_theme_dark_surfaceVariant
 import net.mullvad.mullvadvpn.lib.theme.dimensions.Dimensions
 import net.mullvad.mullvadvpn.lib.theme.dimensions.defaultDimensions
 import net.mullvad.mullvadvpn.lib.theme.typeface.TypeScale
@@ -39,25 +52,37 @@ private val MullvadTypography =
             )
     )
 
-private val MullvadColorPalette =
-    lightColorScheme(
-        primary = MullvadBlue,
+private val darkColorScheme =
+    darkColorScheme(
+        primary = md_theme_dark_primary,
+        onPrimary = md_theme_dark_onPrimary,
+        // primaryContainer = md_theme_dark_primaryContainer,
+        // onPrimaryContainer = md_theme_dark_onPrimaryContainer,
         secondary = MullvadDarkBlue,
+        onSecondary = MullvadWhite60,
+        secondaryContainer = MullvadBlue20,
+        // onSecondaryContainer = md_theme_dark_onSecondaryContainer,
         tertiary = MullvadRed,
+        // onTertiary = md_theme_dark_onTertiary,
+        // tertiaryContainer = md_theme_dark_tertiaryContainer,
+        // onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+        error = md_theme_dark_error,
+        errorContainer = MullvadYellow,
+        onError = md_theme_dark_onError,
+        // onErrorContainer = md_theme_dark_onErrorContainer,
         background = MullvadDarkBlue,
-        surface = MullvadGreen,
-        secondaryContainer = MullvadBlue20,
         onBackground = MullvadWhite,
-        onSurfaceVariant = MullvadWhite,
-        onPrimary = MullvadWhite,
-        onSecondary = MullvadWhite60,
-        onError = MullvadWhite,
+        surface = MullvadGreen,
         onSurface = MullvadWhite,
+        surfaceVariant = md_theme_dark_surfaceVariant,
+        onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+        // outline = md_theme_dark_outline,
+        // inverseOnSurface = md_theme_dark_inverseOnSurface,
+        inverseSurface = MullvadWhite,
         inversePrimary = MullvadGreen,
-        error = MullvadRed,
-        errorContainer = MullvadYellow,
-        outlineVariant = Color.Transparent, // Used by divider
-        inverseSurface = MullvadWhite
+        // surfaceTint = md_theme_dark_surfaceTint,
+        outlineVariant = Color.Transparent, // Used by divider,
+        // scrim = md_theme_dark_scrim,
     )
 
 val Shapes =
@@ -81,7 +106,7 @@ private val LocalAppDimens = staticCompositionLocalOf { defaultDimensions }
 
 @Composable
 fun AppTheme(content: @Composable () -> Unit) {
-    val colors = MullvadColorPalette
+    val colors = darkColorScheme
     val typography = MullvadTypography
     // Set dimensions and type scale based on configurations here
     val dimensions = defaultDimensions
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
index 0ae3ae9c07..f81c0b4409 100644
--- a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/Color.kt
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/Color.kt
@@ -1,13 +1,9 @@
-package net.mullvad.mullvadvpn.lib.theme
+package net.mullvad.mullvadvpn.lib.theme.color
 
 import androidx.compose.ui.graphics.Color
 
-internal val MullvadBeige = Color(0xFFFFCD86)
-internal val MullvadBlue60 = Color(0x99294D73)
 internal val MullvadBlue20 = Color(0x33294D73)
-internal val MullvadBrown = Color(0xFFD2943B)
 internal val MullvadYellow = Color(0xFFFFD524)
-internal val MullvadWhite40 = Color(0x66FFFFFF)
 
 @Deprecated(
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
@@ -24,10 +20,6 @@ val MullvadGreen = Color(0xFF44AD4D)
 @Deprecated(
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
 )
-val MullvadGreen40 = Color(0x6644AD4D)
-@Deprecated(
-    "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
-)
 val MullvadRed = Color(0xFFE34039)
 @Deprecated(
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
@@ -45,10 +37,6 @@ val MullvadWhite20 = Color(0x33FFFFFF)
     "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
 )
 val MullvadWhite60 = Color(0x99FFFFFF)
-@Deprecated(
-    "Deprecated for external usage and will be marked as internal in the future. Use material colors instead."
-)
-val MullvadWhite80 = Color(0xCCFFFFFF)
 
 const val AlphaVisible = 1f
 const val AlphaDisabled = 0.2f
@@ -57,5 +45,6 @@ const val AlphaInactive = 0.4f
 const val Alpha40 = 0.4f
 const val AlphaDescription = 0.6f
 const val AlphaDisconnectButton = 0.6f
+const val AlphaScrollbar = 0.6f
 const val AlphaTopBar = 0.8f
 const val AlphaInvisible = 0f
diff --git a/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt
new file mode 100644
index 0000000000..31dd7a6c6f
--- /dev/null
+++ b/android/lib/theme/src/main/kotlin/net/mullvad/mullvadvpn/lib/theme/color/ColorTokens.kt
@@ -0,0 +1,63 @@
+package net.mullvad.mullvadvpn.lib.theme.color
+
+import androidx.compose.ui.graphics.Color
+
+internal val md_theme_light_primary = Color(0xFF0561A3)
+internal val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+internal val md_theme_light_primaryContainer = Color(0xFFD1E4FF)
+internal val md_theme_light_onPrimaryContainer = Color(0xFF001D36)
+internal val md_theme_light_secondary = Color(0xFF006E1F)
+internal val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+internal val md_theme_light_secondaryContainer = Color(0xFF8FFA8F)
+internal val md_theme_light_onSecondaryContainer = Color(0xFF002204)
+internal val md_theme_light_tertiary = Color(0xFF845400)
+internal val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+internal val md_theme_light_tertiaryContainer = Color(0xFFFFDDB5)
+internal val md_theme_light_onTertiaryContainer = Color(0xFF2A1800)
+internal val md_theme_light_error = Color(0xFFBA1A1A)
+internal val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+internal val md_theme_light_onError = Color(0xFFFFFFFF)
+internal val md_theme_light_onErrorContainer = Color(0xFF410002)
+internal val md_theme_light_background = Color(0xFFFDFBFF)
+internal val md_theme_light_onBackground = Color(0xFF001B3D)
+internal val md_theme_light_surface = Color(0xFFFDFBFF)
+internal val md_theme_light_onSurface = Color(0xFF001B3D)
+internal val md_theme_light_surfaceVariant = Color(0xFFDFE2EB)
+internal val md_theme_light_onSurfaceVariant = Color(0xFF43474E)
+internal val md_theme_light_outline = Color(0xFF73777F)
+internal val md_theme_light_inverseOnSurface = Color(0xFFECF0FF)
+internal val md_theme_light_inverseSurface = Color(0xFF003062)
+internal val md_theme_light_inversePrimary = Color(0xFF9FCAFF)
+internal val md_theme_light_surfaceTint = Color(0xFF0561A3)
+internal val md_theme_light_outlineVariant = Color(0xFFC3C6CF)
+internal val md_theme_light_scrim = Color(0xFFFFD524) // Helmet Yellow
+
+internal val md_theme_dark_primary = Color(0xFF294D73) // MullvadBlue
+internal val md_theme_dark_onPrimary = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_primaryContainer = Color(0xFF1C344E) // Sub-container
+internal val md_theme_dark_onPrimaryContainer = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_secondary = Color(0xFF44AD4D) // MullvadGreen
+internal val md_theme_dark_onSecondary = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_secondaryContainer = Color(0xFF47AC4C) // Text in connection fragment
+internal val md_theme_dark_onSecondaryContainer = Color(0xFFD9EEDB) // Text in titlebar
+internal val md_theme_dark_tertiary = Color(0xFF99454F) // Disconnect button
+internal val md_theme_dark_onTertiary = Color(0xFFFFFFFF) // MullvadWhite/Text on disconnect button
+internal val md_theme_dark_tertiaryContainer = Color(0xFF643F00) // Generated
+internal val md_theme_dark_onTertiaryContainer = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_error = Color(0xFFE34039) // MullvadRed
+internal val md_theme_dark_errorContainer = Color(0xFFE34039) // MullvadRed //Duplicate
+internal val md_theme_dark_onError = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6) // Generated
+internal val md_theme_dark_background = Color(0xFF192E45) // MullvadDarkBlue //Duplicate
+internal val md_theme_dark_onBackground = Color(0xFFFFFFFF) // MullvadWhite //Duplicate
+internal val md_theme_dark_surface = Color(0xFF192E45) // MullvadDarkBlue
+internal val md_theme_dark_onSurface = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_surfaceVariant = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_onSurfaceVariant = Color(0xFF294D73) // MullvadBlue
+internal val md_theme_dark_outline = Color(0xFF8D9199) // Generated
+internal val md_theme_dark_inverseOnSurface = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_inverseSurface = Color(0xFFFFFFFF) // MullvadWhite
+internal val md_theme_dark_inversePrimary = Color(0xFF0561A3) // Generated
+internal val md_theme_dark_surfaceTint = Color(0xFF9FCAFF) // Generated
+internal val md_theme_dark_outlineVariant = Color(0xFF43474E) // Generated
+internal val md_theme_dark_scrim = Color(0xFF000000) // Generated