Quaff uses a color system based on Material Design 3, which provides a comprehensive set of colors for building beautiful and consistent user interfaces. In Quaff, this system is managed with the QTheme class singleton.
Material Design 3 uses two sets of CSS variables to define the colors used in your app: one for light mode, and one for dark mode.
When dark mode is changed, Quaff automatically switches between the color sets to ensure that the colors are consistent with the current theme. This means that you can use the same color names in your app, regardless of whether the user is in light or dark mode.
You can see a list of those colors with the QTheme.themeColors reactive property.
{
"backgroundLight": "#faf8ff",
"backgroundDark": "#11131c",
"onBackgroundLight": "#191b25",
"onBackgroundDark": "#e1e1ef",
"surfaceLight": "#faf8ff",
"surfaceDark": "#11131c",
"surfaceDimLight": "#d9d9e7",
"surfaceDimDark": "#11131c",
"surfaceBrightLight": "#faf8ff",
"surfaceBrightDark": "#373943",
"surfaceContainerLowestLight": "#ffffff",
"surfaceContainerLowestDark": "#0c0e17",
"surfaceContainerLowLight": "#f3f2ff",
"surfaceContainerLowDark": "#191b25",
"surfaceContainerLight": "#ededfb",
"surfaceContainerDark": "#1d1f29",
"surfaceContainerHighLight": "#e7e7f5",
"surfaceContainerHighDark": "#272934",
"surfaceContainerHighestLight": "#e1e1ef",
"surfaceContainerHighestDark": "#32343f",
"onSurfaceLight": "#191b25",
"onSurfaceDark": "#e1e1ef",
"onSurfaceVariantLight": "#444654",
"onSurfaceVariantDark": "#c4c5d6",
"outlineLight": "#747685",
"outlineDark": "#8e909f",
"outlineVariantLight": "#c4c5d6",
"outlineVariantDark": "#444654",
"inverseSurfaceLight": "#2e303a",
"inverseSurfaceDark": "#e1e1ef",
"inverseOnSurfaceLight": "#f0f0fe",
"inverseOnSurfaceDark": "#2e303a",
"primaryLight": "#004deb",
"primaryDark": "#b7c4ff",
"primaryDimLight": "#0043cf",
"primaryDimDark": "#698aff",
"onPrimaryLight": "#ffffff",
"onPrimaryDark": "#002681",
"primaryContainerLight": "#dce1ff",
"primaryContainerDark": "#0039b4",
"onPrimaryContainerLight": "#0039b4",
"onPrimaryContainerDark": "#dce1ff",
"primaryFixedLight": "#dce1ff",
"primaryFixedDark": "#dce1ff",
"primaryFixedDimLight": "#b7c4ff",
"primaryFixedDimDark": "#b7c4ff",
"onPrimaryFixedLight": "#001551",
"onPrimaryFixedDark": "#001551",
"onPrimaryFixedVariantLight": "#0039b4",
"onPrimaryFixedVariantDark": "#0039b4",
"inversePrimaryLight": "#b7c4ff",
"inversePrimaryDark": "#004deb",
"secondaryLight": "#5e5a7d",
"secondaryDark": "#c7c2ea",
"secondaryDimLight": "#524f71",
"secondaryDimDark": "#d5d0f9",
"onSecondaryLight": "#ffffff",
"onSecondaryDark": "#2f2d4c",
"secondaryContainerLight": "#e4dfff",
"secondaryContainerDark": "#464364",
"onSecondaryContainerLight": "#464364",
"onSecondaryContainerDark": "#e4dfff",
"secondaryFixedLight": "#e4dfff",
"secondaryFixedDark": "#e4dfff",
"secondaryFixedDimLight": "#c7c2ea",
"secondaryFixedDimDark": "#c7c2ea",
"onSecondaryFixedLight": "#1a1836",
"onSecondaryFixedDark": "#1a1836",
"onSecondaryFixedVariantLight": "#464364",
"onSecondaryFixedVariantDark": "#464364",
"tertiaryLight": "#695586",
"tertiaryDark": "#d4bcf5",
"tertiaryDimLight": "#5c497a",
"tertiaryDimDark": "#d7bff8",
"onTertiaryLight": "#ffffff",
"onTertiaryDark": "#392755",
"tertiaryContainerLight": "#ecdcff",
"tertiaryContainerDark": "#503e6d",
"onTertiaryContainerLight": "#503e6d",
"onTertiaryContainerDark": "#ecdcff",
"tertiaryFixedLight": "#ecdcff",
"tertiaryFixedDark": "#ecdcff",
"tertiaryFixedDimLight": "#d4bcf5",
"tertiaryFixedDimDark": "#d4bcf5",
"onTertiaryFixedLight": "#24113f",
"onTertiaryFixedDark": "#24113f",
"onTertiaryFixedVariantLight": "#503e6d",
"onTertiaryFixedVariantDark": "#503e6d",
"errorLight": "#ba1a1a",
"errorDark": "#ffb4ab",
"errorDimLight": "#a80710",
"errorDimDark": "#ff554a",
"onErrorLight": "#ffffff",
"onErrorDark": "#690005",
"errorContainerLight": "#ffdad6",
"errorContainerDark": "#93000a",
"onErrorContainerLight": "#93000a",
"onErrorContainerDark": "#ffdad6",
"scrimLight": "#000000",
"scrimDark": "#000000",
"shadowLight": "#000000",
"shadowDark": "#000000",
"surfaceTintLight": "#004deb",
"surfaceTintDark": "#b7c4ff",
"surfaceVariantLight": "#e0e1f3",
"surfaceVariantDark": "#444654",
"successLight": "#006d3d",
"successDark": "#6edc97",
"onSuccessLight": "#ffffff",
"onSuccessDark": "#00391d",
"successContainerLight": "#8af9b1",
"successContainerDark": "#00522c",
"onSuccessContainerLight": "#00522c",
"onSuccessContainerDark": "#8af9b1",
"warningLight": "#895107",
"warningDark": "#ffb86e",
"onWarningLight": "#ffffff",
"onWarningDark": "#492900",
"warningContainerLight": "#ffdcbd",
"warningContainerDark": "#693c00",
"onWarningContainerLight": "#693c00",
"onWarningContainerDark": "#ffdcbd"
}With Quaff, you can easily switch between the different color theme variants that Material Design 3 supports.
For that, you can use the QTheme.setThemeVariant() method.
QTheme.setThemeVariant('vibrant')In addition to the theme variant, you can also change the contrast level of the theme.
You can do this with the QTheme.setContrastLevel() method.
The contrast level should be a value between -1 and 1, where -1 represents minimum contrast, 0 represents standard contrast, and 1 represents maximum contrast. Out of range values will be clamped to the nearest valid value.
QTheme.setContrastLevel(0)Material Design 3 provides a very convenient method to create a color theme based on a
primary color. Quaff provides a method to do this: QTheme.setTheme(). This method takes a HEX color as a parameter and
generates a color theme based on that color. The generated theme is then automatically
applied to the entire app.
It may be important to note that the generated primary color is not the same as the provided one, but rather a color that is derived from it.
For fine-tuning the colors of your app, you can use the QTheme.updateThemeColor() or QTheme.updateThemeColors() methods.
These methods allow you to update any of the colors in the theme.
QTheme.updateThemeColor takes two parameters: the name of the color to update,
and the new color.
QTheme.updateThemeColors takes an object with the colors to update. The
object should have the same structure as the QTheme.themeColors object.
QTheme.updateThemeColors({ primaryLight: '#004deb', primaryDark: '#004deb' })