Theme rework WIP

This commit is contained in:
Benoit Marty
2019-06-05 14:31:11 +02:00
parent 91114e2afe
commit 51f5594ea0
33 changed files with 243 additions and 127 deletions

View File

@ -10,7 +10,9 @@
<color name="sky_blue">#7bb2ea</color>
<color name="bluey_grey_two">#929eb4</color>
<color name="light_blue_grey">#4ac1c9d6</color>
<color name="dark_grey">#2e2f32</color>
<!-- Now use ?colorOnPrimary or ?vctr_toolbar_primary_text_color -->
<!--color name="dark_grey">#2e2f32</color-->
<color name="dark_two">#27303A</color>
<color name="light_grey_blue">#9fa9ba</color>
<color name="cool_grey">#a5aab2</color>
<color name="pale_grey_two">#ebedf8</color>

View File

@ -41,7 +41,7 @@
<!--Default/Android Status Bar-->
<color name="primary_color_dark_light">#FF1A2027</color>
<!--Default/Base-->
<color name="primary_color_light">#FF27303A</color>
<color name="primary_color_light">#03b381</color>
<!--Default/Accent-->
<color name="accent_color_light">#03b381</color>
@ -113,11 +113,6 @@
<color name="soft_resource_limit_exceeded">#2f9edb</color>
<color name="hard_resource_limit_exceeded">@color/vector_fuchsia_color</color>
<!-- Avatar colors -->
<color name="avatar_color_1">#03b381</color>
<color name="avatar_color_2">#368bd6</color>
<color name="avatar_color_3">#ac3ba8</color>
<!-- Password Strength bar colors -->
<color name="password_strength_bar_weak">#FFF56679</color>
<color name="password_strength_bar_low">#FFFFC666</color>
@ -129,16 +124,6 @@
<color name="button_enabled_text_color">#FFFFFFFF</color>
<color name="button_disabled_text_color">#FF7F7F7F</color>
<!-- User names color -->
<color name="username_1">#368bd6</color>
<color name="username_2">#ac3ba8</color>
<color name="username_3">#03b381</color>
<color name="username_4">#e64f7a</color>
<color name="username_5">#ff812d</color>
<color name="username_6">#2dc2c5</color>
<color name="username_7">#5c56f5</color>
<color name="username_8">#74d12c</color>
<!-- Link color -->
<color name="link_color_light">#368BD6</color>
<color name="link_color_dark">#368BD6</color>

View File

@ -0,0 +1,99 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Source: https://zpl.io/aBKw9Mk -->
<!-- Accents -->
<color name="riotx_accent">#FF03B381</color>
<color name="riotx_notice">#FFFF4B55</color>
<color name="riotx_notice_secondary">#FF61708B</color>
<color name="riotx_links">#FF368BD6</color>
<color name="riotx_avatar_fill_1">#FF03b381</color>
<color name="riotx_avatar_fill_2">#FF368bd6</color>
<color name="riotx_avatar_fill_3">#FFac3ba8</color>
<color name="riotx_username_1">#368bd6</color>
<color name="riotx_username_2">#ac3ba8</color>
<color name="riotx_username_3">#03b381</color>
<color name="riotx_username_4">#e64f7a</color>
<color name="riotx_username_5">#ff812d</color>
<color name="riotx_username_6">#2dc2c5</color>
<color name="riotx_username_7">#5c56f5</color>
<color name="riotx_username_8">#74d12c</color>
<!-- Palette: format fo naming:
'riotx_<name in the palette snake case>_<theme>'
-->
<color name="riotx_background_light">#FFFFFFFF</color>
<color name="riotx_background_dark">#FF181B21</color>
<color name="riotx_background_black">#FF000000</color>
<color name="riotx_base_light">#FF27303A</color>
<color name="riotx_base_dark">#FF15171B</color>
<color name="riotx_base_black">#FF060708</color>
<color name="riotx_base_text_icon_primary_light">#FFFFFFFF</color>
<color name="riotx_base_text_icon_primary_dark">#FFEDF3FF</color>
<color name="riotx_base_text_icon_primary_black">#FFEDF3FF</color>
<color name="riotx_base_text_icon_secondary_light">#FFFFFFFF</color>
<color name="riotx_base_text_icon_secondary_dark">#FFEDF3FF</color>
<color name="riotx_base_text_icon_secondary_black">#FFEDF3FF</color>
<color name="riotx_search_background_mobile_light">#FFFFFFFF</color>
<color name="riotx_search_background_mobile_dark">#FF181B21</color>
<color name="riotx_search_background_mobile_black">#FF181B21</color>
<color name="riotx_header_panel_background_light">#FFF3F8FD</color>
<color name="riotx_header_panel_background_dark">#FF22262E</color>
<color name="riotx_header_panel_background_black">#FF090A0C</color>
<color name="riotx_header_panel_border_mobile_light">#FFE9EDF1</color>
<color name="riotx_header_panel_border_mobile_dark">#FF181B21</color>
<color name="riotx_header_panel_border_mobile_black">#FF0D0F12</color>
<color name="riotx_header_panel_text_primary_light">#FF61708B</color>
<color name="riotx_header_panel_text_primary_dark">#FFA1B2D1</color>
<color name="riotx_header_panel_text_primary_black">#FFA1B2D1</color>
<color name="riotx_header_panel_text_secondary_light">#FFC8C8CD</color>
<color name="riotx_header_panel_text_secondary_dark">#FFC8C8CD</color>
<color name="riotx_header_panel_text_secondary_black">#FFC8C8CD</color>
<color name="riotx_text_primary_light">#FF2E2F32</color>
<color name="riotx_text_primary_dark">#FFEDF3FF</color>
<color name="riotx_text_primary_black">#FFEDF3FF</color>
<color name="riotx_text_secondary_light">#FF9E9E9E</color>
<color name="riotx_text_secondary_dark">#FFA1B2D1</color>
<color name="riotx_text_secondary_black">#FFA1B2D1</color>
<color name="riotx_android_secondary_light">#FF7E899C</color>
<color name="riotx_android_secondary_dark">#FF7E899C</color>
<color name="riotx_android_secondary_black">#FF7E899C</color>
<color name="riotx_search_placeholder_light">#FF61708B</color>
<color name="riotx_search_placeholder_dark">#FF61708B</color>
<color name="riotx_search_placeholder_black">#FF61708B</color>
<color name="riotx_room_highlight_light">#FFFFFFFF</color>
<color name="riotx_room_highlight_dark">#FF343446</color>
<color name="riotx_room_highlight_black">#FF22262E</color>
<color name="riotx_unread_room_indent_light">#FF2E3648</color>
<color name="riotx_unread_room_indent_dark">#FF2E3648</color>
<color name="riotx_unread_room_indent_black">#FF2E3648</color>
<color name="riotx_android_status_bar_light">#FF2E3648</color>
<color name="riotx_android_status_bar_dark">#FF0D0E10</color>
<color name="riotx_android_status_bar_black">#FF000000</color>
<color name="riotx_line_break_mobile_light">#FFEEEFEF</color>
<color name="riotx_line_break_mobile_dark">#FF61708B</color>
<color name="riotx_line_break_mobile_black">#FF22262E</color>
</resources>

