tauri-plugin-m3

Android Material3/MaterialYou Plugin

Expand Demo

Features

• Access MaterialYou Dynamic Color Palette
• Automatically enables Android's EdgeToEdge StatusBar and NavigationBar Styling

Install

Install the Core plugin by adding the following to your Cargo.toml file:

src-tauri/Cargo.toml

# via crates.io
[dependencies]
tauri-plugin-m3 = "0.1.0"
# or directly
[dependencies]
tauri-plugin-m3 = { git = "https://github.com/0xk1f0/tauri-plugin-m3" }

And then install the JavaScript Guest bindings like this:

# via npmjs.org
npm install tauri-plugin-m3
# or directly
npm install https://github.com/0xk1f0/tauri-plugin-m3

Usage

First you need to register the core plugin with Tauri:

src-tauri/src/main.rs

fn main() {
    tauri::Builder::default()
        .plugin(tauri_plugin_m3::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Afterwards all the plugin's APIs are available through the JavaScript guest bindings:

import { M3 } from "tauri-plugin-m3";
import type { ColorScheme } from "tauri-plugin-m3";

const Material3 = new M3();
let colorScheme = await Material3.fetch().colors();

console.log(colorScheme.primary); // Outputs color in RGBA format f.E. "#F4F678FF"

The following colors are available

type ColorScheme = {
    primary?: string;
    onPrimary?: string;
    primaryContainer?: string;
    onPrimaryContainer?: string;
    inversePrimary?: string;
    secondary?: string;
    onSecondary?: string;
    secondaryContainer?: string;
    onSecondaryContainer?: string;
    tertiary?: string;
    onTertiary?: string;
    tertiaryContainer?: string;
    onTertiaryContainer?: string;
    background?: string;
    onBackground?: string;
    surface?: string;
    onSurface?: string;
    surfaceVariant?: string;
    onSurfaceVariant?: string;
    inverseSurface?: string;
    inverseOnSurface?: string;
    outline?: string;
};

Global Theming

We can implement automatic global theming of our app via defining a fallback theme in our primary CSS file first

styles.css

:root {
    --primary: #bb86fc;
    --onPrimary: #000000;
    --primaryContainer: #3700b3;
    --onPrimaryContainer: #ffffff;
    --inversePrimary: #6200ee;
    --secondary: #03dac6;
    --onSecondary: #000000;
    --secondaryContainer: #00574b;
    --onSecondaryContainer: #ffffff;
    --tertiary: #03a9f4;
    --onTertiary: #000000;
    --tertiaryContainer: #014d73;
    --onTertiaryContainer: #ffffff;
    --background: #121212;
    --onBackground: #e0e0e0;
    --surface: #1e1e1e;
    --onSurface: #e0e0e0;
    --surfaceVariant: #2c2c2c;
    --onSurfaceVariant: #e0e0e0;
    --inverseSurface: #ffffff;
    --inverseOnSurface: #000000;
    --outline: #a0a0a0;
}

Then initialize our colors when our app loads for the first time, f.E. in Svelte's onMount()

App.svelte

<script>
    import { onMount } from 'svelte';
    import { M3 } from 'tauri-plugin-m3';

    const Material3 = new M3();

    onMount(async () => {
        await Material3.fetch().apply();
    });
</script>

<div>
    <h1 style="color: var(--primary);">Hello World</h1>
</div>

<style>
    body {
        background-color: var(--background);
    }
</style>

This will ensure that our MaterialYou colors get loaded into our predefined CSS variables, but also provides a fallback theme.

Of course this is only one way to do it, feel free to use this plugin like you want! :)

Credits and Thanks

• plugins-workspace - For showing me how to build Tauri Plugins