mirror of
https://github.com/bitwarden/android.git
synced 2025-01-30 03:33:41 +03:00
BIT-690: Adding color palette and colors to light and dark themes (#74)
This commit is contained in:
joshua-livefront
Álison Fernandes
parent
02a1445f39
commit
cd918f9ca5
3 changed files with 221 additions and 19 deletions
|
|
@ -3,6 +3,7 @@ package com.x8bit.bitwarden.ui.platform.theme
|
|||
import android.app.Activity
|
||||
import android.content.Context
|
||||
import android.os.Build
|
||||
import androidx.annotation.ColorRes
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.material3.ColorScheme
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
|
|
@ -18,7 +19,6 @@ import androidx.compose.ui.platform.LocalContext
|
|||
import androidx.compose.ui.platform.LocalView
|
||||
import androidx.core.view.WindowCompat
|
||||
import com.x8bit.bitwarden.R
|
||||
import com.x8bit.bitwarden.R.color
|
||||
|
||||
/**
|
||||
* The overall application theme. This can be configured to support a [darkTheme] and
|
||||
|
|
@ -61,14 +61,62 @@ fun BitwardenTheme(
|
|||
|
||||
private fun darkColorScheme(context: Context): ColorScheme =
|
||||
darkColorScheme(
|
||||
primary = Color(context.getColor(color.dark_primary)),
|
||||
secondary = Color(context.getColor(R.color.dark_primary)),
|
||||
tertiary = Color(context.getColor(R.color.dark_primary)),
|
||||
primary = R.color.dark_primary.toColor(context),
|
||||
onPrimary = R.color.dark_on_primary.toColor(context),
|
||||
primaryContainer = R.color.dark_primary_container.toColor(context),
|
||||
onPrimaryContainer = R.color.dark_on_primary_container.toColor(context),
|
||||
secondary = R.color.dark_secondary.toColor(context),
|
||||
onSecondary = R.color.dark_on_secondary.toColor(context),
|
||||
secondaryContainer = R.color.dark_secondary_container.toColor(context),
|
||||
onSecondaryContainer = R.color.dark_on_secondary_container.toColor(context),
|
||||
tertiary = R.color.dark_tertiary.toColor(context),
|
||||
onTertiary = R.color.dark_on_tertiary.toColor(context),
|
||||
tertiaryContainer = R.color.dark_tertiary_container.toColor(context),
|
||||
onTertiaryContainer = R.color.dark_on_tertiary_container.toColor(context),
|
||||
error = R.color.dark_error.toColor(context),
|
||||
onError = R.color.dark_on_error.toColor(context),
|
||||
errorContainer = R.color.dark_error_container.toColor(context),
|
||||
onErrorContainer = R.color.dark_on_error_container.toColor(context),
|
||||
surface = R.color.dark_surface.toColor(context),
|
||||
onSurface = R.color.dark_on_surface.toColor(context),
|
||||
onSurfaceVariant = R.color.dark_on_surface_variant.toColor(context),
|
||||
outline = R.color.dark_outline.toColor(context),
|
||||
outlineVariant = R.color.dark_outline_variant.toColor(context),
|
||||
inverseSurface = R.color.dark_inverse_surface.toColor(context),
|
||||
inverseOnSurface = R.color.dark_inverse_on_surface.toColor(context),
|
||||
inversePrimary = R.color.dark_inverse_primary.toColor(context),
|
||||
scrim = R.color.dark_scrim.toColor(context),
|
||||
)
|
||||
|
||||
private fun lightColorScheme(context: Context): ColorScheme =
|
||||
lightColorScheme(
|
||||
primary = Color(context.getColor(color.primary)),
|
||||
secondary = Color(context.getColor(R.color.primary)),
|
||||
tertiary = Color(context.getColor(R.color.primary)),
|
||||
primary = R.color.primary.toColor(context),
|
||||
onPrimary = R.color.on_primary.toColor(context),
|
||||
primaryContainer = R.color.primary_container.toColor(context),
|
||||
onPrimaryContainer = R.color.on_primary_container.toColor(context),
|
||||
secondary = R.color.secondary.toColor(context),
|
||||
onSecondary = R.color.on_secondary.toColor(context),
|
||||
secondaryContainer = R.color.secondary_container.toColor(context),
|
||||
onSecondaryContainer = R.color.on_secondary_container.toColor(context),
|
||||
tertiary = R.color.tertiary.toColor(context),
|
||||
onTertiary = R.color.on_tertiary.toColor(context),
|
||||
tertiaryContainer = R.color.tertiary_container.toColor(context),
|
||||
onTertiaryContainer = R.color.on_tertiary_container.toColor(context),
|
||||
error = R.color.error.toColor(context),
|
||||
onError = R.color.on_error.toColor(context),
|
||||
errorContainer = R.color.error_container.toColor(context),
|
||||
onErrorContainer = R.color.on_error_container.toColor(context),
|
||||
surface = R.color.surface.toColor(context),
|
||||
onSurface = R.color.on_surface.toColor(context),
|
||||
onSurfaceVariant = R.color.on_surface_variant.toColor(context),
|
||||
outline = R.color.outline.toColor(context),
|
||||
outlineVariant = R.color.outline_variant.toColor(context),
|
||||
inverseSurface = R.color.inverse_surface.toColor(context),
|
||||
inverseOnSurface = R.color.inverse_on_surface.toColor(context),
|
||||
inversePrimary = R.color.inverse_primary.toColor(context),
|
||||
scrim = R.color.scrim.toColor(context),
|
||||
)
|
||||
|
||||
@ColorRes
|
||||
private fun Int.toColor(context: Context): Color =
|
||||
Color(context.getColor(this))
|
||||
|
|
|
|||
|
|
@ -1,20 +1,108 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- Light System -->
|
||||
<color name="border">#dddddd</color>
|
||||
<color name="notification_bar">#1452BC</color>
|
||||
<color name="primary">#175DDC</color>
|
||||
<color name="border">@color/silver_DDDDDD</color>
|
||||
<color name="notification_bar">@color/blue_1452BC</color>
|
||||
<color name="primary">@color/blue_175DDC</color>
|
||||
<color name="on_primary">@color/white_FFFFFF</color>
|
||||
<color name="primary_container">@color/blue_DAE2FF</color>
|
||||
<color name="on_primary_container">@color/blue_001848</color>
|
||||
<color name="primary_fixed">@color/blue_DAE2FF</color>
|
||||
<color name="primary_fixed_dim">@color/blue_B2C5FF</color>
|
||||
<color name="on_primary_fixed">@color/blue_001848</color>
|
||||
<color name="on_primary_fixed_variant">@color/blue_003FA3</color>
|
||||
<color name="secondary">@color/grey_585E71</color>
|
||||
<color name="on_secondary">@color/white_FFFFFF</color>
|
||||
<color name="secondary_container">@color/grey_DDE2F9</color>
|
||||
<color name="on_secondary_container">@color/blue_151B2C</color>
|
||||
<color name="secondary_fixed">@color/grey_DDE2F9</color>
|
||||
<color name="secondary_fixed_dim">@color/grey_C0C6DD</color>
|
||||
<color name="on_secondary_fixed">@color/blue_151B2C</color>
|
||||
<color name="on_secondary_fixed_variant">@color/grey_404659</color>
|
||||
<color name="tertiary">@color/blue_3B5BA9</color>
|
||||
<color name="on_tertiary">@color/white_FFFFFF</color>
|
||||
<color name="tertiary_container">@color/blue_DAE2FF</color>
|
||||
<color name="on_tertiary_container">@color/blue_001848</color>
|
||||
<color name="tertiary_fixed">@color/blue_DAE2FF</color>
|
||||
<color name="tertiary_fixed_dim">@color/blue_B2C5FF</color>
|
||||
<color name="on_tertiary_fixed">@color/blue_001848</color>
|
||||
<color name="on_tertiary_fixed_variant">@color/blue_1F438F</color>
|
||||
<color name="error">@color/red_BA1A1A</color>
|
||||
<color name="on_error">@color/white_FFFFFF</color>
|
||||
<color name="error_container">@color/red_FFDAD6</color>
|
||||
<color name="on_error_container">@color/red_410002</color>
|
||||
<color name="surface_dim">@color/grey_DBD9DD</color>
|
||||
<color name="surface">@color/grey_FBF8FD</color>
|
||||
<color name="surface_bright">@color/grey_FBF8FD</color>
|
||||
<color name="surface_container_lowest">@color/white_FFFFFF</color>
|
||||
<color name="surface_container_low">@color/white_F5F3F7</color>
|
||||
<color name="surface_container">@color/white_EFEDF1</color>
|
||||
<color name="surface_container_high">@color/white_E9E7EC</color>
|
||||
<color name="surface_container_highest">@color/white_E4E2E6</color>
|
||||
<color name="on_surface">@color/grey_1B1B1F</color>
|
||||
<color name="on_surface_variant">@color/grey_45464F</color>
|
||||
<color name="outline">@color/grey_757780</color>
|
||||
<color name="outline_variant">@color/white_C5C6D0</color>
|
||||
<color name="inverse_surface">@color/grey_303034</color>
|
||||
<color name="inverse_on_surface">@color/grey_F2F0F4</color>
|
||||
<color name="inverse_primary">@color/blue_B2C5FF</color>
|
||||
<color name="scrim">@color/black_000000</color>
|
||||
<color name="shadow">@color/black_000000</color>
|
||||
|
||||
<!-- Dark System -->
|
||||
<color name="dark_border">#666666</color>
|
||||
<color name="dark_navigation_bar_background">#191919</color>
|
||||
<color name="dark_notification_bar">#191919</color>
|
||||
<color name="dark_primary">#52bdfb</color>
|
||||
<color name="dark_border">@color/grey_666666</color>
|
||||
<color name="dark_navigation_bar_background">@color/grey_191919</color>
|
||||
<color name="dark_notification_bar">@color/grey_191919</color>
|
||||
<color name="dark_primary">@color/blue_B2C5FF</color>
|
||||
<color name="dark_on_primary">@color/blue_002B74</color>
|
||||
<color name="dark_primary_container">@color/blue_003FA3</color>
|
||||
<color name="dark_on_primary_container">@color/blue_DAE2FF</color>
|
||||
<color name="dark_primary_fixed">@color/blue_DAE2FF</color>
|
||||
<color name="dark_primary_fixed_dim">@color/blue_B2C5FF</color>
|
||||
<color name="dark_on_primary_fixed">@color/blue_001848</color>
|
||||
<color name="dark_on_primary_fixed_variant">@color/blue_003FA3</color>
|
||||
<color name="dark_secondary">@color/grey_C0C6DD</color>
|
||||
<color name="dark_on_secondary">@color/grey_2A3042</color>
|
||||
<color name="dark_secondary_container">@color/grey_404659</color>
|
||||
<color name="dark_on_secondary_container">@color/grey_DDE2F9</color>
|
||||
<color name="dark_secondary_fixed">@color/grey_DDE2F9</color>
|
||||
<color name="dark_secondary_fixed_dim">@color/grey_C0C6DD</color>
|
||||
<color name="dark_on_secondary_fixed">@color/blue_151B2C</color>
|
||||
<color name="dark_on_secondary_fixed_variant">@color/grey_404659</color>
|
||||
<color name="dark_tertiary">@color/blue_B2C5FF</color>
|
||||
<color name="dark_on_tertiary">@color/blue_002B73</color>
|
||||
<color name="dark_tertiary_container">@color/blue_1F438F</color>
|
||||
<color name="dark_on_tertiary_container">@color/blue_DAE2FF</color>
|
||||
<color name="dark_tertiary_fixed">@color/blue_DAE2FF</color>
|
||||
<color name="dark_tertiary_fixed_dim">@color/blue_B2C5FF</color>
|
||||
<color name="dark_on_tertiary_fixed">@color/blue_001848</color>
|
||||
<color name="dark_on_tertiary_fixed_variant">@color/blue_1F438F</color>
|
||||
<color name="dark_error">@color/red_FFB4AB</color>
|
||||
<color name="dark_on_error">@color/red_690005</color>
|
||||
<color name="dark_error_container">@color/red_93000A</color>
|
||||
<color name="dark_on_error_container">@color/red_FFDAD6</color>
|
||||
<color name="dark_surface_dim">@color/grey_131316</color>
|
||||
<color name="dark_surface">@color/grey_131316</color>
|
||||
<color name="dark_surface_bright">@color/grey_39393C</color>
|
||||
<color name="dark_surface_container_lowest">@color/grey_0D0E11</color>
|
||||
<color name="dark_surface_container_low">@color/grey_1B1B1F</color>
|
||||
<color name="dark_surface_container">@color/grey_1F1F23</color>
|
||||
<color name="dark_surface_container_high">@color/grey_292A2D</color>
|
||||
<color name="dark_surface_container_highest">@color/grey_343438</color>
|
||||
<color name="dark_on_surface">@color/grey_C7C6CA</color>
|
||||
<color name="dark_on_surface_variant">@color/white_C5C6D0</color>
|
||||
<color name="dark_outline">@color/grey_8F909A</color>
|
||||
<color name="dark_outline_variant">@color/grey_45464F</color>
|
||||
<color name="dark_inverse_surface">@color/white_E4E2E6</color>
|
||||
<color name="dark_inverse_on_surface">@color/grey_1B1B1F</color>
|
||||
<color name="dark_inverse_primary">@color/blue_0055D4</color>
|
||||
<color name="dark_scrim">@color/black_000000</color>
|
||||
<color name="dark_shadow">@color/black_000000</color>
|
||||
|
||||
<!-- Other -->
|
||||
<color name="black">#000000</color>
|
||||
<color name="dark_gray">#333333</color>
|
||||
<color name="gray">#738182</color>
|
||||
<color name="light_gray">#efeff4</color>
|
||||
<color name="white">#FFFFFF</color>
|
||||
<color name="black">@color/black_000000</color>
|
||||
<color name="dark_gray">@color/grey_333333</color>
|
||||
<color name="gray">@color/grey_738182</color>
|
||||
<color name="light_gray">@color/grey_EFEFF4</color>
|
||||
<color name="white">@color/white_FFFFFF</color>
|
||||
</resources>
|
||||
|
|
|
|||
66
app/src/main/res/values/colors_palette.xml
Normal file
66
app/src/main/res/values/colors_palette.xml
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!-- Blues -->
|
||||
<color name="blue_DAE2FF">#DAE2FF</color>
|
||||
<color name="blue_B2C5FF">#B2C5FF</color>
|
||||
<color name="blue_175DDC">#175DDC</color>
|
||||
<color name="blue_0055D4">#0055D4</color>
|
||||
<color name="blue_3B5BA9">#3B5BA9</color>
|
||||
<color name="blue_1452BC">#1452BC</color>
|
||||
<color name="blue_1F438F">#1F438F</color>
|
||||
<color name="blue_003FA3">#003FA3</color>
|
||||
<color name="blue_002B74">#002B74</color>
|
||||
<color name="blue_002B73">#002B73</color>
|
||||
<color name="blue_001848">#001848</color>
|
||||
<color name="blue_151B2C">#151B2C</color>
|
||||
|
||||
<!-- Greys -->
|
||||
<color name="grey_FBF8FD">#FBF8FD</color>
|
||||
<color name="grey_DDE2F9">#DDE2F9</color>
|
||||
<color name="grey_EFEFF4">#EFEFF4</color>
|
||||
<color name="grey_F2F0F4">#F2F0F4</color>
|
||||
<color name="grey_DBD9DD">#DBD9DD</color>
|
||||
<color name="grey_E4E2E6">#E4E2E6</color>
|
||||
<color name="grey_C5C6D0">#C5C6D0</color>
|
||||
<color name="grey_C7C6CA">#C7C6CA</color>
|
||||
<color name="grey_8F909A">#8F909A</color>
|
||||
<color name="grey_C0C6DD">#C0C6DD</color>
|
||||
<color name="grey_757780">#757780</color>
|
||||
<color name="grey_738182">#738182</color>
|
||||
<color name="grey_585E71">#585E71</color>
|
||||
<color name="grey_666666">#666666</color>
|
||||
<color name="grey_45464F">#45464F</color>
|
||||
<color name="grey_404659">#404659</color>
|
||||
<color name="grey_333333">#333333</color>
|
||||
<color name="grey_303034">#303034</color>
|
||||
<color name="grey_2A3042">#2A3042</color>
|
||||
<color name="grey_39393C">#39393C</color>
|
||||
<color name="grey_292A2D">#292A2D</color>
|
||||
<color name="grey_343438">#343438</color>
|
||||
<color name="grey_1F1F23">#1F1F23</color>
|
||||
<color name="grey_1B1B1F">#1B1B1F</color>
|
||||
<color name="grey_191919">#191919</color>
|
||||
<color name="grey_131316">#131316</color>
|
||||
<color name="grey_0D0E11">#0D0E11</color>
|
||||
|
||||
<!-- Reds and Oranges -->
|
||||
<color name="red_FFDAD6">#FFDAD6</color>
|
||||
<color name="red_FFB4AB">#FFB4AB</color>
|
||||
<color name="red_BA1A1A">#BA1A1A</color>
|
||||
<color name="red_93000A">#93000A</color>
|
||||
<color name="red_690005">#690005</color>
|
||||
<color name="red_410002">#410002</color>
|
||||
|
||||
<!-- Whites and Off-Whites -->
|
||||
<color name="white_FFFFFF">#FFFFFF</color>
|
||||
<color name="white_F5F3F7">#F5F3F7</color>
|
||||
<color name="white_EFEDF1">#EFEDF1</color>
|
||||
<color name="white_E9E7EC">#E9E7EC</color>
|
||||
<color name="white_C5C6D0">#C5C6D0</color>
|
||||
<color name="white_E4E2E6">#E4E2E6</color>
|
||||
|
||||
<!-- Misc Colors -->
|
||||
<color name="silver_DDDDDD">#dddddd</color>
|
||||
<color name="black_000000">#000000</color>
|
||||
|
||||
</resources>
|
||||
Loading…
Add table
Reference in a new issue