From 08641a3c6dee8f0e3a45890f6d1272348274e9f2 Mon Sep 17 00:00:00 2001 From: Jack Sam <54708993+wacko1805@users.noreply.github.com> Date: Fri, 18 Oct 2024 18:13:57 +1100 Subject: [PATCH] Update README.md --- README.md | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index bbf1f9c..93d9346 100644 --- a/README.md +++ b/README.md @@ -6,8 +6,8 @@ - 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](https://github.com/wacko1805/MonetWebAdapter/blob/main/assets/images/local.png?raw=true) -![connected](https://github.com/wacko1805/MonetWebAdapter/blob/main/assets/images/connected.png?raw=true) +local +connected ## How it works for you: @@ -28,8 +28,8 @@ - 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! - Layout of ``` colours.json ```: -- - ```{ + +```{ "Comments": "Define your sites colours here:", "colors": { "primary": "#974811", @@ -56,19 +56,28 @@ "surfaceTint": "#974811" } } - ``` +``` - Here, you must define all your colours. Either by your exsisting colour ways, or you can build a new theme from the [Material Theme Buildier](https://material-foundation.github.io/material-theme-builder/) - ### Using colours in your css: - Each 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)```. - Small example: ``` - .card { + 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 alert the user, only if they are using android, and if they the host app is not running. You can view an example of the popup [here](https://wacko1805.github.io/MonetWebAdapter/popup-test.html). + + If you wish to implement the popup, add this inbetween your `````` tags: + ``` + + ``` +