Material 3 to Material 2 Theme Adapter

Explorer

Content

ai

vector-recommendations.md

astro

ssr-pocketbase.md

backend

pocketbase-cloudrun.md

pocketbase-webrtc.md

blog

migrating-to-pocketbase.md

podcast-github-pages.md

dart

export-sqlite.md

function-invoking.md

html-web-components.md

print-multiple-objects.md

lit

codemirror-dynamic-theme.md

draggable-dom.md

figma-interop.md

making-a-piano.md

monaco-editor.md

rich-text-editor.md

vscode-extension.md

podcast

creative-engineering

building-the-flutter-widget-maker-and-storyboard.md

flutter-adaptive-ui-and-web-assembly.md

flutter-desktopweb-and-vr.md

flutter-state-management-and-dart-nullability-feat-simon-lightfoot.md

flutter-testing-and-appstore-rejection.md

pro-putt-by-top-golf-feat-jason-clevering.md

talking-about-riverpod-with-remi-rousselet.md

tech-walks

building-a-dnd-agent-with-adk-antigravity-and-gemini-3.md

building-with-antigravity-gemini-cli-and-stitch.md

talking-about-skills-optimizing-prompts-and-building-mcp-servers-in-apps.md

recipes

the-perfect-brisket.md

sqlite

travel

narobi-national-park.md

videos

ai

gemma-now-available-in-kerasnlp-collection-signal-input-in-developer-preview-and-more-dev-news.md

google-computer-use-model-gemini-cli-extensions-and-more-google-developer-news-october-2025.md

how-to-automate-pr-summaries-with-opal-ai.md

how-to-connect-interfaces-to-the-cloud-with-ai-agents.md

leverage-gemini-in-your-android-apps-global-gamer-challenge-and-more-dev-news.md

offline-vector-search-with-sqlite-and-embeddinggemma.md

the-gemini-cookbook-popover-api-lands-in-baseline-and-more-dev-news.md

antigravity

flutter-antigravity-observable-flutter-76.md

how-to-build-with-flutter-and-google-antigravity.md

intro-to-agent-skills.md

dev-show

announcing-tensorstore-chrome-root-program-and-more-dev-news.md

blockchain-based-experiences-govulncheck-v100-and-more-dev-news.md

compression-streams-support-on-all-browsers-androids-new-credential-manager-and-more-dev-news.md

connect-google-services-to-bard-flutters-consulting-directory-and-more-developer-news.md

dataset-search-wear-os-updates-and-more-dev-news.md

jetpack-watch-face-library-datastream-is-ga-bazel-con-recap-and-more-dev-news.md

new-to-the-web-try-out-android-predictive-back-gestures-and-more-dev-news.md

privacy-sandbox-demos-pixel-devices-and-more-dev-news.md

scaling-vision-transformers-compose-pager-and-more-dev-news.md

firebase-studio

build-full-stack-ai-apps-in-minutes-with-firebase-studio.md

building-ai-powered-experiences-with-firebase-studio-and-firebase-platform-rody-davis.md

building-firebase-studio-rules-for-angular-live.md

compile-sqlite-from-source-to-wasm-in-firebase-studio.md

explore-all-the-official-templates-for-firebase-studio.md

firebase-after-hours-14-live-vibe-coding-with-firebase-studio.md

firebase-studio-now-supports-gemma-3-image-inputs-on-the-gemini-developer-api-.md

from-prototype-to-ide-in-firebase-studio.md

how-firebase-studio-accelerates-development.md

import-existing-projects-into-firebase-studio.md

introducing-firebase-studio.md

start-prototyping-with-firebase-studio.md

flutter

create-simple-beautiful-ui-with-flutter.md

flutter-as-a-service-webinar.md

flutter-plugin-live-coding-native-color-picker.md

idx-flutter-by-rody-davis-senior-developer-advocate-google.md

introducing-the-signals_hooks-package-for-flutter-hooks-and-signals.md

material-3-from-design-to-deployment.md

material-you-applying-dynamic-color-to-your-app-and-brand.md

rody-davis-building-adaptive-uiux-in-flutter.md

interviews

60-flutter-with-rody-davis.md

chat-with-lit-1-westbrook-johnson-adobe.md

chatting-with-a-googler-rodydavis-google-flutter-firebase-developers-ai-vibecoding.md

interview-with-rody-davis-firebase.md

speaker-interview-rody-davis-david-khourshid-and-joo-luiz-s-kestering.md

take-5

adaptive-dialogs-flutter.md

internationalization-flutter.md

master-detail-scaffold-flutter.md

responsive-design-flutter.md

shared-preferences-flutter.md

your-first-flutter-project.md

talks

5-things-you-can-do-to-prepare-your-app-for-large-screens-session.md

design-at-scale-with-web-components-and-ducks.md

findevs-flutter-hackathon-2019-orlando-winner.md

google-cloud-next-2022-dart-partnership-with-github-and-more-dev-news.md

google-io-2023-passkeys-passwordless-future-and-more-dev-news.md

material-you-figma-bringing-dynamic-color-brand-together-rody-davis-ivy-knight-schema-2021.md

moving-an-angular-app-to-flutter-web-devfest-fl-2019.md

road-to-flutter-city-rody-davis.md

space-apps-orlando-2019-space-curiosity.md

women-in-machine-learning-symposium-flutter-forward-more-dev-news.md

web

file-based-routing.md

html-code-sandbox.md

preact-signals.md

snippets

color-utilities.md

m3-to-m2-adapter.md

Outline

Material 3 to Material 2 Theme Adapter

Related

Material You: Applying dynamic color to your app and brand Material 3 from design to deployment Flutter Markdown View with Material 3 Material You & Figma: Bringing Dynamic Color & brand together - Rody Davis, Ivy Knight (Schema 2021)Dynamic Themes with CodeMirror

Tags

web › snippets › m3-to-m2-adapter.md

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

# Material 3 to Material 2 Theme Adapter

Overview 
---------

How to style Material 2 components with Material 3 in CSS:

```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);
}
```

Markdown