Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wacko1805/monetwebadapter
Enableing androids dynamic wallpaper colours on the web!
https://github.com/wacko1805/monetwebadapter
android android-application android-material-design color-scheme colorscheme css material-design material-ui web
Last synced: 7 days ago
JSON representation
Enableing androids dynamic wallpaper colours on the web!
- Host: GitHub
- URL: https://github.com/wacko1805/monetwebadapter
- Owner: wacko1805
- Created: 2024-10-15T09:07:20.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-10-18T11:40:17.000Z (29 days ago)
- Last Synced: 2024-10-21T14:55:49.354Z (26 days ago)
- Topics: android, android-application, android-material-design, color-scheme, colorscheme, css, material-design, material-ui, web
- Language: HTML
- Homepage: https://wacko1805.github.io/MonetWebAdapter/
- Size: 95.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### MWA allows the Dynamic Wallpaper Colours from android 12 and up on the web! [View Example Site](https://wacko1805.github.io/MonetWebAdapter/)
## 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.
## How it works for you:
- You simply install the MonetWebApapter app, and all supported websites will instantly match your phones dynamic colours.
- [Download here](https://github.com/wacko1805/MonetWebHost/releases)
## Supported Sites:
- [Example Site](https://wacko1805.github.io/MonetWebAdapter/)
- [MagiskGApps.com](https://magiskgapps.com)
## How it works for web developers:
- Download the script file [here](https://github.com/wacko1805/MonetWebAdapter/DynamicWebAdapter.js) and implement it between the ``` ``` tags. For example,
```
```
- 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](https://material-foundation.github.io/material-theme-builder/).
- 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](https://material-foundation.github.io/material-theme-builder/) 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](https://m3.material.io/styles/color/system/overview) when desinging or migraiting your site.
## Implementing the popup
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](https://wacko1805.github.io/MonetWebAdapter/popup-test.html). 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 `````` tags:
```
```
### Example of the popup can be found [here](https://wacko1805.github.io/MonetWebAdapter/popup-test.html).