java - 切换日夜模式时如何为组件(工具栏、搜索栏、操作栏等)设置自定义颜色？

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 中的同一文件(夜间)

我想更改 UI 某些部分的颜色(搜索栏、工具栏、操作栏标题、 float 按钮等)，但我不知道每个元素对应哪种颜色，我有点疯狂谷歌搜索对于任何组件的棘手解决方案，我也需要更改颜色。有没有关于在哪里检查所有这些的指南或良好的视觉示例？例如，现在我花了很长时间才弄清楚如何更改弹出菜单背景或操作栏菜单背景，因为菜单文件中没有属性。我是 Android 开发新手，因此非常欢迎任何有关此问题的指导。

Answer 1

您使用了Theme.MaterialComponents.DayNight...，其中DayNight更多的是一个自适应动态主题，它会更改为 Material 设计默认颜色。如果您需要对颜色和样式进行更多控制，请执行以下操作:

• values/styles.xml 中的 Day 主题应从 Theme.MaterialComponents.Light.DarkActionBar 扩展

• values-night/styles.xml 中的 Night 主题应从 Theme.MaterialComponents 扩展，因为它非常适合用于深色模式。

I want to change the color of some parts of the UI (seekbar bar, toolbar, action bar title, floating buttons etc.)

关于这一点，如果您想要应用程序范围内的更改，那么您可以遵循这种样式方法(几乎所有 View 样式都可以通过这种方式完成):

<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、颜色和其他你想要的 Material 效果。

关于颜色:通常，您可以在 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. Official Material Design guide for designing dark theme
2. Official Material Design guide for developing dark theme
3. Using switchpreference to switch theme
4. Nick Butcher's Medium Blog : you will know more about colours here