MonetWebAdapter

MWALogo

MWA allows the Dynamic Wallpaper Colours from android 12 and up on the web! View Example Site

How does it work?

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.json shown below. The second screenshot shows dynamic colours loaded from the Host app.

local connected

How it works for you:

You simply install the MonetWebApapter app, and all supported websites will instantly match your phones dynamic colours.
Download here

Supported Sites:

How it works for web developers:

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.json file. If not, you may have to modify your site to use the material 3 colour way and naming.
Important: The colours.json Must be placed in the root directory of the site!
How to Make a new theme using the generator:
- 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.

Using colours in your css:

Each JSON property is the name of the CSS variable!
- for example, if you want to use the primary colour in your css, you use var(--primary).
- example:
```
div {
      background-color: var(--primaryContainer);
      color: var(--onPrimaryContainer);
}
```
  Please note: you should follow the Material 3 colour guidlines when desinging or migraiting your site.

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>

### Example of the popup can be found here.

MonetWebAdapter

MWA allows the Dynamic Wallpaper Colours from android 12 and up on the web! View Example Site

How does it work?

How it works for you:

Supported Sites:

How it works for web developers:

Important: The colours.json Must be placed in the root directory of the site!

How to Make a new theme using the generator:

Using colours in your css:

Implementing the popup

Important: The `colours.json` Must be placed in the root directory of the site!