Updated themes so they are separated from styles
This commit is contained in:
parent
8918113a31
commit
fbeaad077f
@ -14,6 +14,7 @@
|
|||||||
<androidx.coordinatorlayout.widget.CoordinatorLayout
|
<androidx.coordinatorlayout.widget.CoordinatorLayout
|
||||||
android:layout_width="match_parent"
|
android:layout_width="match_parent"
|
||||||
android:layout_height="match_parent"
|
android:layout_height="match_parent"
|
||||||
|
android:background="?colorSurface"
|
||||||
android:orientation="vertical"
|
android:orientation="vertical"
|
||||||
android:paddingLeft="@{viewModel.insets.left}"
|
android:paddingLeft="@{viewModel.insets.left}"
|
||||||
android:paddingRight="@{viewModel.insets.right}"
|
android:paddingRight="@{viewModel.insets.right}"
|
||||||
|
@ -118,7 +118,7 @@
|
|||||||
android:singleLine="true"
|
android:singleLine="true"
|
||||||
android:text="@={viewModel.query}"
|
android:text="@={viewModel.query}"
|
||||||
android:textAppearance="?appearanceTextBodyNormal"
|
android:textAppearance="?appearanceTextBodyNormal"
|
||||||
android:textColor="?colorTextTransient"
|
android:textColor="@color/color_text_transient"
|
||||||
android:textColorHint="?colorOnSurfaceVariant" />
|
android:textColorHint="?colorOnSurfaceVariant" />
|
||||||
|
|
||||||
</com.google.android.material.card.MaterialCardView>
|
</com.google.android.material.card.MaterialCardView>
|
||||||
|
@ -103,7 +103,7 @@
|
|||||||
android:singleLine="true"
|
android:singleLine="true"
|
||||||
android:text="@={viewModel.query}"
|
android:text="@={viewModel.query}"
|
||||||
android:textAppearance="?appearanceTextBodyNormal"
|
android:textAppearance="?appearanceTextBodyNormal"
|
||||||
android:textColor="?colorTextTransient"
|
android:textColor="@color/color_text_transient"
|
||||||
android:textColorHint="?colorOnSurfaceVariant" />
|
android:textColorHint="?colorOnSurfaceVariant" />
|
||||||
|
|
||||||
</com.google.android.material.card.MaterialCardView>
|
</com.google.android.material.card.MaterialCardView>
|
||||||
|
@ -41,7 +41,7 @@
|
|||||||
app:layout_constraintStart_toEndOf="@+id/developer_link"
|
app:layout_constraintStart_toEndOf="@+id/developer_link"
|
||||||
app:layout_constraintTop_toTopOf="@+id/developer_link"
|
app:layout_constraintTop_toTopOf="@+id/developer_link"
|
||||||
app:srcCompat="@drawable/ic_more"
|
app:srcCompat="@drawable/ic_more"
|
||||||
app:tint="?colorTextTransient" />
|
app:tint="@color/color_text_transient" />
|
||||||
|
|
||||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
android:layout_height="wrap_content"
|
android:layout_height="wrap_content"
|
||||||
android:text="@{item.title}"
|
android:text="@{item.title}"
|
||||||
android:textAppearance="?appearanceTextBodyNormal"
|
android:textAppearance="?appearanceTextBodyNormal"
|
||||||
android:textColor="?colorPrimaryTransient"
|
android:textColor="@color/color_primary_transient"
|
||||||
android:textStyle="bold"
|
android:textStyle="bold"
|
||||||
tools:text="@tools:sample/lorem/random"
|
tools:text="@tools:sample/lorem/random"
|
||||||
app:layout_constraintBottom_toBottomOf="parent"
|
app:layout_constraintBottom_toBottomOf="parent"
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<resources>
|
<resources>
|
||||||
|
|
||||||
<style name="Foundation.Default" parent="Foundation.Base">
|
<style name="ThemeFoundationMD2.Default">
|
||||||
<item name="colorPrimary">#2196F3</item>
|
<item name="colorPrimary">#2196F3</item>
|
||||||
<item name="colorPrimaryVariant">#802196F3</item>
|
<item name="colorPrimaryVariant">#802196F3</item>
|
||||||
<item name="colorSecondary">#63B9FF</item>
|
<item name="colorSecondary">#63B9FF</item>
|
||||||
@ -19,10 +19,6 @@
|
|||||||
<item name="colorOnSurfaceVariant">#80BABABA</item>
|
<item name="colorOnSurfaceVariant">#80BABABA</item>
|
||||||
<item name="colorDisabled">#808080</item>
|
<item name="colorDisabled">#808080</item>
|
||||||
<item name="colorDisabledVariant">#66808080</item>
|
<item name="colorDisabledVariant">#66808080</item>
|
||||||
<item name="colorTextTransient">@color/color_text_transient</item>
|
|
||||||
<item name="colorPrimaryTransient">@color/color_primary_transient</item>
|
|
||||||
<item name="colorErrorTransient">@color/color_error_transient</item>
|
|
||||||
<item name="colorOnPrimaryTransient">@color/color_on_primary_transient</item>
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</resources>
|
</resources>
|
@ -87,12 +87,6 @@
|
|||||||
|
|
||||||
<!--region Colors-->
|
<!--region Colors-->
|
||||||
|
|
||||||
<!--Transient-->
|
|
||||||
<attr name="colorTextTransient" format="reference" />
|
|
||||||
<attr name="colorPrimaryTransient" format="reference" />
|
|
||||||
<attr name="colorOnPrimaryTransient" format="reference" />
|
|
||||||
<attr name="colorErrorTransient" format="reference" />
|
|
||||||
|
|
||||||
<!--Static-->
|
<!--Static-->
|
||||||
<attr name="colorDisabled" format="color" />
|
<attr name="colorDisabled" format="color" />
|
||||||
<attr name="colorDisabledVariant" format="color" />
|
<attr name="colorDisabledVariant" format="color" />
|
||||||
|
@ -103,28 +103,9 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style name="Foundation.Default" parent="Foundation.Base">
|
<style name="Foundation.Default" parent="Foundation.Base">
|
||||||
<item name="android:theme">@style/Theme.Rayquaza</item>
|
<item name="android:theme">@style/ThemeFoundationMD2.Default</item>
|
||||||
<item name="colorPrimary">#2196F3</item>
|
<!--setting window background to transparent should reduce overdraw-->
|
||||||
<item name="colorPrimaryVariant">#802196F3</item>
|
<item name="android:windowBackground">@android:color/transparent</item>
|
||||||
<item name="colorSecondary">#1766A6</item>
|
|
||||||
<item name="colorSecondaryVariant">#801766A6</item>
|
|
||||||
<item name="colorSurface">#F2F2F2</item>
|
|
||||||
<item name="colorSurfaceVariant">#E8E8E8</item>
|
|
||||||
<item name="colorSurfaceSurfaceVariant">?colorSurface</item>
|
|
||||||
<item name="colorOnPrimary">#F2F2F2</item>
|
|
||||||
<item name="colorOnPrimaryVariant">#D9E6E6E6</item>
|
|
||||||
<item name="colorOnSecondary">#F2F2F2</item>
|
|
||||||
<item name="colorOnBackground">#F2F2F2</item>
|
|
||||||
<item name="colorError">#CC0047</item>
|
|
||||||
<item name="colorOnError">#F2F2F2</item>
|
|
||||||
<item name="colorOnSurface">#444444</item>
|
|
||||||
<item name="colorOnSurfaceVariant">#80444444</item>
|
|
||||||
<item name="colorDisabled">#808080</item>
|
|
||||||
<item name="colorDisabledVariant">#66808080</item>
|
|
||||||
<item name="colorTextTransient">@color/color_text_transient</item>
|
|
||||||
<item name="colorPrimaryTransient">@color/color_primary_transient</item>
|
|
||||||
<item name="colorErrorTransient">@color/color_error_transient</item>
|
|
||||||
<item name="colorOnPrimaryTransient">@color/color_on_primary_transient</item>
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</resources>
|
</resources>
|
@ -137,19 +137,19 @@ variant. Make sure to use style referenced by attribute defined it attrs.xml.
|
|||||||
<style name="WidgetFoundation.Icon" parent="WidgetFoundation.Image.Big">
|
<style name="WidgetFoundation.Icon" parent="WidgetFoundation.Image.Big">
|
||||||
<item name="android:padding">@dimen/l_75</item>
|
<item name="android:padding">@dimen/l_75</item>
|
||||||
<item name="android:background">?selectableItemBackgroundBorderless</item>
|
<item name="android:background">?selectableItemBackgroundBorderless</item>
|
||||||
<item name="tint">?colorTextTransient</item>
|
<item name="tint">@color/color_text_transient</item>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style name="WidgetFoundation.Icon.Primary">
|
<style name="WidgetFoundation.Icon.Primary">
|
||||||
<item name="tint">?colorPrimaryTransient</item>
|
<item name="tint">@color/color_primary_transient</item>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style name="WidgetFoundation.Icon.OnPrimary">
|
<style name="WidgetFoundation.Icon.OnPrimary">
|
||||||
<item name="tint">?colorOnPrimaryTransient</item>
|
<item name="tint">@color/color_on_primary_transient</item>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style name="WidgetFoundation.Icon.Error">
|
<style name="WidgetFoundation.Icon.Error">
|
||||||
<item name="tint">?colorErrorTransient</item>
|
<item name="tint">@color/color_error_transient</item>
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style name="WidgetFoundation.Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">
|
<style name="WidgetFoundation.Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">
|
||||||
|
71
app/src/main/res/values/themes_md2.xml
Normal file
71
app/src/main/res/values/themes_md2.xml
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<resources>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
# Theme guide
|
||||||
|
|
||||||
|
This should provide all the information you need to create new !color! themes.
|
||||||
|
|
||||||
|
## Inheritance
|
||||||
|
|
||||||
|
You might want to inherit default values from "base" theme. You can do so implicitly by just
|
||||||
|
writing `<style name="ThemeFoundationMD2.MySuperAwesomeTheme" parent="ThemeFoundationMD2.Default">`.
|
||||||
|
With this approach you can only change values you (don't) like - such as `colorPrimary` or
|
||||||
|
`colorSecondary`.
|
||||||
|
There's also an option to define theme completely from ground up and that's done just by
|
||||||
|
omitting `parent="..."`. It will inherit _nothing_ from the base.
|
||||||
|
|
||||||
|
## Day / Night ? How do I define both in one theme?
|
||||||
|
|
||||||
|
Define Theme here for "Day" theme and in `values-night` directory define theme with same name
|
||||||
|
and parent if applicable. The framework will automatically switch between day/night themes based
|
||||||
|
on user's requested configuration. (Always light, Always dark, Follow system)
|
||||||
|
|
||||||
|
You might choose to define only "Day" theme with Dark colors to have dark theme regardless.
|
||||||
|
That's super lazy approach and is discouraged but the framework permits it. If not inherited
|
||||||
|
from default theme, you must define all colors yourself in both day AND night variants.
|
||||||
|
|
||||||
|
## What to theme
|
||||||
|
|
||||||
|
Generally I'd suggest theming only `colorPrimary`, `colorSecondary` and their variants. Make
|
||||||
|
sure that text is readable if displayed on primary or secondary color!
|
||||||
|
|
||||||
|
You can check that very easily by visiting https://www.colorhexa.com/. After you put in your
|
||||||
|
color hex, you can scroll down to "Preview" where it will compute whether dark/bright text
|
||||||
|
should be displayed on top of it. Then you must edit respective `colorOn...`.
|
||||||
|
|
||||||
|
Also check "Color Blindness Simulator". Primary and secondary colors must not match or be
|
||||||
|
similar in type. Text on color must have enough contrast so it can be read by everyone!
|
||||||
|
|
||||||
|
!! Themes that will not satisfy these requirements will be promptly deleted without further
|
||||||
|
!! notice. In repeated attempts to push such themes you will be automatically blacklisted.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<style name="ThemeFoundationMD2" parent="" />
|
||||||
|
|
||||||
|
<!--1st party themes-->
|
||||||
|
|
||||||
|
<style name="ThemeFoundationMD2.Default">
|
||||||
|
<item name="colorPrimary">#2196F3</item>
|
||||||
|
<item name="colorPrimaryVariant">#802196F3</item>
|
||||||
|
<item name="colorSecondary">#1766A6</item>
|
||||||
|
<item name="colorSecondaryVariant">#801766A6</item>
|
||||||
|
<item name="colorSurface">#F2F2F2</item>
|
||||||
|
<item name="colorSurfaceVariant">#E8E8E8</item>
|
||||||
|
<item name="colorSurfaceSurfaceVariant">?colorSurface</item>
|
||||||
|
<item name="colorOnPrimary">#F2F2F2</item>
|
||||||
|
<item name="colorOnPrimaryVariant">#D9E6E6E6</item>
|
||||||
|
<item name="colorOnSecondary">#F2F2F2</item>
|
||||||
|
<item name="colorOnBackground">#F2F2F2</item>
|
||||||
|
<item name="colorError">#CC0047</item>
|
||||||
|
<item name="colorOnError">#F2F2F2</item>
|
||||||
|
<item name="colorOnSurface">#444444</item>
|
||||||
|
<item name="colorOnSurfaceVariant">#80444444</item>
|
||||||
|
<item name="colorDisabled">#808080</item>
|
||||||
|
<item name="colorDisabledVariant">#66808080</item>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<!--3rd party themes-->
|
||||||
|
|
||||||
|
</resources>
|
Loading…
Reference in New Issue
Block a user