1

我正在尝试通过为白天模式和夜间模式设置自定义主题来更改应用程序组件的某些颜色,如下所示:

在 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开发的新手,所以任何关于这方面的指导都会非常受欢迎。

4

1 回答 1

1

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

  • Day里面的主题values/styles.xml应该从Theme.MaterialComponents.Light.DarkActionBar

  • Night内部的主题values-night/styles.xml应该扩展,Theme.MaterialComponents因为它非常适合黑暗模式。

我想更改 UI 某些部分的颜色(搜索栏、工具栏、操作栏标题、浮动按钮等)

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

<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"在布局文件中使用属性来为它们中的每一个赋予不同的shapecolour以及您想要的其他材质效果。

关于颜色: 通常,您可以在您的应用程序中使用这些颜色属性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. 用于设计深色主题的官方材料设计指南
  2. 开发黑暗主题的官方材料设计指南
  3. 使用 switchpreference 切换主题
  4. Nick Butcher 的 Medium 博客:您将在这里了解更多关于颜色的信息
于 2020-05-30T07:06:42.357 回答