Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/0xk1f0/tauri-plugin-m3
Android Material3/MaterialYou Plugin
https://github.com/0xk1f0/tauri-plugin-m3
android material-ui material3 tauri tauri-plugin
Last synced: 10 days ago
JSON representation
Android Material3/MaterialYou Plugin
- Host: GitHub
- URL: https://github.com/0xk1f0/tauri-plugin-m3
- Owner: 0xk1f0
- License: gpl-3.0
- Created: 2024-11-12T21:29:25.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2025-01-11T16:12:32.000Z (11 days ago)
- Last Synced: 2025-01-11T16:34:33.467Z (11 days ago)
- Topics: android, material-ui, material3, tauri, tauri-plugin
- Language: Rust
- Homepage:
- Size: 716 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Features
- Automatically enables Android's [EdgeToEdge](https://developer.android.com/develop/ui/views/layout/edge-to-edge) StatusBar and NavigationBar Styling
- Access MaterialYou Dynamic Color Palette
- Change Status Bar and Navigation Bar Color
- Access Window Insets to align EdgeToEdge layout correctly
## Install
Install the Core plugin by adding the following to your `Cargo.toml` file:
`src-tauri/Cargo.toml`
```toml
# via crates.io
[dependencies]
tauri-plugin-m3 = "0.2.0"
# or directly
[dependencies]
tauri-plugin-m3 = { git = "https://github.com/0xk1f0/tauri-plugin-m3" }
```
And then install the JavaScript Guest bindings like this:
```sh
# 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`
```rust
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:
```typescript
import { M3 } from "tauri-plugin-m3";
import type { ColorScheme } from "tauri-plugin-m3";
// choose either "dark", "light" or default to "system"
let colorScheme = await M3.fetch().colors();
console.log(colorScheme.primary); // Outputs color in RGBA format f.E. "#F4F678FF"
```
The following colors are available
```typescript
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`
```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`
```html
import { onMount } from 'svelte';
import { M3 } from 'tauri-plugin-m3';
onMount(async () => {
await M3.fetch().apply();
await M3.barColor();
});
Hello World
body {
background-color: var(--background);
}
```
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](https://github.com/tauri-apps/plugins-workspace) - For showing me how to build Tauri Plugins
