Theme refactoring (#1656)
* Theme refactoring * disable the automatic tinting of surfaces with elevation in dark mode * make the media warning visible again with the dark theme * fix nav bar on api 27+ * use correct color for all media warnings
This commit is contained in:
Konrad Pozniak
GitHub
parent
29ef92edd3
commit
8767d2ed3d
122 changed files with 330 additions and 724 deletions
|
|
@ -9,38 +9,13 @@
|
|||
</declare-styleable>
|
||||
|
||||
<!--Themed Attributes-->
|
||||
<attr name="recents_background_color" format="reference|color" />
|
||||
<attr name="window_background" format="reference" />
|
||||
<attr name="custom_tab_toolbar" format="reference" />
|
||||
<attr name="preference_icon_tint" format="reference" />
|
||||
<attr name="image_button_style" format="reference" />
|
||||
<attr name="status_reblog_small_drawable" format="reference" />
|
||||
<attr name="status_reblog_inactive_drawable" format="reference" />
|
||||
<attr name="status_reblog_disabled_drawable" format="reference" />
|
||||
<attr name="status_reblog_direct_drawable" format="reference" />
|
||||
<attr name="status_favourite_active_drawable" format="reference" />
|
||||
<attr name="status_favourite_inactive_drawable" format="reference" />
|
||||
<attr name="sensitive_media_warning_background_color" format="reference|color" />
|
||||
<attr name="media_preview_unloaded_drawable" format="reference" />
|
||||
<attr name="conversation_thread_line_drawable" format="reference" />
|
||||
<attr name="tab_icon_selected_tint" format="reference|color" />
|
||||
<attr name="tab_page_margin_color" format="reference|color" />
|
||||
<attr name="account_header_background_color" format="reference|color" />
|
||||
<attr name="account_toolbar_icon_tint_uncollapsed" format="reference|color" />
|
||||
<attr name="account_toolbar_icon_tint_collapsed" format="reference|color" />
|
||||
<attr name="compose_close_button_tint" format="reference|color" />
|
||||
<attr name="image_button_disabled_tint" format="reference|color" />
|
||||
<attr name="compose_content_warning_bar_background" format="reference" />
|
||||
<attr name="compose_reply_content_background" format="reference|color" />
|
||||
<attr name="report_status_background_color" format="reference|color" />
|
||||
<attr name="card_background_color" format="reference|color" />
|
||||
<attr name="compound_button_color" format="reference" />
|
||||
<attr name="autocomplete_divider_drawable" format="reference" />
|
||||
<attr name="colorBackgroundAccent" format="reference|color" />
|
||||
<attr name="textColorDisabled" format="reference|color" />
|
||||
<attr name="iconColor" format="reference|color" />
|
||||
<attr name="windowBackgroundColor" format="reference|color" />
|
||||
|
||||
<attr name="play_indicator_drawable" format="reference" />
|
||||
<attr name="status_text_small" format="dimension" />
|
||||
<attr name="status_text_medium" format="dimension" />
|
||||
<attr name="status_text_large" format="dimension" />
|
||||
|
||||
<attr name="pollOptionBackgroundColor" format="reference|color" />
|
||||
</resources>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
<!--These colors are not affected by themes or used in all themes.-->
|
||||
<color name="tusky_blue">#2b90d9</color>
|
||||
<color name="tusky_blue_light">#56a7e1</color>
|
||||
<color name="tusky_orange">#ca8f04</color>
|
||||
|
|
@ -8,58 +7,24 @@
|
|||
<color name="tusky_green">#19a341</color>
|
||||
<color name="tusky_green_light">#25d069</color>
|
||||
|
||||
<color name="toolbar_view_media">#8f000000</color>
|
||||
<color name="white">#fff</color>
|
||||
<color name="black">#000</color>
|
||||
|
||||
<!-- the number roughly corresponds to the % lightness of the grey -->
|
||||
<color name="tusky_grey_05">#070b14</color>
|
||||
<color name="tusky_grey_10">#16191f</color>
|
||||
<color name="tusky_grey_20">#282c37</color>
|
||||
<color name="tusky_grey_30">#444b5d</color>
|
||||
<color name="tusky_grey_40">#596378</color>
|
||||
<color name="tusky_grey_50">#6e7b92</color>
|
||||
<color name="tusky_grey_70">#9baec8</color>
|
||||
<color name="tusky_grey_80">#b9c8d8</color>
|
||||
<color name="tusky_grey_90">#d9e1e8</color>
|
||||
<color name="tusky_grey_95">#e9edf2</color>
|
||||
|
||||
<color name="transparent_tusky_blue">#8c2b90d9</color>
|
||||
<color name="transparent_black">#8f000000</color>
|
||||
<color name="header_background_filter">#44000000</color>
|
||||
<color name="description_marker_unselected">#333</color>
|
||||
<color name="white">#ffffff</color>
|
||||
|
||||
<!--Dark Theme Colors-->
|
||||
<color name="color_primary_dark">#4c5368</color>
|
||||
<color name="color_primary_dark_dark">#313543</color> <!--Dark Dark-->
|
||||
<color name="color_background_dark">#1a1c23</color>
|
||||
<color name="window_background_dark">#282c37</color>
|
||||
<color name="text_color_primary_dark">#ffffff</color>
|
||||
<color name="text_color_secondary_dark">#d9e1e8</color>
|
||||
<color name="text_color_tertiary_dark">#9baec8</color>
|
||||
<color name="toolbar_icon_dark">#d9e1e8</color>
|
||||
<color name="status_reblog_button_disabled_dark">#444b5d</color>
|
||||
<color name="status_divider_dark">#2f3441</color>
|
||||
<color name="tab_page_margin_dark">#1a1c23</color>
|
||||
<color name="account_toolbar_icon_collapsed_dark">#ffffff</color>
|
||||
<color name="image_button_disabled_dark">#586173</color>
|
||||
<color name="custom_tab_toolbar_dark">#313543</color>
|
||||
<color name="compose_reply_content_background_dark">#373c4b</color>
|
||||
<color name="autocomplete_divider_dark">#424a5b</color>
|
||||
<!--Black Theme Colors-->
|
||||
<color name="color_primary_black">#000000</color>
|
||||
<color name="color_primary_dark_black">#111111</color> <!--Dark Dark-->
|
||||
<color name="color_background_black">#000000</color>
|
||||
<color name="window_background_black">#000000</color>
|
||||
<color name="text_color_primary_black">#FFFFFF</color>
|
||||
<color name="toolbar_background_black">#111111</color>
|
||||
<color name="dialog_background_black">#111111</color>
|
||||
<color name="tab_page_margin_black">#000000</color>
|
||||
<!--Light Theme Colors-->
|
||||
<color name="color_primary_light">#dfdfdf</color>
|
||||
<color name="color_primary_dark_light">#8f8f8f</color>
|
||||
<color name="color_background_light">#f4f4f4</color>
|
||||
<color name="window_background_light">#f4f4f4</color>
|
||||
<color name="text_color_primary_light">#CC000000</color>
|
||||
<color name="text_color_secondary_light">#3c3c3c</color>
|
||||
<color name="text_color_tertiary_light">#5f636f</color>
|
||||
<color name="toolbar_icon_light">#7C000000</color>
|
||||
<color name="status_reblog_button_disabled_light">#BFBFBF</color>
|
||||
<color name="sensitive_media_warning_background_light">#b0b0b0</color>
|
||||
<color name="media_preview_unloaded_background_light">#cfcfcf</color>
|
||||
<color name="status_divider_light">#cfcfcf</color>
|
||||
<color name="tab_page_margin_light">#cfcfcf</color>
|
||||
<color name="account_toolbar_icon_collapsed_light">#DE000000</color>
|
||||
<color name="image_button_disabled_light">#a3a5ab</color>
|
||||
<color name="report_status_background_light">#EFEFEF</color>
|
||||
<color name="custom_tab_toolbar_light">#ffffff</color>
|
||||
<color name="compose_reply_content_background_light">#e0e1e6</color>
|
||||
|
||||
<color name="compose_media_visible_button_disabled_blue">#8c2b90d9</color>
|
||||
|
||||
<!-- colors used in the elephant friend drawables -->
|
||||
<color name="elephant_friend_border_color">#121419</color>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<string name="oauth_scheme" translatable="false">oauth2redirect</string>
|
||||
<string name="preferences_file_key" translatable="false">com.keylesspalace.tusky.PREFERENCES</string>
|
||||
|
||||
<string name="status_sensitive_media_template" translatable="false"><b>%1$s</b><br>%2$s</string>
|
||||
<string name="at_symbol" translatable="false">\@</string>
|
||||
<string name="hash_symbol" translatable="false">#</string>
|
||||
<string name="title_tag" translatable="false">#%s</string>
|
||||
|
|
|
|||
|
|
@ -30,132 +30,85 @@
|
|||
<item name="status_text_large">22sp</item>
|
||||
</style>
|
||||
|
||||
<style name="ViewMediaActivity.AppBarLayout" parent="ThemeOverlay.AppCompat">
|
||||
<item name="android:colorControlNormal">@color/white</item>
|
||||
</style>
|
||||
|
||||
<style name="SplashTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
|
||||
<item name="android:windowBackground">@drawable/background_splash</item>
|
||||
<item name="colorPrimary">@color/color_primary_dark_dark</item>
|
||||
<item name="colorPrimaryDark">@color/color_primary_dark_dark</item>
|
||||
<item name="colorPrimary">@color/tusky_grey_10</item>
|
||||
<item name="colorPrimaryDark">@color/tusky_grey_10</item>
|
||||
<item name="android:windowNoTitle">true</item>
|
||||
</style>
|
||||
|
||||
<!--Light Application Theme Styles-->
|
||||
<style name="TuskyTheme" parent="TuskyBaseTheme" />
|
||||
|
||||
<style name="TuskyDialogActivityTheme" parent="@style/TuskyTheme" />
|
||||
|
||||
<style name="TuskyDialogFragmentStyle" parent="@style/ThemeOverlay.MaterialComponents.Dialog">
|
||||
<item name="dialogCornerRadius">8dp</item>
|
||||
<item name="android:backgroundTint">?attr/window_background</item>
|
||||
</style>
|
||||
|
||||
|
||||
<style name="TuskyBaseTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
|
||||
<style name="TuskyBaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
|
||||
<item name="colorPrimary">@color/tusky_blue</item>
|
||||
<item name="colorOnPrimary">@color/white</item>
|
||||
|
||||
<item name="colorSecondary">@color/tusky_blue</item>
|
||||
<item name="colorOnSecondary">@color/white</item>
|
||||
|
||||
<item name="colorSurface">@color/color_background_light</item>
|
||||
<item name="colorSurface">@color/colorSurface</item>
|
||||
|
||||
<item name="colorPrimaryDark">@color/color_primary_dark_light</item>
|
||||
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
|
||||
|
||||
<item name="android:colorBackground">@color/colorBackground</item>
|
||||
<item name="colorBackgroundAccent">@color/colorBackgroundAccent</item>
|
||||
<item name="windowBackgroundColor">@color/windowBackground</item>
|
||||
|
||||
<item name="android:textColorPrimary">@color/textColorPrimary</item>
|
||||
<item name="android:textColorSecondary">@color/textColorSecondary</item>
|
||||
<item name="android:textColorTertiary">@color/textColorTertiary</item>
|
||||
|
||||
<item name="iconColor">@color/iconColor</item>
|
||||
|
||||
<item name="android:listDivider">@drawable/status_divider</item>
|
||||
|
||||
<item name="textColorDisabled">@color/textColorDisabled</item>
|
||||
|
||||
<item name="material_drawer_background">@color/colorBackground</item>
|
||||
<item name="material_drawer_primary_text">@color/textColorSecondary</item>
|
||||
<item name="material_drawer_primary_icon">@color/iconColor</item>
|
||||
<item name="material_drawer_secondary_text">@color/textColorTertiary</item>
|
||||
<item name="material_drawer_hint_text">@color/textColorTertiary</item>
|
||||
<item name="material_drawer_divider">@color/colorBackgroundAccent</item>
|
||||
<item name="material_drawer_header_selection_text">@color/white</item>
|
||||
<item name="material_drawer_header_selection_subtext">@color/white</item>
|
||||
|
||||
<item name="alertDialogTheme">@style/TuskyDialog</item>
|
||||
<item name="snackbarButtonStyle">@style/TuskyButton.TextButton</item>
|
||||
<item name="appBarLayoutStyle">@style/Widget.MaterialComponents.AppBarLayout.Surface</item>
|
||||
|
||||
<item name="android:colorBackground">@color/color_background_light</item>
|
||||
<item name="recents_background_color">@color/color_primary_light</item>
|
||||
<item name="android:windowBackground">@color/window_background_light</item>
|
||||
<item name="android:textColorPrimary">@color/text_color_primary_light</item>
|
||||
<item name="android:textColorSecondary">@color/text_color_secondary_light</item>
|
||||
<item name="android:textColorTertiary">@color/text_color_tertiary_light</item>
|
||||
|
||||
<item name="android:actionMenuTextColor">@color/text_color_primary_light</item>
|
||||
|
||||
<item name="alertDialogTheme">@style/TuskyDialog.Light</item>
|
||||
<item name="snackbarButtonStyle">@style/TuskyButton.TextButton</item>
|
||||
|
||||
<item name="window_background">@color/window_background_light</item>
|
||||
<item name="custom_tab_toolbar">@color/custom_tab_toolbar_light</item>
|
||||
<item name="preference_icon_tint">@color/toolbar_icon_light</item>
|
||||
<item name="image_button_style">@style/TuskyImageButton.Light</item>
|
||||
<item name="status_reblog_small_drawable">@drawable/ic_reblog_light_24dp</item>
|
||||
<item name="status_reblog_inactive_drawable">@drawable/reblog_inactive_light</item>
|
||||
<item name="status_reblog_disabled_drawable">@drawable/reblog_private_light</item>
|
||||
<item name="status_reblog_direct_drawable">@drawable/reblog_direct_light</item>
|
||||
<item name="status_favourite_active_drawable">@drawable/favourite_active_light</item>
|
||||
<item name="status_favourite_inactive_drawable">@drawable/favourite_inactive_light</item>
|
||||
<item name="sensitive_media_warning_background_color">#80B0B0B0</item>
|
||||
<item name="media_preview_unloaded_drawable">@drawable/media_preview_unloaded_light</item>
|
||||
<item name="android:listDivider">@drawable/status_divider_light</item>
|
||||
<item name="conversation_thread_line_drawable">@drawable/conversation_thread_line_light
|
||||
</item>
|
||||
<item name="tab_icon_selected_tint">@color/tusky_blue</item>
|
||||
<item name="tab_page_margin_color">@color/tab_page_margin_light</item>
|
||||
<item name="account_header_background_color">@color/color_primary_dark_light</item>
|
||||
<item name="account_toolbar_icon_tint_uncollapsed">@color/toolbar_icon_dark
|
||||
</item> <!--Default to dark on purpose, because header backgrounds with gradients are always dark.-->
|
||||
<item name="account_toolbar_icon_tint_collapsed">
|
||||
@color/account_toolbar_icon_collapsed_light
|
||||
</item>
|
||||
|
||||
<item name="compose_close_button_tint">@color/toolbar_icon_light</item>
|
||||
<item name="image_button_disabled_tint">@color/image_button_disabled_light
|
||||
</item>
|
||||
<item name="compose_content_warning_bar_background">@drawable/border_background_light</item>
|
||||
<item name="compose_reply_content_background">
|
||||
@color/compose_reply_content_background_light
|
||||
</item>
|
||||
|
||||
<item name="report_status_background_color">@color/report_status_background_light</item>
|
||||
|
||||
<item name="material_drawer_background">@color/window_background_light</item>
|
||||
<item name="material_drawer_primary_text">@color/text_color_primary_light</item>
|
||||
<item name="material_drawer_primary_icon">@color/toolbar_icon_light</item>
|
||||
<item name="material_drawer_secondary_text">@color/text_color_secondary_light</item>
|
||||
<item name="material_drawer_hint_text">@color/text_color_tertiary_light</item>
|
||||
<item name="material_drawer_divider">@color/color_primary_dark_light</item>
|
||||
<item name="material_drawer_selected">@color/color_primary_light</item>
|
||||
<item name="material_drawer_selected_text">@color/text_color_primary_light</item>
|
||||
<item name="material_drawer_header_selection_text">@color/text_color_primary_dark
|
||||
</item> <!--Intentionally dark so it can be overlayed over the account's header image.-->
|
||||
<item name="material_drawer_header_selection_subtext">@color/text_color_secondary_dark
|
||||
</item> <!--Intentionally dark so it can be overlayed over the account's header image.-->
|
||||
|
||||
<item name="card_background_color">@color/color_primary_light</item>
|
||||
|
||||
<item name="play_indicator_drawable">@drawable/ic_play_indicator_light</item>
|
||||
|
||||
<item name="compound_button_color">@color/compound_button_color_light</item>
|
||||
|
||||
<item name="autocomplete_divider_drawable">@drawable/autocomplete_divider_light</item>
|
||||
|
||||
<item name="preferenceTheme">@style/PreferenceThemeOverlay</item>
|
||||
|
||||
<item name="minTouchTargetSize">32dp</item> <!-- this affects RadioButton size -->
|
||||
|
||||
<item name="pollOptionBackgroundColor">@color/color_primary_dark_light</item>
|
||||
<item name="elevationOverlayEnabled">false</item> <!-- disable the automatic tinting of surfaces with elevation in dark mode -->
|
||||
|
||||
</style>
|
||||
|
||||
<style name="TuskyImageButton.Light" parent="@style/Widget.MaterialComponents.Button.UnelevatedButton">
|
||||
<item name="android:tint">@color/text_color_tertiary_light</item>
|
||||
<item name="android:background">?attr/selectableItemBackgroundBorderless</item>
|
||||
<style name="ViewMediaActivity.AppBarLayout" parent="ThemeOverlay.AppCompat">
|
||||
<item name="android:colorControlNormal">@color/white</item>
|
||||
</style>
|
||||
|
||||
<style name="TuskyDialog.Light" parent="@style/ThemeOverlay.MaterialComponents.Dialog.Alert">
|
||||
<style name="TuskyDialog" parent="@style/ThemeOverlay.MaterialComponents.Dialog.Alert">
|
||||
<item name="android:letterSpacing">0</item>
|
||||
<item name="dialogCornerRadius">8dp</item>
|
||||
</style>
|
||||
|
||||
<style name="TuskyDialogFragmentStyle" parent="@style/ThemeOverlay.MaterialComponents.Dialog">
|
||||
<item name="dialogCornerRadius">8dp</item>
|
||||
<item name="android:backgroundTint">?attr/windowBackgroundColor</item>
|
||||
</style>
|
||||
|
||||
<style name="TuskyTabAppearance" parent="Widget.MaterialComponents.TabLayout">
|
||||
<item name="android:textSize">?attr/status_text_medium</item>
|
||||
<item name="android:textAllCaps">true</item>
|
||||
<item name="tabIndicatorHeight">3dp</item>
|
||||
</style>
|
||||
|
||||
<style name="TuskyImageButton" parent="@style/Widget.MaterialComponents.Button.UnelevatedButton">
|
||||
<item name="android:tint">?android:attr/textColorTertiary</item>
|
||||
<item name="android:background">?attr/selectableItemBackgroundBorderless</item>
|
||||
</style>
|
||||
|
||||
<style name="TuskyButton" parent="Widget.MaterialComponents.Button">
|
||||
<item name="android:letterSpacing">0</item>
|
||||
</style>
|
||||
|
|
@ -173,31 +126,21 @@
|
|||
<item name="android:textColorHint">?android:attr/textColorTertiary</item>
|
||||
</style>
|
||||
|
||||
|
||||
<!--Black Application Theme Styles-->
|
||||
<style name="TuskyBlackThemeBase" parent="TuskyBaseTheme">
|
||||
<item name="colorPrimaryDark">@color/color_primary_dark_black</item>
|
||||
<item name="colorPrimaryDark">@color/tusky_grey_05</item>
|
||||
|
||||
<item name="android:colorBackground">@color/color_primary_dark_black</item>
|
||||
<item name="android:windowBackground">@color/window_background_black</item>
|
||||
<item name="android:textColorPrimary">@color/text_color_primary_black</item>
|
||||
<item name="android:colorBackground">@color/black</item>
|
||||
<item name="windowBackgroundColor">@color/black</item>
|
||||
|
||||
<item name="colorSurface">@color/color_primary_black</item>
|
||||
<item name="colorSurface">@color/tusky_grey_10</item>
|
||||
|
||||
<item name="recents_background_color">@color/toolbar_background_black</item>
|
||||
<item name="window_background">@color/window_background_black</item>
|
||||
<item name="sensitive_media_warning_background_color">#80000000</item>
|
||||
<item name="account_header_background_color">@color/color_background_black</item>
|
||||
<item name="iconColor">@color/tusky_grey_40</item>
|
||||
<item name="colorBackgroundAccent">@color/tusky_grey_05</item>
|
||||
|
||||
<item name="report_status_background_color">@color/color_background_black</item>
|
||||
|
||||
<item name="material_drawer_background">@color/window_background_black</item>
|
||||
<item name="material_drawer_primary_text">@color/text_color_primary_black</item>
|
||||
<item name="material_drawer_divider">@color/color_primary_dark_black</item>
|
||||
<item name="material_drawer_selected">@color/color_primary_black</item>
|
||||
<item name="material_drawer_selected_text">@color/text_color_primary_black</item>
|
||||
<item name="material_drawer_header_selection_text">@color/text_color_primary_black</item>
|
||||
<item name="tab_page_margin_color">@color/tab_page_margin_black</item>
|
||||
<item name="material_drawer_background">@color/black</item>
|
||||
<item name="material_drawer_primary_icon">@color/tusky_grey_40</item>
|
||||
<item name="material_drawer_divider">@color/tusky_grey_05</item>
|
||||
</style>
|
||||
|
||||
<style name="TuskyBlackTheme" parent="TuskyBlackThemeBase" />
|
||||
|
|
|
|||
23
app/src/main/res/values/theme_colors.xml
Normal file
23
app/src/main/res/values/theme_colors.xml
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
|
||||
<color name="colorSurface">@color/white</color>
|
||||
<color name="colorPrimaryDark">@color/tusky_grey_70</color>
|
||||
|
||||
<color name="colorBackground">@color/tusky_grey_95</color>
|
||||
<color name="windowBackground">@color/tusky_grey_80</color>
|
||||
|
||||
<color name="textColorPrimary">@color/tusky_grey_10</color>
|
||||
<color name="textColorSecondary">@color/tusky_grey_20</color>
|
||||
<color name="textColorTertiary">@color/tusky_grey_30</color>
|
||||
<color name="textColorDisabled">@color/tusky_grey_70</color>
|
||||
|
||||
<color name="iconColor">@color/tusky_grey_50</color>
|
||||
|
||||
<color name="colorBackgroundAccent">@color/tusky_grey_80</color>
|
||||
|
||||
<color name="favoriteButtonActiveColor">@color/tusky_orange_light</color>
|
||||
|
||||
<bool name="lightNavigationBar">true</bool>
|
||||
|
||||
</resources>
|
||||
Loading…
Add table
Add a link
Reference in a new issue