切换昼/夜模式时如何为组件(工具栏,搜寻栏,操作栏等)设置自定义颜色?

问题描述 投票:0回答: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的某些部分的颜色(搜索栏,工具栏,操作栏标题,浮动按钮等),但我不知道每种元素对应的颜色,我在这里有点儿疯狂还有针对任何组件的棘手解决方案,我也需要更改颜色。关于在哪里检查所有这些内容,是否有任何指南或良好的视觉示例?例如,由于菜单文件中没有属性,因此现在我花很长时间来弄清楚如何更改popupmenu背景或操作栏菜单背景。我是android开发的新手,因此非常欢迎您提供任何有关此方面的指导。

java android android-styles theme-daynight
1个回答
0
投票

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

  • 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. 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
© www.soinside.com 2019 - 2024. All rights reserved.