みちのぶのねぐら
Tailwind 用の Material 3 Color Theme
Update: 2024-10-19
Material Theme Builder
で生成したものを tailwind.config.js 用に加工しました。
続きは Svelte 用の Material 3 風のコンポーネント です。
Red
Seed: #B33B15
Contrast: Low
theme: {
colors: {
lightPrimary: "#8F4C38",
lightSurfaceTint: "#8F4C38",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#FFDBD1",
lightOnPrimaryContainer: "#3A0B01",
lightSecondary: "#77574E",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#FFDBD1",
lightOnSecondaryContainer: "#2C150F",
lightTertiary: "#6C5D2F",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#F5E1A7",
lightOnTertiaryContainer: "#231B00",
lightError: "#BA1A1A",
lightOnError: "#FFFFFF",
lightErrorContainer: "#FFDAD6",
lightOnErrorContainer: "#410002",
lightBackground: "#FFF8F6",
lightOnBackground: "#231917",
lightSurface: "#FFF8F6",
lightOnSurface: "#231917",
lightSurfaceVariant: "#F5DED8",
lightOnSurfaceVariant: "#53433F",
lightOutline: "#85736E",
lightOutlineVariant: "#D8C2BC",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#392E2B",
lightInverseOnSurface: "#FFEDE8",
lightInversePrimary: "#FFB5A0",
lightPrimaryFixed: "#FFDBD1",
lightOnPrimaryFixed: "#3A0B01",
lightPrimaryFixedDim: "#FFB5A0",
lightOnPrimaryFixedVariant: "#723523",
lightSecondaryFixed: "#FFDBD1",
lightOnSecondaryFixed: "#2C150F",
lightSecondaryFixedDim: "#E7BDB2",
lightOnSecondaryFixedVariant: "#5D4037",
lightTertiaryFixed: "#F5E1A7",
lightOnTertiaryFixed: "#231B00",
lightTertiaryFixedDim: "#D8C58D",
lightOnTertiaryFixedVariant: "#534619",
lightSurfaceDim: "#E8D6D2",
lightSurfaceBright: "#FFF8F6",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#FFF1ED",
lightSurfaceContainer: "#FCEAE5",
lightSurfaceContainerHigh: "#F7E4E0",
lightSurfaceContainerHighest: "#F1DFDA",
darkPrimary: "#FFB5A0",
darkSurfaceTint: "#FFB5A0",
darkOnPrimary: "#561F0F",
darkPrimaryContainer: "#723523",
darkOnPrimaryContainer: "#FFDBD1",
darkSecondary: "#E7BDB2",
darkOnSecondary: "#442A22",
darkSecondaryContainer: "#5D4037",
darkOnSecondaryContainer: "#FFDBD1",
darkTertiary: "#D8C58D",
darkOnTertiary: "#3B2F05",
darkTertiaryContainer: "#534619",
darkOnTertiaryContainer: "#F5E1A7",
darkError: "#FFB4AB",
darkOnError: "#690005",
darkErrorContainer: "#93000A",
darkOnErrorContainer: "#FFDAD6",
darkBackground: "#1A110F",
darkOnBackground: "#F1DFDA",
darkSurface: "#1A110F",
darkOnSurface: "#F1DFDA",
darkSurfaceVariant: "#53433F",
darkOnSurfaceVariant: "#D8C2BC",
darkOutline: "#A08C87",
darkOutlineVariant: "#53433F",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#F1DFDA",
darkInverseOnSurface: "#392E2B",
darkInversePrimary: "#8F4C38",
darkPrimaryFixed: "#FFDBD1",
darkOnPrimaryFixed: "#3A0B01",
darkPrimaryFixedDim: "#FFB5A0",
darkOnPrimaryFixedVariant: "#723523",
darkSecondaryFixed: "#FFDBD1",
darkOnSecondaryFixed: "#2C150F",
darkSecondaryFixedDim: "#E7BDB2",
darkOnSecondaryFixedVariant: "#5D4037",
darkTertiaryFixed: "#F5E1A7",
darkOnTertiaryFixed: "#231B00",
darkTertiaryFixedDim: "#D8C58D",
darkOnTertiaryFixedVariant: "#534619",
darkSurfaceDim: "#1A110F",
darkSurfaceBright: "#423734",
darkSurfaceContainerLowest: "#140C0A",
darkSurfaceContainerLow: "#231917",
darkSurfaceContainer: "#271D1B",
darkSurfaceContainerHigh: "#322825",
darkSurfaceContainerHighest: "#3D322F",
}
}
Contrast: Middle
theme: {
colors: {
lightPrimary: "#6D311F",
lightSurfaceTint: "#8F4C38",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#AA614C",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#593C34",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#8F6D63",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#4E4216",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#837442",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#8C0009",
lightOnError: "#FFFFFF",
lightErrorContainer: "#DA342E",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#FFF8F6",
lightOnBackground: "#231917",
lightSurface: "#FFF8F6",
lightOnSurface: "#231917",
lightSurfaceVariant: "#F5DED8",
lightOnSurfaceVariant: "#4F3F3B",
lightOutline: "#6C5B57",
lightOutlineVariant: "#897772",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#392E2B",
lightInverseOnSurface: "#FFEDE8",
lightInversePrimary: "#FFB5A0",
lightPrimaryFixed: "#AA614C",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#8C4936",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#8F6D63",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#74544B",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#837442",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#695B2C",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#E8D6D2",
lightSurfaceBright: "#FFF8F6",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#FFF1ED",
lightSurfaceContainer: "#FCEAE5",
lightSurfaceContainerHigh: "#F7E4E0",
lightSurfaceContainerHighest: "#F1DFDA",
darkPrimary: "#FFBBA7",
darkSurfaceTint: "#FFB5A0",
darkOnPrimary: "#310700",
darkPrimaryContainer: "#CB7C65",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#ECC1B6",
darkOnSecondary: "#26100A",
darkSecondaryContainer: "#AE887E",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#DDCA91",
darkOnTertiary: "#1D1600",
darkTertiaryContainer: "#A0905C",
darkOnTertiaryContainer: "#000000",
darkError: "#FFBAB1",
darkOnError: "#370001",
darkErrorContainer: "#FF5449",
darkOnErrorContainer: "#000000",
darkBackground: "#1A110F",
darkOnBackground: "#F1DFDA",
darkSurface: "#1A110F",
darkOnSurface: "#FFF9F8",
darkSurfaceVariant: "#53433F",
darkOnSurfaceVariant: "#DCC6C0",
darkOutline: "#B39E99",
darkOutlineVariant: "#927F7A",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#F1DFDA",
darkInverseOnSurface: "#322825",
darkInversePrimary: "#743624",
darkPrimaryFixed: "#FFDBD1",
darkOnPrimaryFixed: "#280500",
darkPrimaryFixedDim: "#FFB5A0",
darkOnPrimaryFixedVariant: "#5D2514",
darkSecondaryFixed: "#FFDBD1",
darkOnSecondaryFixed: "#200B06",
darkSecondaryFixedDim: "#E7BDB2",
darkOnSecondaryFixedVariant: "#4B2F28",
darkTertiaryFixed: "#F5E1A7",
darkOnTertiaryFixed: "#171100",
darkTertiaryFixedDim: "#D8C58D",
darkOnTertiaryFixedVariant: "#41350A",
darkSurfaceDim: "#1A110F",
darkSurfaceBright: "#423734",
darkSurfaceContainerLowest: "#140C0A",
darkSurfaceContainerLow: "#231917",
darkSurfaceContainer: "#271D1B",
darkSurfaceContainerHigh: "#322825",
darkSurfaceContainerHighest: "#3D322F",
}
}
Contrast: High
theme: {
colors: {
lightPrimary: "#431104",
lightSurfaceTint: "#8F4C38",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#6D311F",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#341C15",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#593C34",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#2B2100",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#4E4216",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#4E0002",
lightOnError: "#FFFFFF",
lightErrorContainer: "#8C0009",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#FFF8F6",
lightOnBackground: "#231917",
lightSurface: "#FFF8F6",
lightOnSurface: "#000000",
lightSurfaceVariant: "#F5DED8",
lightOnSurfaceVariant: "#2E211D",
lightOutline: "#4F3F3B",
lightOutlineVariant: "#4F3F3B",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#392E2B",
lightInverseOnSurface: "#FFFFFF",
lightInversePrimary: "#FFE7E1",
lightPrimaryFixed: "#6D311F",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#511C0C",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#593C34",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#40261F",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#4E4216",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#372C02",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#E8D6D2",
lightSurfaceBright: "#FFF8F6",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#FFF1ED",
lightSurfaceContainer: "#FCEAE5",
lightSurfaceContainerHigh: "#F7E4E0",
lightSurfaceContainerHighest: "#F1DFDA",
darkPrimary: "#FFF9F8",
darkSurfaceTint: "#FFB5A0",
darkOnPrimary: "#000000",
darkPrimaryContainer: "#FFBBA7",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#FFF9F8",
darkOnSecondary: "#000000",
darkSecondaryContainer: "#ECC1B6",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#FFFAF6",
darkOnTertiary: "#000000",
darkTertiaryContainer: "#DDCA91",
darkOnTertiaryContainer: "#000000",
darkError: "#FFF9F9",
darkOnError: "#000000",
darkErrorContainer: "#FFBAB1",
darkOnErrorContainer: "#000000",
darkBackground: "#1A110F",
darkOnBackground: "#F1DFDA",
darkSurface: "#1A110F",
darkOnSurface: "#FFFFFF",
darkSurfaceVariant: "#53433F",
darkOnSurfaceVariant: "#FFF9F8",
darkOutline: "#DCC6C0",
darkOutlineVariant: "#DCC6C0",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#F1DFDA",
darkInverseOnSurface: "#000000",
darkInversePrimary: "#4D1909",
darkPrimaryFixed: "#FFE0D8",
darkOnPrimaryFixed: "#000000",
darkPrimaryFixedDim: "#FFBBA7",
darkOnPrimaryFixedVariant: "#310700",
darkSecondaryFixed: "#FFE0D8",
darkOnSecondaryFixed: "#000000",
darkSecondaryFixedDim: "#ECC1B6",
darkOnSecondaryFixedVariant: "#26100A",
darkTertiaryFixed: "#FAE6AB",
darkOnTertiaryFixed: "#000000",
darkTertiaryFixedDim: "#DDCA91",
darkOnTertiaryFixedVariant: "#1D1600",
darkSurfaceDim: "#1A110F",
darkSurfaceBright: "#423734",
darkSurfaceContainerLowest: "#140C0A",
darkSurfaceContainerLow: "#231917",
darkSurfaceContainer: "#271D1B",
darkSurfaceContainerHigh: "#322825",
darkSurfaceContainerHighest: "#3D322F",
}
}
Green
Seed: #63A002
Contrast: Low
theme: {
colors: {
lightPrimary: "#4C662B",
lightSurfaceTint: "#4C662B",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#CDEDA3",
lightOnPrimaryContainer: "#102000",
lightSecondary: "#586249",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#DCE7C8",
lightOnSecondaryContainer: "#151E0B",
lightTertiary: "#386663",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#BCECE7",
lightOnTertiaryContainer: "#00201E",
lightError: "#BA1A1A",
lightOnError: "#FFFFFF",
lightErrorContainer: "#FFDAD6",
lightOnErrorContainer: "#410002",
lightBackground: "#F9FAEF",
lightOnBackground: "#1A1C16",
lightSurface: "#F9FAEF",
lightOnSurface: "#1A1C16",
lightSurfaceVariant: "#E1E4D5",
lightOnSurfaceVariant: "#44483D",
lightOutline: "#75796C",
lightOutlineVariant: "#C5C8BA",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#2F312A",
lightInverseOnSurface: "#F1F2E6",
lightInversePrimary: "#B1D18A",
lightPrimaryFixed: "#CDEDA3",
lightOnPrimaryFixed: "#102000",
lightPrimaryFixedDim: "#B1D18A",
lightOnPrimaryFixedVariant: "#354E16",
lightSecondaryFixed: "#DCE7C8",
lightOnSecondaryFixed: "#151E0B",
lightSecondaryFixedDim: "#BFCBAD",
lightOnSecondaryFixedVariant: "#404A33",
lightTertiaryFixed: "#BCECE7",
lightOnTertiaryFixed: "#00201E",
lightTertiaryFixedDim: "#A0D0CB",
lightOnTertiaryFixedVariant: "#1F4E4B",
lightSurfaceDim: "#DADBD0",
lightSurfaceBright: "#F9FAEF",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#F3F4E9",
lightSurfaceContainer: "#EEEFE3",
lightSurfaceContainerHigh: "#E8E9DE",
lightSurfaceContainerHighest: "#E2E3D8",
darkPrimary: "#B1D18A",
darkSurfaceTint: "#B1D18A",
darkOnPrimary: "#1F3701",
darkPrimaryContainer: "#354E16",
darkOnPrimaryContainer: "#CDEDA3",
darkSecondary: "#BFCBAD",
darkOnSecondary: "#2A331E",
darkSecondaryContainer: "#404A33",
darkOnSecondaryContainer: "#DCE7C8",
darkTertiary: "#A0D0CB",
darkOnTertiary: "#003735",
darkTertiaryContainer: "#1F4E4B",
darkOnTertiaryContainer: "#BCECE7",
darkError: "#FFB4AB",
darkOnError: "#690005",
darkErrorContainer: "#93000A",
darkOnErrorContainer: "#FFDAD6",
darkBackground: "#12140E",
darkOnBackground: "#E2E3D8",
darkSurface: "#12140E",
darkOnSurface: "#E2E3D8",
darkSurfaceVariant: "#44483D",
darkOnSurfaceVariant: "#C5C8BA",
darkOutline: "#8F9285",
darkOutlineVariant: "#44483D",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E2E3D8",
darkInverseOnSurface: "#2F312A",
darkInversePrimary: "#4C662B",
darkPrimaryFixed: "#CDEDA3",
darkOnPrimaryFixed: "#102000",
darkPrimaryFixedDim: "#B1D18A",
darkOnPrimaryFixedVariant: "#354E16",
darkSecondaryFixed: "#DCE7C8",
darkOnSecondaryFixed: "#151E0B",
darkSecondaryFixedDim: "#BFCBAD",
darkOnSecondaryFixedVariant: "#404A33",
darkTertiaryFixed: "#BCECE7",
darkOnTertiaryFixed: "#00201E",
darkTertiaryFixedDim: "#A0D0CB",
darkOnTertiaryFixedVariant: "#1F4E4B",
darkSurfaceDim: "#12140E",
darkSurfaceBright: "#383A32",
darkSurfaceContainerLowest: "#0C0F09",
darkSurfaceContainerLow: "#1A1C16",
darkSurfaceContainer: "#1E201A",
darkSurfaceContainerHigh: "#282B24",
darkSurfaceContainerHighest: "#33362E",
}
}
Contrast: Middle
theme: {
colors: {
lightPrimary: "#314A12",
lightSurfaceTint: "#4C662B",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#617D3F",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#3C462F",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#6E785E",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#1A4A47",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#4F7D79",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#8C0009",
lightOnError: "#FFFFFF",
lightErrorContainer: "#DA342E",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#F9FAEF",
lightOnBackground: "#1A1C16",
lightSurface: "#F9FAEF",
lightOnSurface: "#1A1C16",
lightSurfaceVariant: "#E1E4D5",
lightOnSurfaceVariant: "#404439",
lightOutline: "#5D6155",
lightOutlineVariant: "#787C70",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#2F312A",
lightInverseOnSurface: "#F1F2E6",
lightInversePrimary: "#B1D18A",
lightPrimaryFixed: "#617D3F",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#496429",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#6E785E",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#555F47",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#4F7D79",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#366460",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#DADBD0",
lightSurfaceBright: "#F9FAEF",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#F3F4E9",
lightSurfaceContainer: "#EEEFE3",
lightSurfaceContainerHigh: "#E8E9DE",
lightSurfaceContainerHighest: "#E2E3D8",
darkPrimary: "#B5D58E",
darkSurfaceTint: "#B1D18A",
darkOnPrimary: "#0C1A00",
darkPrimaryContainer: "#7D9A59",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#C4CFB1",
darkOnSecondary: "#101907",
darkSecondaryContainer: "#8A9579",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#A4D4D0",
darkOnTertiary: "#001A19",
darkTertiaryContainer: "#6B9995",
darkOnTertiaryContainer: "#000000",
darkError: "#FFBAB1",
darkOnError: "#370001",
darkErrorContainer: "#FF5449",
darkOnErrorContainer: "#000000",
darkBackground: "#12140E",
darkOnBackground: "#E2E3D8",
darkSurface: "#12140E",
darkOnSurface: "#FBFCF0",
darkSurfaceVariant: "#44483D",
darkOnSurfaceVariant: "#C9CCBE",
darkOutline: "#A1A497",
darkOutlineVariant: "#818578",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E2E3D8",
darkInverseOnSurface: "#282B24",
darkInversePrimary: "#364F17",
darkPrimaryFixed: "#CDEDA3",
darkOnPrimaryFixed: "#081400",
darkPrimaryFixedDim: "#B1D18A",
darkOnPrimaryFixedVariant: "#253D05",
darkSecondaryFixed: "#DCE7C8",
darkOnSecondaryFixed: "#0B1403",
darkSecondaryFixedDim: "#BFCBAD",
darkOnSecondaryFixedVariant: "#303924",
darkTertiaryFixed: "#BCECE7",
darkOnTertiaryFixed: "#001413",
darkTertiaryFixedDim: "#A0D0CB",
darkOnTertiaryFixedVariant: "#083D3A",
darkSurfaceDim: "#12140E",
darkSurfaceBright: "#383A32",
darkSurfaceContainerLowest: "#0C0F09",
darkSurfaceContainerLow: "#1A1C16",
darkSurfaceContainer: "#1E201A",
darkSurfaceContainerHigh: "#282B24",
darkSurfaceContainerHighest: "#33362E",
}
}
Contrast: High
theme: {
colors: {
lightPrimary: "#142700",
lightSurfaceTint: "#4C662B",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#314A12",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#1C2511",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#3C462F",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#002725",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#1A4A47",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#4E0002",
lightOnError: "#FFFFFF",
lightErrorContainer: "#8C0009",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#F9FAEF",
lightOnBackground: "#1A1C16",
lightSurface: "#F9FAEF",
lightOnSurface: "#000000",
lightSurfaceVariant: "#E1E4D5",
lightOnSurfaceVariant: "#21251C",
lightOutline: "#404439",
lightOutlineVariant: "#404439",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#2F312A",
lightInverseOnSurface: "#FFFFFF",
lightInversePrimary: "#D6F7AC",
lightPrimaryFixed: "#314A12",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#1C3300",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#3C462F",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#26301B",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#1A4A47",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#003331",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#DADBD0",
lightSurfaceBright: "#F9FAEF",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#F3F4E9",
lightSurfaceContainer: "#EEEFE3",
lightSurfaceContainerHigh: "#E8E9DE",
lightSurfaceContainerHighest: "#E2E3D8",
darkPrimary: "#F4FFDF",
darkSurfaceTint: "#B1D18A",
darkOnPrimary: "#000000",
darkPrimaryContainer: "#B5D58E",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#F4FFDF",
darkOnSecondary: "#000000",
darkSecondaryContainer: "#C4CFB1",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#EAFFFC",
darkOnTertiary: "#000000",
darkTertiaryContainer: "#A4D4D0",
darkOnTertiaryContainer: "#000000",
darkError: "#FFF9F9",
darkOnError: "#000000",
darkErrorContainer: "#FFBAB1",
darkOnErrorContainer: "#000000",
darkBackground: "#12140E",
darkOnBackground: "#E2E3D8",
darkSurface: "#12140E",
darkOnSurface: "#FFFFFF",
darkSurfaceVariant: "#44483D",
darkOnSurfaceVariant: "#F9FCED",
darkOutline: "#C9CCBE",
darkOutlineVariant: "#C9CCBE",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E2E3D8",
darkInverseOnSurface: "#000000",
darkInversePrimary: "#1A3000",
darkPrimaryFixed: "#D1F2A7",
darkOnPrimaryFixed: "#000000",
darkPrimaryFixedDim: "#B5D58E",
darkOnPrimaryFixedVariant: "#0C1A00",
darkSecondaryFixed: "#E0EBCC",
darkOnSecondaryFixed: "#000000",
darkSecondaryFixedDim: "#C4CFB1",
darkOnSecondaryFixedVariant: "#101907",
darkTertiaryFixed: "#C0F0EC",
darkOnTertiaryFixed: "#000000",
darkTertiaryFixedDim: "#A4D4D0",
darkOnTertiaryFixedVariant: "#001A19",
darkSurfaceDim: "#12140E",
darkSurfaceBright: "#383A32",
darkSurfaceContainerLowest: "#0C0F09",
darkSurfaceContainerLow: "#1A1C16",
darkSurfaceContainer: "#1E201A",
darkSurfaceContainerHigh: "#282B24",
darkSurfaceContainerHighest: "#33362E",
}
}
Blue
Seed: #769CDF
Contrast: Low
theme: {
colors: {
lightPrimary: "#415F91",
lightSurfaceTint: "#415F91",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#D6E3FF",
lightOnPrimaryContainer: "#001B3E",
lightSecondary: "#565F71",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#DAE2F9",
lightOnSecondaryContainer: "#131C2B",
lightTertiary: "#705575",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#FAD8FD",
lightOnTertiaryContainer: "#28132E",
lightError: "#BA1A1A",
lightOnError: "#FFFFFF",
lightErrorContainer: "#FFDAD6",
lightOnErrorContainer: "#410002",
lightBackground: "#F9F9FF",
lightOnBackground: "#191C20",
lightSurface: "#F9F9FF",
lightOnSurface: "#191C20",
lightSurfaceVariant: "#E0E2EC",
lightOnSurfaceVariant: "#44474E",
lightOutline: "#74777F",
lightOutlineVariant: "#C4C6D0",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#2E3036",
lightInverseOnSurface: "#F0F0F7",
lightInversePrimary: "#AAC7FF",
lightPrimaryFixed: "#D6E3FF",
lightOnPrimaryFixed: "#001B3E",
lightPrimaryFixedDim: "#AAC7FF",
lightOnPrimaryFixedVariant: "#284777",
lightSecondaryFixed: "#DAE2F9",
lightOnSecondaryFixed: "#131C2B",
lightSecondaryFixedDim: "#BEC6DC",
lightOnSecondaryFixedVariant: "#3E4759",
lightTertiaryFixed: "#FAD8FD",
lightOnTertiaryFixed: "#28132E",
lightTertiaryFixedDim: "#DDBCE0",
lightOnTertiaryFixedVariant: "#573E5C",
lightSurfaceDim: "#D9D9E0",
lightSurfaceBright: "#F9F9FF",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#F3F3FA",
lightSurfaceContainer: "#EDEDF4",
lightSurfaceContainerHigh: "#E7E8EE",
lightSurfaceContainerHighest: "#E2E2E9",
darkPrimary: "#AAC7FF",
darkSurfaceTint: "#AAC7FF",
darkOnPrimary: "#0A305F",
darkPrimaryContainer: "#284777",
darkOnPrimaryContainer: "#D6E3FF",
darkSecondary: "#BEC6DC",
darkOnSecondary: "#283141",
darkSecondaryContainer: "#3E4759",
darkOnSecondaryContainer: "#DAE2F9",
darkTertiary: "#DDBCE0",
darkOnTertiary: "#3F2844",
darkTertiaryContainer: "#573E5C",
darkOnTertiaryContainer: "#FAD8FD",
darkError: "#FFB4AB",
darkOnError: "#690005",
darkErrorContainer: "#93000A",
darkOnErrorContainer: "#FFDAD6",
darkBackground: "#111318",
darkOnBackground: "#E2E2E9",
darkSurface: "#111318",
darkOnSurface: "#E2E2E9",
darkSurfaceVariant: "#44474E",
darkOnSurfaceVariant: "#C4C6D0",
darkOutline: "#8E9099",
darkOutlineVariant: "#44474E",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E2E2E9",
darkInverseOnSurface: "#2E3036",
darkInversePrimary: "#415F91",
darkPrimaryFixed: "#D6E3FF",
darkOnPrimaryFixed: "#001B3E",
darkPrimaryFixedDim: "#AAC7FF",
darkOnPrimaryFixedVariant: "#284777",
darkSecondaryFixed: "#DAE2F9",
darkOnSecondaryFixed: "#131C2B",
darkSecondaryFixedDim: "#BEC6DC",
darkOnSecondaryFixedVariant: "#3E4759",
darkTertiaryFixed: "#FAD8FD",
darkOnTertiaryFixed: "#28132E",
darkTertiaryFixedDim: "#DDBCE0",
darkOnTertiaryFixedVariant: "#573E5C",
darkSurfaceDim: "#111318",
darkSurfaceBright: "#37393E",
darkSurfaceContainerLowest: "#0C0E13",
darkSurfaceContainerLow: "#191C20",
darkSurfaceContainer: "#1D2024",
darkSurfaceContainerHigh: "#282A2F",
darkSurfaceContainerHighest: "#33353A",
}
}
Contrast: Middle
theme: {
colors: {
lightPrimary: "#234373",
lightSurfaceTint: "#415F91",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#5875A8",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#3A4354",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#6C7588",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#523A58",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#876B8C",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#8C0009",
lightOnError: "#FFFFFF",
lightErrorContainer: "#DA342E",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#F9F9FF",
lightOnBackground: "#191C20",
lightSurface: "#F9F9FF",
lightOnSurface: "#191C20",
lightSurfaceVariant: "#E0E2EC",
lightOnSurfaceVariant: "#40434A",
lightOutline: "#5C5F67",
lightOutlineVariant: "#787A83",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#2E3036",
lightInverseOnSurface: "#F0F0F7",
lightInversePrimary: "#AAC7FF",
lightPrimaryFixed: "#5875A8",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#3E5C8E",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#6C7588",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#535C6F",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#876B8C",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#6D5372",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#D9D9E0",
lightSurfaceBright: "#F9F9FF",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#F3F3FA",
lightSurfaceContainer: "#EDEDF4",
lightSurfaceContainerHigh: "#E7E8EE",
lightSurfaceContainerHighest: "#E2E2E9",
darkPrimary: "#B1CBFF",
darkSurfaceTint: "#AAC7FF",
darkOnPrimary: "#001634",
darkPrimaryContainer: "#7491C7",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#C2CBE0",
darkOnSecondary: "#0D1626",
darkSecondaryContainer: "#8891A5",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#E1C0E5",
darkOnTertiary: "#230E29",
darkTertiaryContainer: "#A487A9",
darkOnTertiaryContainer: "#000000",
darkError: "#FFBAB1",
darkOnError: "#370001",
darkErrorContainer: "#FF5449",
darkOnErrorContainer: "#000000",
darkBackground: "#111318",
darkOnBackground: "#E2E2E9",
darkSurface: "#111318",
darkOnSurface: "#FBFAFF",
darkSurfaceVariant: "#44474E",
darkOnSurfaceVariant: "#C8CAD4",
darkOutline: "#A0A3AC",
darkOutlineVariant: "#80838C",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E2E2E9",
darkInverseOnSurface: "#282A2F",
darkInversePrimary: "#294878",
darkPrimaryFixed: "#D6E3FF",
darkOnPrimaryFixed: "#00112B",
darkPrimaryFixedDim: "#AAC7FF",
darkOnPrimaryFixedVariant: "#133665",
darkSecondaryFixed: "#DAE2F9",
darkOnSecondaryFixed: "#081121",
darkSecondaryFixedDim: "#BEC6DC",
darkOnSecondaryFixedVariant: "#2E3647",
darkTertiaryFixed: "#FAD8FD",
darkOnTertiaryFixed: "#1D0823",
darkTertiaryFixedDim: "#DDBCE0",
darkOnTertiaryFixedVariant: "#452E4A",
darkSurfaceDim: "#111318",
darkSurfaceBright: "#37393E",
darkSurfaceContainerLowest: "#0C0E13",
darkSurfaceContainerLow: "#191C20",
darkSurfaceContainer: "#1D2024",
darkSurfaceContainerHigh: "#282A2F",
darkSurfaceContainerHighest: "#33353A",
}
}
Contrast: High
theme: {
colors: {
lightPrimary: "#00214A",
lightSurfaceTint: "#415F91",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#234373",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#192232",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#3A4354",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#301A35",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#523A58",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#4E0002",
lightOnError: "#FFFFFF",
lightErrorContainer: "#8C0009",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#F9F9FF",
lightOnBackground: "#191C20",
lightSurface: "#F9F9FF",
lightOnSurface: "#000000",
lightSurfaceVariant: "#E0E2EC",
lightOnSurfaceVariant: "#21242B",
lightOutline: "#40434A",
lightOutlineVariant: "#40434A",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#2E3036",
lightInverseOnSurface: "#FFFFFF",
lightInversePrimary: "#E5ECFF",
lightPrimaryFixed: "#234373",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#042C5B",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#3A4354",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#242D3D",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#523A58",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#3B2440",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#D9D9E0",
lightSurfaceBright: "#F9F9FF",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#F3F3FA",
lightSurfaceContainer: "#EDEDF4",
lightSurfaceContainerHigh: "#E7E8EE",
lightSurfaceContainerHighest: "#E2E2E9",
darkPrimary: "#FBFAFF",
darkSurfaceTint: "#AAC7FF",
darkOnPrimary: "#000000",
darkPrimaryContainer: "#B1CBFF",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#FBFAFF",
darkOnSecondary: "#000000",
darkSecondaryContainer: "#C2CBE0",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#FFF9FA",
darkOnTertiary: "#000000",
darkTertiaryContainer: "#E1C0E5",
darkOnTertiaryContainer: "#000000",
darkError: "#FFF9F9",
darkOnError: "#000000",
darkErrorContainer: "#FFBAB1",
darkOnErrorContainer: "#000000",
darkBackground: "#111318",
darkOnBackground: "#E2E2E9",
darkSurface: "#111318",
darkOnSurface: "#FFFFFF",
darkSurfaceVariant: "#44474E",
darkOnSurfaceVariant: "#FBFAFF",
darkOutline: "#C8CAD4",
darkOutlineVariant: "#C8CAD4",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E2E2E9",
darkInverseOnSurface: "#000000",
darkInversePrimary: "#002959",
darkPrimaryFixed: "#DDE7FF",
darkOnPrimaryFixed: "#000000",
darkPrimaryFixedDim: "#B1CBFF",
darkOnPrimaryFixedVariant: "#001634",
darkSecondaryFixed: "#DEE7FD",
darkOnSecondaryFixed: "#000000",
darkSecondaryFixedDim: "#C2CBE0",
darkOnSecondaryFixedVariant: "#0D1626",
darkTertiaryFixed: "#FCDDFF",
darkOnTertiaryFixed: "#000000",
darkTertiaryFixedDim: "#E1C0E5",
darkOnTertiaryFixedVariant: "#230E29",
darkSurfaceDim: "#111318",
darkSurfaceBright: "#37393E",
darkSurfaceContainerLowest: "#0C0E13",
darkSurfaceContainerLow: "#191C20",
darkSurfaceContainer: "#1D2024",
darkSurfaceContainerHigh: "#282A2F",
darkSurfaceContainerHighest: "#33353A",
}
}
Yellow
Seed: #FFDE3F
Contrast: Low
theme: {
colors: {
lightPrimary: "#6D5E0F",
lightSurfaceTint: "#6D5E0F",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#F8E287",
lightOnPrimaryContainer: "#221B00",
lightSecondary: "#665E40",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#EEE2BC",
lightOnSecondaryContainer: "#211B04",
lightTertiary: "#43664E",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#C5ECCE",
lightOnTertiaryContainer: "#00210F",
lightError: "#BA1A1A",
lightOnError: "#FFFFFF",
lightErrorContainer: "#FFDAD6",
lightOnErrorContainer: "#410002",
lightBackground: "#FFF9EE",
lightOnBackground: "#1E1B13",
lightSurface: "#FFF9EE",
lightOnSurface: "#1E1B13",
lightSurfaceVariant: "#EAE2D0",
lightOnSurfaceVariant: "#4B4739",
lightOutline: "#7C7767",
lightOutlineVariant: "#CDC6B4",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#333027",
lightInverseOnSurface: "#F7F0E2",
lightInversePrimary: "#DBC66E",
lightPrimaryFixed: "#F8E287",
lightOnPrimaryFixed: "#221B00",
lightPrimaryFixedDim: "#DBC66E",
lightOnPrimaryFixedVariant: "#534600",
lightSecondaryFixed: "#EEE2BC",
lightOnSecondaryFixed: "#211B04",
lightSecondaryFixedDim: "#D1C6A1",
lightOnSecondaryFixedVariant: "#4E472A",
lightTertiaryFixed: "#C5ECCE",
lightOnTertiaryFixed: "#00210F",
lightTertiaryFixedDim: "#A9D0B3",
lightOnTertiaryFixedVariant: "#2C4E38",
lightSurfaceDim: "#E0D9CC",
lightSurfaceBright: "#FFF9EE",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#FAF3E5",
lightSurfaceContainer: "#F4EDDF",
lightSurfaceContainerHigh: "#EEE8DA",
lightSurfaceContainerHighest: "#E8E2D4",
darkPrimary: "#DBC66E",
darkSurfaceTint: "#DBC66E",
darkOnPrimary: "#3A3000",
darkPrimaryContainer: "#534600",
darkOnPrimaryContainer: "#F8E287",
darkSecondary: "#D1C6A1",
darkOnSecondary: "#363016",
darkSecondaryContainer: "#4E472A",
darkOnSecondaryContainer: "#EEE2BC",
darkTertiary: "#A9D0B3",
darkOnTertiary: "#143723",
darkTertiaryContainer: "#2C4E38",
darkOnTertiaryContainer: "#C5ECCE",
darkError: "#FFB4AB",
darkOnError: "#690005",
darkErrorContainer: "#93000A",
darkOnErrorContainer: "#FFDAD6",
darkBackground: "#15130B",
darkOnBackground: "#E8E2D4",
darkSurface: "#15130B",
darkOnSurface: "#E8E2D4",
darkSurfaceVariant: "#4B4739",
darkOnSurfaceVariant: "#CDC6B4",
darkOutline: "#969080",
darkOutlineVariant: "#4B4739",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E8E2D4",
darkInverseOnSurface: "#333027",
darkInversePrimary: "#6D5E0F",
darkPrimaryFixed: "#F8E287",
darkOnPrimaryFixed: "#221B00",
darkPrimaryFixedDim: "#DBC66E",
darkOnPrimaryFixedVariant: "#534600",
darkSecondaryFixed: "#EEE2BC",
darkOnSecondaryFixed: "#211B04",
darkSecondaryFixedDim: "#D1C6A1",
darkOnSecondaryFixedVariant: "#4E472A",
darkTertiaryFixed: "#C5ECCE",
darkOnTertiaryFixed: "#00210F",
darkTertiaryFixedDim: "#A9D0B3",
darkOnTertiaryFixedVariant: "#2C4E38",
darkSurfaceDim: "#15130B",
darkSurfaceBright: "#3C3930",
darkSurfaceContainerLowest: "#100E07",
darkSurfaceContainerLow: "#1E1B13",
darkSurfaceContainer: "#222017",
darkSurfaceContainerHigh: "#2D2A21",
darkSurfaceContainerHighest: "#38352B",
}
}
Contrast: Middle
theme: {
colors: {
lightPrimary: "#4F4200",
lightSurfaceTint: "#6D5E0F",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#857425",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#4A4327",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#7D7455",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#284A34",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#597D64",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#8C0009",
lightOnError: "#FFFFFF",
lightErrorContainer: "#DA342E",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#FFF9EE",
lightOnBackground: "#1E1B13",
lightSurface: "#FFF9EE",
lightOnSurface: "#1E1B13",
lightSurfaceVariant: "#EAE2D0",
lightOnSurfaceVariant: "#474335",
lightOutline: "#645F50",
lightOutlineVariant: "#807A6B",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#333027",
lightInverseOnSurface: "#F7F0E2",
lightInversePrimary: "#DBC66E",
lightPrimaryFixed: "#857425",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#6B5B0C",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#7D7455",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#645C3E",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#597D64",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#41644C",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#E0D9CC",
lightSurfaceBright: "#FFF9EE",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#FAF3E5",
lightSurfaceContainer: "#F4EDDF",
lightSurfaceContainerHigh: "#EEE8DA",
lightSurfaceContainerHighest: "#E8E2D4",
darkPrimary: "#E0CA72",
darkSurfaceTint: "#DBC66E",
darkOnPrimary: "#1C1600",
darkPrimaryContainer: "#A3903F",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#D6CAA5",
darkOnSecondary: "#1B1602",
darkSecondaryContainer: "#9A916F",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#ADD4B7",
darkOnTertiary: "#001B0C",
darkTertiaryContainer: "#75997F",
darkOnTertiaryContainer: "#000000",
darkError: "#FFBAB1",
darkOnError: "#370001",
darkErrorContainer: "#FF5449",
darkOnErrorContainer: "#000000",
darkBackground: "#15130B",
darkOnBackground: "#E8E2D4",
darkSurface: "#15130B",
darkOnSurface: "#FFFAF5",
darkSurfaceVariant: "#4B4739",
darkOnSurfaceVariant: "#D1CAB8",
darkOutline: "#A9A292",
darkOutlineVariant: "#888373",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E8E2D4",
darkInverseOnSurface: "#2D2A21",
darkInversePrimary: "#554700",
darkPrimaryFixed: "#F8E287",
darkOnPrimaryFixed: "#161100",
darkPrimaryFixedDim: "#DBC66E",
darkOnPrimaryFixedVariant: "#403600",
darkSecondaryFixed: "#EEE2BC",
darkOnSecondaryFixed: "#161100",
darkSecondaryFixedDim: "#D1C6A1",
darkOnSecondaryFixedVariant: "#3C361B",
darkTertiaryFixed: "#C5ECCE",
darkOnTertiaryFixed: "#001508",
darkTertiaryFixedDim: "#A9D0B3",
darkOnTertiaryFixedVariant: "#1B3D28",
darkSurfaceDim: "#15130B",
darkSurfaceBright: "#3C3930",
darkSurfaceContainerLowest: "#100E07",
darkSurfaceContainerLow: "#1E1B13",
darkSurfaceContainer: "#222017",
darkSurfaceContainerHigh: "#2D2A21",
darkSurfaceContainerHighest: "#38352B",
}
}
Contrast: High
theme: {
colors: {
lightPrimary: "#292200",
lightSurfaceTint: "#6D5E0F",
lightOnPrimary: "#FFFFFF",
lightPrimaryContainer: "#4F4200",
lightOnPrimaryContainer: "#FFFFFF",
lightSecondary: "#282209",
lightOnSecondary: "#FFFFFF",
lightSecondaryContainer: "#4A4327",
lightOnSecondaryContainer: "#FFFFFF",
lightTertiary: "#042815",
lightOnTertiary: "#FFFFFF",
lightTertiaryContainer: "#284A34",
lightOnTertiaryContainer: "#FFFFFF",
lightError: "#4E0002",
lightOnError: "#FFFFFF",
lightErrorContainer: "#8C0009",
lightOnErrorContainer: "#FFFFFF",
lightBackground: "#FFF9EE",
lightOnBackground: "#1E1B13",
lightSurface: "#FFF9EE",
lightOnSurface: "#000000",
lightSurfaceVariant: "#EAE2D0",
lightOnSurfaceVariant: "#272418",
lightOutline: "#474335",
lightOutlineVariant: "#474335",
lightShadow: "#000000",
lightScrim: "#000000",
lightInverseSurface: "#333027",
lightInverseOnSurface: "#FFFFFF",
lightInversePrimary: "#FFECA2",
lightPrimaryFixed: "#4F4200",
lightOnPrimaryFixed: "#FFFFFF",
lightPrimaryFixedDim: "#352C00",
lightOnPrimaryFixedVariant: "#FFFFFF",
lightSecondaryFixed: "#4A4327",
lightOnSecondaryFixed: "#FFFFFF",
lightSecondaryFixedDim: "#332D13",
lightOnSecondaryFixedVariant: "#FFFFFF",
lightTertiaryFixed: "#284A34",
lightOnTertiaryFixed: "#FFFFFF",
lightTertiaryFixedDim: "#10331F",
lightOnTertiaryFixedVariant: "#FFFFFF",
lightSurfaceDim: "#E0D9CC",
lightSurfaceBright: "#FFF9EE",
lightSurfaceContainerLowest: "#FFFFFF",
lightSurfaceContainerLow: "#FAF3E5",
lightSurfaceContainer: "#F4EDDF",
lightSurfaceContainerHigh: "#EEE8DA",
lightSurfaceContainerHighest: "#E8E2D4",
darkPrimary: "#FFFAF5",
darkSurfaceTint: "#DBC66E",
darkOnPrimary: "#000000",
darkPrimaryContainer: "#E0CA72",
darkOnPrimaryContainer: "#000000",
darkSecondary: "#FFFAF5",
darkOnSecondary: "#000000",
darkSecondaryContainer: "#D6CAA5",
darkOnSecondaryContainer: "#000000",
darkTertiary: "#EFFFF0",
darkOnTertiary: "#000000",
darkTertiaryContainer: "#ADD4B7",
darkOnTertiaryContainer: "#000000",
darkError: "#FFF9F9",
darkOnError: "#000000",
darkErrorContainer: "#FFBAB1",
darkOnErrorContainer: "#000000",
darkBackground: "#15130B",
darkOnBackground: "#E8E2D4",
darkSurface: "#15130B",
darkOnSurface: "#FFFFFF",
darkSurfaceVariant: "#4B4739",
darkOnSurfaceVariant: "#FFFAF5",
darkOutline: "#D1CAB8",
darkOutlineVariant: "#D1CAB8",
darkShadow: "#000000",
darkScrim: "#000000",
darkInverseSurface: "#E8E2D4",
darkInverseOnSurface: "#000000",
darkInversePrimary: "#322A00",
darkPrimaryFixed: "#FDE78B",
darkOnPrimaryFixed: "#000000",
darkPrimaryFixedDim: "#E0CA72",
darkOnPrimaryFixedVariant: "#1C1600",
darkSecondaryFixed: "#F2E7C0",
darkOnSecondaryFixed: "#000000",
darkSecondaryFixedDim: "#D6CAA5",
darkOnSecondaryFixedVariant: "#1B1602",
darkTertiaryFixed: "#C9F0D2",
darkOnTertiaryFixed: "#000000",
darkTertiaryFixedDim: "#ADD4B7",
darkOnTertiaryFixedVariant: "#001B0C",
darkSurfaceDim: "#15130B",
darkSurfaceBright: "#3C3930",
darkSurfaceContainerLowest: "#100E07",
darkSurfaceContainerLow: "#1E1B13",
darkSurfaceContainer: "#222017",
darkSurfaceContainerHigh: "#2D2A21",
darkSurfaceContainerHighest: "#38352B",
}
}
Tag: tailwind material