Как установить собственные цвета для компонентов (панель инструментов, панель поиска, панель действий и т. Д. c.) При переключении дневного / ночного режима?

Question

Я пытаюсь изменить некоторые цвета компонентов моего приложения, установив индивидуальную тему для дневного и ночного режимов, например:

в values ​​/ styles. xml (дневной режим) :

<resources>

    <!-- Base application theme. -->
    <style name="MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
...
</resources>

Тот же файл в values ​​/ styles. xml (ночь)

Я хочу изменить цвет некоторых частей пользовательского интерфейса (панель поиска, панель инструментов, заголовок панели действий , плавающие кнопки и т. д. c.), но я не знаю, какой цвет соответствует каждому элементу, и я схожу с ума в поисках хитрых решений для любого компонента, который мне тоже нужно изменить цвет. Есть ли какой-нибудь ориентир или хороший наглядный пример, где все это проверить? Например, прямо сейчас мне требуется много времени, чтобы понять, как изменить фон всплывающего меню или фон меню панели действий, поскольку в файлах меню нет атрибутов. Я новичок в разработке android, поэтому любые рекомендации по этому поводу будут очень приветствоваться.

Answer 1

Вы использовали Theme.MaterialComponents.DayNight...., где DayNight - это скорее адаптивная тема Dynami c, которая меняет цвет на цвет по умолчанию в материальном дизайне. Если вам нужно больше контроля над цветом и стилями, сделайте следующее:

• Ваша Day тема внутри values/styles.xml должна расширяться от Theme.MaterialComponents.Light.DarkActionBar

• Ваша Night тема внутри values-night/styles.xml должна расширяться от Theme.MaterialComponents, так как она хорошо подходит для темного режима.

Я хочу изменить цвет некоторых частей пользовательского интерфейса (панель поиска, панель инструментов, заголовок панели действий, плавающие кнопки и т. д. c.)

В связи с этим, если вам нужны изменения для всего приложения, вы можете следовать этому методу стили (почти все стили представления могут быть выполнены таким образом):

<resources>
            <!-- Base application theme. -->
            <style name="MyTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
                <!-- Customize your theme here. -->
                <item name="seekBarStyle">@style/MySeekBarStyle</item>
                <item name="toolbarStyle">@style/MyToolBarStyle</item>
                <item name="actionBarStyle">@style/MyActionBarStyle</item>
              <item name="floatingActionButtonStyle">@MyFloatingActionButtonStyle</item>
                <!--   a sample toolbar styling, choose parent with care -->
                <!--    your AppTheme inheriting from MaterialComponents but toolbar 
                <!--   inheriting from platform theme-->
                <!--    may case weird visual effects-->
    <style name="MyToolBarStyle" parent="Widget.MaterialComponents.Toolbar">
            <item name="titleTextColor">@color/lightWhite</item>
            <item name="subtitleTextColor">@color/lightWhite</item>
        </style>
        </resources>

Если вы хотите стилизовать каждый, например. ToolBar иначе, вы можете использовать атрибуты style="@style/MyToolBarStyle" в своих файлах макета, чтобы придать каждому из них разные shape, colour и другие эффекты материала по своему усмотрению.

О цветах: Обычно вы можете поиграть с этими цветовыми атрибутами в styles.xml, чтобы полностью изменить внешний вид вашего приложения.

 <!-- primary colour of your brand and its variants -->
        <item name="colorPrimary">@color/colorPrimary700</item>
        <item name="colorPrimaryDark">@color/colorPrimary900</item>
        <item name="colorPrimaryVariant">@color/colorPrimary500</item>

        <!-- colour which contrasts from your primary colour -->
        <item name="colorAccent">@color/colorAccent</item>

        <!--secondary colour of your brand and its variants -->
        <item name="colorSecondary">@color/colorSecondary700</item>
        <item name="colorSecondaryVariant">@color/colorSecondary500</item>

        <!--background color for your root layout file -->
        <item name="android:colorBackground">@android:color/white</item>

        <!--background color of children view -->
        <item name="colorSurface">@color/lightWhite</item>

        <!--color to show error mostly it will be red or orange
        <item name="colorError">@color/colorErrorAlternate</item>

        <!-- These are colors which constrasts colors defined for -->
        <!-- primary, secondary, bg, surface, error respectively. -->
        <!-- For eg: TextViews in Toolbar colored with colorPrimary -->
        <!-- will use colorOnPrimary as their text color -->

        <item name="colorOnPrimary">@color/lightWhite</item>
        <item name="colorOnSecondary">@color/lightDark</item>
        <item name="colorOnBackground">@color/lightDark</item>
        <item name="colorOnSurface">@color/lightDark</item>
        <item name="colorOnError">@color/lightDark</item>

---

Важные ссылки:

1. Официальное руководство по Material Design для разработки темной темы
2. Официальное руководство по Material Design для разработки темной темы
3. Использование switchpreference для переключения темы
4. Средний блог Ника Батчера: вы узнаете больше о цветах здесь