材质 3 colorSchemeSeed 并具有纯黑白主题

问题描述 投票：0回答：3

使用 Material 3，colorSchemeSeed 可用于设置整个应用程序的颜色。这适用于红色、蓝色和绿色等颜色。如果保留默认值，颜色将为紫色。当尝试使用黑色作为种子时，颜色默认为紫色。 拥有 Material 3 应用程序的最佳方式是什么，但应用程序主题的颜色是纯黑和白（在浅色和深色模式下）？

flutter material-design
3个回答
6
投票

最简单的方法是手动设置 ThemeData colorScheme。 这是针对浅色主题的，您只需设置 Brightness.dark 并交换黑色和白色即可获得深色主题

ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme(
          brightness: Brightness.light,
          primary: Colors.black,
          onPrimary: Colors.white,
          secondary: Colors.white,
          onSecondary: Colors.black,
          error: Colors.red,
          onError: Colors.white,
          background: Colors.white,
          onBackground: Colors.black,
          surface: Colors.white,
          onSurface: Colors.black,
        ),
        textTheme: textTheme,
)
0
投票

为了进一步构建seanyyyyy回答的内容，我通过以下主题输入归档了我想要的黑白外观。

final Map<int, Color> color = {
    50: const Color.fromRGBO(0, 0, 0, .1),
    100: const Color.fromRGBO(0, 0, 0, .2),
    200: const Color.fromRGBO(0, 0, 0, .3),
    300: const Color.fromRGBO(0, 0, 0, .4),
    400: const Color.fromRGBO(0, 0, 0, .5),
    500: const Color.fromRGBO(0, 0, 0, .6),
    600: const Color.fromRGBO(0, 0, 0, .7),
    700: const Color.fromRGBO(0, 0, 0, .8),
    800: const Color.fromRGBO(0, 0, 0, .9),
    900: const Color.fromRGBO(0, 0, 0, 1),
  };

  final Map<int, Color> colorWhite = {
    50: const Color.fromRGBO(255, 255, 255, .1),
    100: const Color.fromRGBO(255, 255, 255, .2),
    200: const Color.fromRGBO(255, 255, 255, .3),
    300: const Color.fromRGBO(255, 255, 255, .4),
    400: const Color.fromRGBO(255, 255, 255, .5),
    500: const Color.fromRGBO(255, 255, 255, .6),
    600: const Color.fromRGBO(255, 255, 255, .7),
    700: const Color.fromRGBO(255, 255, 255, .8),
    800: const Color.fromRGBO(255, 255, 255, .9),
    900: const Color.fromRGBO(255, 255, 255, 1),
  };