View File

@ -3,23 +3,11 @@
<!-- ************************ Common items ************************ -->
<!-- Launcher Theme, only used for VectorLauncherActivity (will be use even before the Activity is started) -->
<style name="AppTheme.Launcher" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/splash</item>
<item name="colorPrimaryDark">@color/primary_color_dark</item>
</style>
<!-- toolbar styles-->
<style name="VectorToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="android:background">?colorPrimary</item>
<item name="background">?colorPrimary</item>
<!-- main text -->
<item name="titleTextAppearance">@style/Vector.Toolbar.Title</item>
<item name="subtitleTextAppearance">@style/Vector.Toolbar.SubTitle</item>
<item name="theme">@style/VectorToolbarTheme</item>
</style>
<style name="VectorToolbarStyle.Group">
@ -27,23 +15,29 @@
<item name="background">@color/tab_groups</item>
</style>
<style name="VectorToolbarTheme">
<!-- toolbar icons -->
<item name="colorControlNormal">@android:color/white</item>
</style>
<style name="Vector.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">20sp</item>
<item name="android:textColor">?attr/vctr_toolbar_primary_text_color</item>
<item name="android:fontFamily">"sans-serif-medium"</item>
</style>
<style name="Vector.Toolbar.SubTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">16sp</item>
<item name="android:textColor">?attr/vctr_toolbar_primary_text_color</item>
<item name="android:fontFamily">"sans-serif"</item>
</style>
<!-- Alert Dialog: Button color are not colorAccent by default TODO extend Dark for dark theme -->
<style name="VectorAlertDialogStyle" parent="Theme.MaterialComponents.Light.Dialog.Alert">
<item name="buttonBarButtonStyle">@style/VectorAlertDialogButtonStyle</item>
</style>
<style name="VectorAlertDialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">?colorAccent</item>
</style>
<!-- TextInputLayout -->
<style name="VectorTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox" />
<!-- tabbar text color -->
<style name="Vector.TabText" parent="Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@android:color/white</item>
@ -66,12 +60,12 @@
</style>
<!-- actionbar icons color -->
<style name="Vector.ActionBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
<style name="Vector.ActionBarTheme" parent="ThemeOverlay.MaterialComponents.ActionBar">
<item name="colorControlNormal">@android:color/white</item>
</style>
<!-- custom action bar -->
<style name="Vector.Styled.ActionBar" parent="Widget.AppCompat.Toolbar">
<style name="Vector.Styled.ActionBar" parent="Widget.MaterialComponents.Toolbar">
<item name="android:background">?colorPrimary</item>
<item name="background">?colorPrimary</item>
@ -114,7 +108,8 @@
Widget.AppCompat.Button.Colored, which sets the button color to colorAccent,
using colorControlHighlight as an overlay for focused and pressed states.
-->
<style name="VectorButtonStyle" parent="Widget.AppCompat.Button.Colored">
<style name="VectorButtonStyle" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">?colorAccent</item>
<item name="android:paddingLeft">16dp</item>
<item name="android:paddingRight">16dp</item>
<item name="android:minWidth">94dp</item>
@ -128,11 +123,13 @@
<!--Widget.AppCompat.Button.Borderless.Colored, which sets the text color to colorAccent,
using colorControlHighlight as an overlay for focused and pressed states.-->
<style name="VectorButtonStyleFlat" parent="Widget.AppCompat.Button.Borderless.Colored">
<style name="VectorButtonStyleFlat" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textStyle">bold</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@null</item>
<item name="android:textColor">?colorAccent</item>
<item name="colorControlHighlight">?colorAccent</item>
</style>

