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="/DynamicWebAdapter.js"></script> </head>Alternatively,
<script src="https://jacks.am/MonetWebAdapter/DynamicWebAdapter.js"></script>- Please note, doing it this way means your config file MUST be in the root directory.
-
The config file allows you to change some settings. This is optional, if no config file is found, it will default to the root directory for the
colours.jsonfile. The config file , by default, should be calledDWAconfig.json.colours_pathdefines the file location and name of the source colours JSON file. This will make more sence in the next step. By default, if this is not defined, it will default tocolours.jsonin the root directory.theme_prefdefines that colour scheme is set for the colours. The script allows automatic light/dark mode setting, but this can be changed here. Supported Schemes:autoAuto light and dark mode settinglightdark
If this is not defined, orconfig file not found, it will default to auto.
Layout of an example config file:
{ "colours_path": "assets/colours.json", "theme_pref": "auto" }Here, you can link your colours json file.
In the script file, if you need, you can change the directory of the config file. By default, it will search for the config file in root. You can change this location from in the script file as below:
const configFile = 'DWAconfig.json'; -
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, or as stated above, define your file location in the config file.
-
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>