theme: ThemeData(
    useMaterial3: true,
    brightness: Brightness.light,
    colorScheme: ColorScheme.light(
      secondaryContainer: Colors.grey,
      primary: MaterialColor(0xFF000000, color),
      surface: MaterialColor(0xFFFFFFFF, colorWhite),
      surfaceVariant: MaterialColor(0xFFFFFFFF, colorWhite),
      onSurface: Colors.black,
    ),
    tabBarTheme: TabBarTheme(
      labelColor: MaterialColor(0xFF000000, color),
    ),
    appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(
          color: MaterialColor(0xFF000000, color), 
        )),
    primarySwatch: MaterialColor(0xFF000000, color),
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  darkTheme: ThemeData(
    useMaterial3: true,
    brightness: Brightness.dark,
    colorScheme: ColorScheme.dark(
      primary:MaterialColor(0xFFFFFFFF, colorWhite),
      secondary:Colors.lightBlue,
      tertiary: Colors.lightBlue,
    ),
    tabBarTheme: TabBarTheme(
      labelColor: MaterialColor(0xFFFFFFFF, colorWhite),
    ),
    appBarTheme: AppBarTheme(
        iconTheme: IconThemeData(
          color: MaterialColor(0xFFFFFFFF, colorWhite),
        )),
    primarySwatch: MaterialColor(0xFFFFFFFF, colorWhite),
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
0
投票

超级信息我一直在寻找这个，我正在尝试在我的figma设计中实现它。

问题，我是否需要在 json 文件中执行此操作并导入到材料 3，我尝试过，但不起作用。这是M3的颜色导出文件。

{
  "seed": "#6750A4",
  "name": "material-theme",
  "description": "TYPE: BASELINE",
  "baseline": true,
  "extendedColors": [],
  "coreColors": {
    "primary": "#6750A4"
  },
  "schemes": {
    "light": {
      "primary": "#6750A4",
      "onPrimary": "#FFFFFF",
      "primaryContainer": "#EADDFF",
      "onPrimaryContainer": "#21005D",
      "primaryFixed": "#EADDFF",
      "onPrimaryFixed": "#21005D",
      "primaryFixedDim": "#D0BCFF",
      "onPrimaryFixedVariant": "#4F378B",
      "secondary": "#625B71",
      "onSecondary": "#FFFFFF",
      "secondaryContainer": "#E8DEF8",
      "onSecondaryContainer": "#1D192B",
      "secondaryFixed": "#E8DEF8",
      "onSecondaryFixed": "#1D192B",
      "secondaryFixedDim": "#CCC2DC",
      "onSecondaryFixedVariant": "#4A4458",
      "tertiary": "#7D5260",
      "onTertiary": "#FFFFFF",
      "tertiaryContainer": "#FFD8E4",
      "onTertiaryContainer": "#31111D",
      "tertiaryFixed": "#FFD8E4",
      "onTertiaryFixed": "#31111D",
      "tertiaryFixedDim": "#EFB8C8",
      "onTertiaryFixedVariant": "#633B48",
      "error": "#B3261E",
      "onError": "#FFFFFF",
      "errorContainer": "#F9DEDC",
      "onErrorContainer": "#410E0B",
      "outline": "#79747E",
      "background": "#FEF7FF",
      "onBackground": "#1D1B20",
      "surface": "#FEF7FF",
      "onSurface": "#1D1B20",
      "surfaceVariant": "#E7E0EC",
      "onSurfaceVariant": "#49454F",
      "inverseSurface": "#322F35",
      "inverseOnSurface": "#F5EFF7",
      "inversePrimary": "#D0BCFF",
      "shadow": "#000000",
      "surfaceTint": "#6750A4",
      "outlineVariant": "#CAC4D0",
      "scrim": "#000000",
      "surfaceContainerHighest": "#E6E0E9",
      "surfaceContainerHigh": "#ECE6F0",
      "surfaceContainer": "#F3EDF7",
      "surfaceContainerLow": "#F7F2FA",
      "surfaceContainerLowest": "#FFFFFF",
      "surfaceBright": "#FEF7FF",
      "surfaceDim": "#DED8E1"
    },
    "dark": {
      "primary": "#D0BCFF",
      "onPrimary": "#381E72",
      "primaryContainer": "#4F378B",
      "onPrimaryContainer": "#EADDFF",
      "primaryFixed": "#EADDFF",
      "onPrimaryFixed": "#21005D",
      "primaryFixedDim": "#D0BCFF",
      "onPrimaryFixedVariant": "#4F378B",
      "secondary": "#CCC2DC",
      "onSecondary": "#332D41",
      "secondaryContainer": "#4A4458",
      "onSecondaryContainer": "#E8DEF8",
      "secondaryFixed": "#E8DEF8",
      "onSecondaryFixed": "#1D192B",
      "secondaryFixedDim": "#CCC2DC",
      "onSecondaryFixedVariant": "#4A4458",
      "tertiary": "#EFB8C8",
      "onTertiary": "#492532",
      "tertiaryContainer": "#633B48",
      "onTertiaryContainer": "#FFD8E4",
      "tertiaryFixed": "#FFD8E4",
      "onTertiaryFixed": "#31111D",
      "tertiaryFixedDim": "#EFB8C8",
      "onTertiaryFixedVariant": "#633B48",
      "error": "#F2B8B5",
      "onError": "#601410",
      "errorContainer": "#8C1D18",
      "onErrorContainer": "#F9DEDC",
      "outline": "#938F99",
      "background": "#141218",
      "onBackground": "#E6E0E9",
      "surface": "#141218",
      "onSurface": "#E6E0E9",
      "surfaceVariant": "#49454F",
      "onSurfaceVariant": "#CAC4D0",
      "inverseSurface": "#E6E0E9",
      "inverseOnSurface": "#322F35",
      "inversePrimary": "#6750A4",
      "shadow": "#000000",
      "surfaceTint": "#D0BCFF",
      "outlineVariant": "#49454F",
      "scrim": "#000000",
      "surfaceContainerHighest": "#36343B",
      "surfaceContainerHigh": "#2B2930",
      "surfaceContainer": "#211F26",
      "surfaceContainerLow": "#1D1B20",
      "surfaceContainerLowest": "#0F0D13",
      "surfaceBright": "#3B383E",
      "surfaceDim": "#141218"
    }
  },
  "palettes": {
    "primary": {
      "0": "#000000",
      "10": "#21005D",
      "20": "#381E72",
      "30": "#4F378B",
      "40": "#6750A4",
      "50": "#7F67BE",
      "60": "#9A82DB",
      "70": "#B69DF8",
      "80": "#D0BCFF",
      "90": "#EADDFF",
      "95": "#F6EDFF",
      "99": "#FFFBFE",
      "100": "#FFFFFF"
    },
    "secondary": {
      "0": "#000000",
      "10": "#1D192B",
      "20": "#332D41",
      "30": "#4A4458",
      "40": "#625B71",
      "50": "#7A7289",
      "60": "#958DA5",
      "70": "#B0A7C0",
      "80": "#CCC2DC",
      "90": "#E8DEF8",
      "95": "#F6EDFF",
      "99": "#FFFBFE",
      "100": "#FFFFFF"
    },
    "tertiary": {
      "0": "#000000",
      "10": "#31111D",
      "20": "#492532",
      "30": "#633B48",
      "40": "#7D5260",
      "50": "#986977",
      "60": "#B58392",
      "70": "#D29DAC",
      "80": "#EFB8C8",
      "90": "#FFD8E4",
      "95": "#FFECF1",
      "99": "#FFFBFA",
      "100": "#FFFFFF"
    },
    "error": {
      "0": "#000000",
      "10": "#410E0B",
      "20": "#601410",
      "30": "#8C1D18",
      "40": "#B3261E",
      "50": "#DC362E",
      "60": "#E46962",
      "70": "#EC928E",
      "80": "#F2B8B5",
      "90": "#F9DEDC",
      "95": "#FCEEEE",
      "99": "#FFFBF9",
      "100": "#FFFFFF"
    },
    "neutral": {
      "0": "#000000",
      "4": "#0F0D13",
      "6": "#141218",
      "10": "#1D1B20",
      "12": "#211F26",
      "17": "#2B2930",
      "20": "#322F35",
      "22": "#36343B",
      "24": "#3B383E",
      "30": "#48464C",
      "40": "#605D64",
      "50": "#79767D",
      "60": "#938F96",
      "70": "#AEA9B1",
      "80": "#CAC5CD",
      "87": "#DED8E1",
      "90": "#E6E0E9",
      "92": "#ECE6F0",
      "94": "#F3EDF7",
      "95": "#F5EFF7",
      "96": "#F7F2FA",
      "98": "#FEF7FF",
      "99": "#FFFBFF",
      "100": "#FFFFFF"
    },
    "neutralVariant": {
      "0": "#000000",
      "10": "#1D1A22",
      "20": "#322F37",
      "30": "#49454F",
      "40": "#605D66",
      "50": "#79747E",
      "60": "#938F99",
      "70": "#AEA9B4",
      "80": "#CAC4D0",
      "90": "#E7E0EC",
      "95": "#F5EEFA",
      "99": "#FFFBFE",
      "100": "#FFFFFF"
    }
  },
  "styles": {
    "display": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 57,
        "lineHeight": 64,
        "letterSpacing": -0.25
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 45,
        "lineHeight": 52,
        "letterSpacing": 0
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 36,
        "lineHeight": 44,
        "letterSpacing": 0
      }
    },
    "headline": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 32,
        "lineHeight": 40,
        "letterSpacing": 0
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 28,
        "lineHeight": 36,
        "letterSpacing": 0
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 24,
        "lineHeight": 32,
        "letterSpacing": 0
      }
    },
    "body": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 16,
        "lineHeight": 24,
        "letterSpacing": 0.5
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 14,
        "lineHeight": 20,
        "letterSpacing": 0.25
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 12,
        "lineHeight": 16,
        "letterSpacing": 0.4000000059604645
      }
    },
    "label": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 14,
        "lineHeight": 20,
        "letterSpacing": 0.10000000149011612
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 12,
        "lineHeight": 16,
        "letterSpacing": 0.5
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 11,
        "lineHeight": 16,
        "letterSpacing": 0.5
      }
    },
    "title": {
      "large": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Regular",
        "fontWeight": 400,
        "fontSize": 22,
        "lineHeight": 28,
        "letterSpacing": 0
      },
      "medium": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 16,
        "lineHeight": 24,
        "letterSpacing": 0.15000000596046448
      },
      "small": {
        "fontFamilyName": "Roboto",
        "fontFamilyStyle": "Medium",
        "fontWeight": 500,
        "fontSize": 14,
        "lineHeight": 20,
        "letterSpacing": 0.10000000149011612
      }
    }
  },
  "customColors": []
}

有没有办法将代码添加到此或更改为黑白。谢谢

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.