View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Widget.Vector.Button" parent="Widget.AppCompat.Button">
<item name="android:minHeight">48dp</item>
<item name="android:minWidth">128dp</item>
<item name="android:paddingRight">8dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:textAllCaps">true</item>
</style>
</resources>

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Launcher Theme, only used for VectorLauncherActivity (will be use even before the Activity is started) -->
<style name="AppTheme.Launcher" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:windowBackground">@drawable/splash</item>
<item name="colorPrimaryDark">@color/primary_color_dark</item>
</style>
</resources>

View File

@ -3,14 +3,31 @@
<!-- LIGHT THEME COLORS -->
<style name="AppTheme.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
<item name="colorPrimaryDark">@color/primary_color_dark_light</item>
<style name="AppTheme.Base.Light" parent="Theme.MaterialComponents.Light.NoActionBar">
<!--item name="colorPrimary"></item>
<item name="colorPrimaryVariant"></item>
<item name="colorOnPrimary">@android:color/white</item-->
<item name="colorPrimary">@color/primary_color_light</item>
<item name="colorPrimaryVariant">@color/primary_color_dark_light</item>
<item name="colorOnPrimary">@color/riotx_text_primary_light</item>
<item name="colorSecondary">@color/accent_color_light</item>
<item name="colorSecondaryVariant">#0039CB</item>
<item name="colorOnSecondary">@android:color/white</item>
<item name="colorError">@color/vector_error_color</item>
<item name="colorOnError">#FFFFFF</item>
<item name="colorSurface">#FFFFFF</item>
<item name="colorOnSurface">#212121</item>
<item name="android:colorBackground">@color/riotx_background_light</item>
<item name="colorOnBackground">#212121</item>
<item name="colorAccent">@color/accent_color_light</item>
<item name="materialButtonStyle">@style/VectorButtonStyle</item>
<item name="toolbarStyle">@style/VectorToolbarStyle</item>
<item name="alertDialogTheme">@style/VectorAlertDialogStyle</item>
<item name="android:textColorPrimary">@color/black_87</item>
<item name="android:textColorSecondary">@color/black_38</item>
<item name="android:textColorTertiary">@color/black_37</item>
@ -18,24 +35,20 @@
<item name="android:textColorLink">@color/link_color_light</item>
<!-- Menu text color -->
<item name="android:actionMenuTextColor">#FFFFFFFF</item>
<!--item name="android:actionMenuTextColor">#FFFFFFFF</item-->
<!-- default background color -->
<item name="android:colorBackground">@color/riot_primary_background_color_light</item>
<item name="vctr_bottom_nav_background_color">#FFF3F8FD</item>
<item name="vctr_bottom_nav_background_border_color">#FFE9EDF1</item>
<!-- default button -->
<item name="android:buttonStyle">@style/Widget.Vector.Button</item>
<!-- waiting view background -->
<item name="vctr_waiting_background_color">#AAAAAAAA</item>
<!-- application bar text color -->
<!-- Base Text Primary-->
<item name="vctr_toolbar_primary_text_color">#FFFFFFFF</item>
<item name="vctr_toolbar_primary_text_color">@color/riotx_text_primary_light</item>
<!-- Base Text Secondary-->
<item name="vctr_toolbar_secondary_text_color">#FFFFFFFF</item>
<item name="vctr_toolbar_secondary_text_color">@color/riotx_text_primary_light</item>
<item name="vctr_toolbar_link_text_color">@color/link_color_light</item>
<!-- application bar text hint color -->

View File

@ -25,8 +25,6 @@
</item>
<item name="vctr_bottom_nav_background_border_color">#FFE9EDF1</item>
<item name="buttonStyle">@style/Widget.Vector.Button</item>
<!-- waiting view background -->
<item name="vctr_waiting_background_color">#AAAAAAAA</item>