MWA allows the Dynamic Wallpaper Colours from android 12 and up on the web! View Example Site
- If the host app is installed on a device, the site will load the dynamic colours from your wallpaper. The app starts a minimal http server that broadcasts the dynamic colours to
http://localhost:8192 - If the app is not installed, or on a device that doesnt support dynamic colours, computers, apple devices, etc, the web adapter will load the pre-defined colours set by the developer.
- The first screenshot shows the colours loaded from the
colours.jsonshown below. The second screenshot shows dynamic colours loaded from the Host app.
- You simply install the MonetWebApapter app, and all supported websites will instantly match your phones dynamic colours.
- Download here
-
Download the script file here and implement it between the
<head> </head>tags. For example,<head> <script src="assets/js/DynamicWebAdapter.js"></script> </head> -
If you use CSS variables on your site, than it should be easy to migrate all your exsisting colours to the
colours.jsonfile. If not, you may have to modify your site to use the material 3 colour way and naming. -
- Generate a new theme on the Material Theme Buildier.
- Export your theme in a JSON format
- Place the JSON file in your sites root directory, and rename it to
colours.json.
-
Layout of
colours.json:{ "schemes": { "light": { "primary": "#6D5E0F", "surfaceTint": "#6D5E0F", "onPrimary": "#FFFFFF", "primaryContainer": "#F8E287", "onPrimaryContainer": "#221B00", "secondary": "#665E40", "onSecondary": "#FFFFFF", "secondaryContainer": "#EEE2BC", "onSecondaryContainer": "#211B04", "tertiary": "#43664E", "onTertiary": "#FFFFFF", "tertiaryContainer": "#C5ECCE", "onTertiaryContainer": "#00210F", "error": "#BA1A1A", "onError": "#FFFFFF", "errorContainer": "#FFDAD6", "onErrorContainer": "#410002", "background": "#FFF9EE", "onBackground": "#1E1B13", "surface": "#FFF9EE", "onSurface": "#1E1B13", "surfaceVariant": "#EAE2D0", "onSurfaceVariant": "#4B4739", "outline": "#7C7767", "outlineVariant": "#CDC6B4", "shadow": "#000000", "scrim": "#000000", "inverseSurface": "#333027", "inverseOnSurface": "#F7F0E2", "inversePrimary": "#DBC66E", "primaryFixed": "#F8E287", "onPrimaryFixed": "#221B00", "primaryFixedDim": "#DBC66E", "onPrimaryFixedVariant": "#534600", "secondaryFixed": "#EEE2BC", "onSecondaryFixed": "#211B04", "secondaryFixedDim": "#D1C6A1", "onSecondaryFixedVariant": "#4E472A", "tertiaryFixed": "#C5ECCE", "onTertiaryFixed": "#00210F", "tertiaryFixedDim": "#A9D0B3", "onTertiaryFixedVariant": "#2C4E38", "surfaceDim": "#E0D9CC", "surfaceBright": "#FFF9EE", "surfaceContainerLowest": "#FFFFFF", "surfaceContainerLow": "#FAF3E5", "surfaceContainer": "#F4EDDF", "surfaceContainerHigh": "#EEE8DA", "surfaceContainerHighest": "#E8E2D4" }, "dark": { "primary": "#DBC66E", "surfaceTint": "#DBC66E", "onPrimary": "#3A3000", "primaryContainer": "#534600", "onPrimaryContainer": "#F8E287", "secondary": "#D1C6A1", "onSecondary": "#363016", "secondaryContainer": "#4E472A", "onSecondaryContainer": "#EEE2BC", "tertiary": "#A9D0B3", "onTertiary": "#143723", "tertiaryContainer": "#2C4E38", "onTertiaryContainer": "#C5ECCE", "error": "#FFB4AB", "onError": "#690005", "errorContainer": "#93000A", "onErrorContainer": "#FFDAD6", "background": "#15130B", "onBackground": "#E8E2D4", "surface": "#15130B", "onSurface": "#E8E2D4", "surfaceVariant": "#4B4739", "onSurfaceVariant": "#CDC6B4", "outline": "#969080", "outlineVariant": "#4B4739", "shadow": "#000000", "scrim": "#000000", "inverseSurface": "#E8E2D4", "inverseOnSurface": "#333027", "inversePrimary": "#6D5E0F", "primaryFixed": "#F8E287", "onPrimaryFixed": "#221B00", "primaryFixedDim": "#DBC66E", "onPrimaryFixedVariant": "#534600", "secondaryFixed": "#EEE2BC", "onSecondaryFixed": "#211B04", "secondaryFixedDim": "#D1C6A1", "onSecondaryFixedVariant": "#4E472A", "tertiaryFixed": "#C5ECCE", "onTertiaryFixed": "#00210F", "tertiaryFixedDim": "#A9D0B3", "onTertiaryFixedVariant": "#2C4E38", "surfaceDim": "#15130B", "surfaceBright": "#3C3930", "surfaceContainerLowest": "#100E07", "surfaceContainerLow": "#1E1B13", "surfaceContainer": "#222017", "surfaceContainerHigh": "#2D2A21", "surfaceContainerHighest": "#38352B" } } } -
Here, you must define all your colours. Either by your exsisting colour ways, or you can build a new theme. The Material Theme Buildier is a handy tool to create new themes.
- Each JSON property is the name of the CSS variable!
- for example, if you want to use the
primarycolour in your css, you usevar(--primary). - example:
Please note: you should follow the Material 3 colour guidlines when desinging or migraiting your site.
div { background-color: var(--primaryContainer); color: var(--onPrimaryContainer); }
- for example, if you want to use the
If your website using the MonetWebAdapter, you can implement a popup that will prompt the user to install the MonetWebAdapter app. This popup will only show up on android devices that do not already have the app running. Once closed, a cookie will be stored to ensure the popup is never shown. You can view an example of the popup here. The popup uses the same CSS variable names, so your sites colours will override the default colours.
If you wish to implement the popup, add this inbetween your <head></head> tags:
<script src="https://wacko1805.github.io/MonetWebAdapter/popup/popup.js" defer></script>