npmpackage.info

Gathering detailed insights and metrics for @react-md/theme

Other packages similar to @react-md/theme

md-editor-rt

5.8.1

Markdown editor for react, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...

@react-md/link

5.1.6

The base package for including a theme for react-md. This is required by most other packages.

md-tools-theme-component-react

1.0.2

md-tools的一个React组件文档系统

md-tools-theme-multi-component-react

1.0.17-beta.3

md-tools的一个React组件库文档系统

Gathering detailed insights and metrics for @react-md/theme

@react-md/theme - 5.1.6 | npmpackage.info

@react-md/theme

React material design - An accessible React component library built from the Material Design guidelines in Sass

5.1.6

2,337

MIT

TypeScript

419.51 kB

4.6

Installations

npm install @react-md/theme

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.18.0

NPM Version

lerna/4.0.0/node@v18.18.0+x64 (linux)

Pull Requests

Open

0

Total

741

Closed

315

Merged

426

Issues

Open

17

Total

722

Closed

705

Releases

194

@react-md/core@6.3.1

Updated on Jul 11, 2025

@react-md/core@6.3.0

Updated on Jul 04, 2025

@react-md/core@6.2.1

Updated on Jul 03, 2025

@react-md/core@6.2.0

Updated on Jun 13, 2025

@react-md/core@6.1.0

Updated on May 30, 2025

@react-md/core@6.0.2

Updated on May 24, 2025

View All 194 releases

Languages

TypeScript

MDX

SCSS

JavaScript

Lua

TypeScript (89.84%)

MDX (5.71%)

SCSS (4.33%)

JavaScript (0.12%)

Developer

mlaursen

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2,337 Stars

6,519 Commits

301 Forks

53 Watchers

12 Branches

68 Contributors

Updated on Jul 17, 2025

Maintainers

View All 68 Contributors

Package Meta Information

Latest Version

5.1.6

Package Id

@react-md/theme@5.1.6

Unpacked Size

419.51 kB

Size

62.90 kB

File Count

NPM Version

lerna/4.0.0/node@v18.18.0+x64 (linux)

Node Version

18.18.0

Published on

Dec 11, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@react-md/theme

This package is used for creating a color theme within react-md. It also exposes some utility Components and mixins for updating the theme at runtime through CSS Variables.

Installation

This package can be installed through npm if you want access to all the SCSS variables, functions, and mixins or by using the pre-compiled bundles hosted on https://unpkg.com.

1npm install --save @react-md/theme

Documentation

Full usage and documentation can be found on the main documentation site at the theme page, but there will be a few examples in this README.

Defining a theme

Starting with v2.0.0, react-md will use both SCSS and css variables to define themes. This allows you to use the nice dynamic themes with css variables in evergreen browsers but also support the older ones if needed.

The default theme is:

1$rmd-theme-primary: $rmd-purple-500 !default;
2$rmd-theme-secondary: $rmd-pink-a-400 !default;
3
4// the background color for your app. Normally applied to the base <html> tag
5$rmd-theme-background: #fafafa !default;
6
7// the background color for "surfaces" (things like dialogs, menus, cards, etc)
8$rmd-theme-surface: #fff !default;

This can be overridden by setting these variables to new colors that are included in react-md, or a custom color by re-defining these values before importing the main theme file.

Using the default dark theme

If you override the $rmd-theme-light variable to be false, the default theme will be:

1$rmd-theme-primary: $rmd-purple-500 !default;
2$rmd-theme-secondary: $rmd-pink-a-400 !default;
3
4// the background color for your app. Normally applied to the base <html> tag
5$rmd-theme-background: #303030 !default;
6
7// the background color for "surfaces" (things like dialogs, menus, cards, etc)
8$rmd-theme-surface: $md-grey-800 !default;

With a material design color

If the theme colors are one of the material design colors, you can use some of the existing SCSS variables to update your theme.

Example:

1@import "@react-md/theme/dist/color-palette";
2
3$rmd-theme-primary: $rmd-blue-500;
4$rmd-theme-secondary: $rmd-orange-a-400;
5
6@import "@react-md/theme/dist/mixins";
7
8@include react-md-theme;

Note that the theme variables were overridden before importing the main theme file. You might have problems overriding the theme if you define them after.

With any color

Since your company might have specific branding colors, it is also possible to define a theme that does not have material design colors at all.

1$my-awesome-company-purple: #9b59b6;
2$my-awesome-company-orange: #e67e22;
3
4$rmd-theme-primary: $my-awesome-company-purple;
5$rmd-theme-secondary: $my-awesome-company-orange;
6
7@import "@react-md/theme/dist/mixins";
8
9@include react-md-theme;

Recommended base project files

To make including custom styles easy, it might be helpful to create the following files in your project:

src/_branding.scss - A file that contains the color variables for your company's branding
src/_react-md-overrides.scss - A file that contains the react-md variable overrides with new values
src/_all.scss - A file that is used as a quick import to include all available variables, mixins, and functions within any file in your app for convenience
src/index.scss - A file that is used to generate your base styles

Example:

1// in src/_branding.scss
2$my-awesome-company-purple: #9b59b6;
3$my-awesome-company-orange: #e67e22;

1// in src/_react-md-overrides.scss
2@import "branding";
3
4$rmd-theme-primary: $my-awesome-company-purple;
5$rmd-theme-secondary: $my-awesome-company-orange;

1// in src/_all.scss
2@import "my-awesome-company-branding";
3@import "my-awesome-company-react-md-overrides";
4
5@import "@react-md/theme/dist/mixins";

1// in src/index.scss
2@import "all";
3
4@include react-md-theme;

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

SAST

Determines if the project uses static code analysis.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 2

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:90: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/label.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/label.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/main.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/main.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/mlaursen/react-md/main.yml/main?enable=pin
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:1
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:6
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:11
Warn: containerImage not pinned by hash: examples/react-router-framework-mode/Dockerfile:17: pin your Docker image by updating node:20-alpine to node:20-alpine@sha256:fa316946c0cb1f041fe46dda150f3085b71168555e5706ec0c7466a5bae12244
Info: 0 out of 6 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned
Info: 0 out of 4 containerImage dependencies pinned
Info: 2 out of 2 npmCommand dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @react-md/theme

Other packages similar to @react-md/theme

@react-md/theme

Installations

Developer Guide

Yes

CommonJS

18.18.0

lerna/4.0.0/node@v18.18.0+x64 (linux)

Pull Requests

0

741

315

426

Issues

17

722

705

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@react-md/theme

Installation

Documentation

Defining a theme

Using the default dark theme

With a material design color

With any color

Recommended base project files

10

10

10

10

10

2

0

0

0

0

0

0

4.6

/10