Agent skill
material-3-to-material-2-theme-adapter
Learn how to seamlessly integrate Material Design 3's styling into your Material Design 2 components using CSS variable overrides.
Install this agent skill to your Project
npx add-skill https://github.com/rodydavis/skills/tree/main/skills/snippets_m3-to-m2-css-adapter
Metadata
Additional technical details for this skill
- last modified
- Tue, 03 Feb 2026 20:04:28 GMT
SKILL.md
Material 3 to Material 2 Theme Adapter
Overview
How to style Material 2 components with Material 3 in CSS:
:root {
--mdc-theme-primary: var(--md-sys-color-primary);
--mdc-theme-on-primary: var(--md-sys--coloron-primary);
--mdc-theme-background: var(--md-sys--colorbackground);
--mdc-theme-on-background: var(--md-sys--coloron-background);
--mdc-theme-on-surface-variant: var(--md-sys--coloron-surface-variant);
--mdc-theme-surface-variant: var(--md-sys--colorsurface-variant);
--mdc-theme-on-surface: var(--md-sys--coloron-surface);
--mdc-theme-surface: var(--md-sys--colorsurface);
--mdc-theme-text-primary-on-background: var(--md-sys--coloron-surface-variant);
--mdc-theme-outline: var(--md-sys-color-outline);
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
rodydavis/skills
how-to-do-offline-recommendations-with-sqlite-and-gemini
Learn how to enhance your CMS like PocketBase with AI-powered content recommendations using text embeddings, SQLite, and k-nearest neighbor search for efficient and scalable related content suggestions.
rodydavis/skills
how-to-build-a-webrtc-signal-server-with-pocketbase
Learn how to build a simple WebRTC video call application using PocketBase as a signaling server, enabling peer-to-peer communication with SQLite on the server and realtime updates via Server Sent Events.
rodydavis/skills
flutter-terminal-cheat-sheet
This post provides a handy collection of Flutter commands and scripts for web development, package creation, troubleshooting, testing, and more, streamlining your Flutter workflow.
rodydavis/skills
how-to-print-multiple-objects-to-the-console-with-print-in-dart
Learn how to print multiple objects to the console in Dart using Records, offering a similar experience to JavaScript's `console.log()` functionality.
rodydavis/skills
flutter-input-output-preview
Build responsive Flutter apps with a reusable `TwoPane` widget and an `InputOutputPreview` component for side-by-side code and preview display on both mobile and desktop.
rodydavis/skills
displaying-html-in-flutter
Easily display and interact with HTML content in your Flutter app using the `easy_web_view` package, which supports both web and mobile platforms.
Didn't find tool you were looking for?