如何在切换day/night模式时为组件（toolbar、seekbar、actionbar等）设置自定义颜色？

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 某些部分的颜色（搜索栏、工具栏、操作栏标题、浮动按钮等），但我不知道每个元素对应哪种颜色，我我有点疯狂地在这里和那里搜索任何我需要更改颜色的组件的棘手解决方案。是否有关于在哪里检查所有这些的指南或良好的视觉示例？例如，现在我花了很长时间才弄清楚如何更改弹出菜单背景或操作栏菜单背景，因为菜单文件中没有属性。我是 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.)

关于这一点，如果你想在整个应用程序范围内进行更改，那么你可以遵循这种样式设置方法（几乎所有视图样式设置都可以通过这种方式完成）：

<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 和其他 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>

重要链接：

Official Material Design guide for designing dark theme
Official Material Design guide for developing dark theme
Using switchpreference to switch theme
Nick Butcher's Medium Blog : you will know more about colours here

如何在切换day/night模式时为组件（toolbar、seekbar、actionbar等）设置自定义颜色？

How to set custom colors for components (toolbar, seekbar,actionbar, etc.) when switching day/night mode?

java

android

android-styles

theme-daynight