react-md
react-md - Theme - SassDoc

Variables

rmd-theme-default-contrast-ratio

Number

This is the default contrast ratio to use for color accessibility between background and foreground colors. This number should be at least:

  • 3 for large text (18pt normal or 14pt bold)
  • 4.5 for normal text
  • 7.1 for Level AAA requirements.
$rmd-theme-default-contrast-ratio: 3 !default;
See also

rmd-theme-better-contrast-colors

Since v2.4.0

Boolean

Boolean if the newer contrast ration defaults should be used. This basically will try to choose colors with a higher aspect ratio for all the default color variables in react md.

$rmd-theme-better-contrast-colors: true !default;

Examples

Better Contrast Enabled
@use '@react-md/theme/dist/scss/color-palette' as colors;
@use 'react-md' as * with (
  $rmd-theme-better-contrast-colors: true,
  $rmd-theme-primary: colors.$rmd-teal-500,
  $rmd-theme-secondary: colors.$rmd-pink-a-200
);

// these are the rmd-defaults
// $rmd-theme-on-primary: rmd-theme-best-contrast-color($rmd-theme-primary) !default;
// $rmd-theme-on-secondary: rmd-theme-best-contrast-color($rmd-theme-secondary) !default;

.output {
  --p: #{$rmd-theme-primary};
  --s: #{$rmd-theme-secondary};

  // since black has a ~5.3 color ratio as compared to white with ~3.6
  --op: #{$rmd-theme-on-primary};
  --os: #{$rmd-theme-on-secondary};
}
Better Contrast Disabled
@use '@react-md/theme/dist/scss/color-palette' as colors;
@use 'react-md' as * with (
  $rmd-theme-better-contrast-colors: false,
  $rmd-theme-primary: colors.$rmd-teal-500,
  $rmd-theme-secondary: colors.$rmd-pink-a-200
);

// these are the rmd-defaults
// $rmd-theme-on-primary: rmd-theme-best-contrast-color($rmd-theme-primary) !default;
// $rmd-theme-on-secondary: rmd-theme-best-contrast-color($rmd-theme-secondary) !default;

.output {
  --p: #{$rmd-theme-primary};
  --s: #{$rmd-theme-secondary};

  // white has a ~3.6 color ratio so it _is_ contrast compliant with the
  // minimal contrast ratios even though black would be ~5.6
  --op: #{$rmd-theme-on-primary};
  --os: #{$rmd-theme-on-secondary};
}

rmd-theme-linear-channel-values

List

Precomputed linear color channel values, for use in contrast calculations. See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests

Algorithm:

  for c in 0 to 255:
  f(c) {
    c = c / 255;
    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  }

This lookup table is needed since there is no pow in SCSS/Sass. You can make your own, but it is recommended to pass the computed values from a 'more complete' layer (like node) as a lookup table to speed up compilation time.

$rmd-theme-linear-channel-values: (
  0 0.0003035269835488375 0.000607053967097675 0.0009105809506465125
    0.00121410793419535 0.0015176349177441874 0.001821161901293025
    0.0021246888848418626 0.0024282158683907 0.0027317428519395373
    0.003035269835488375 0.003346535763899161 0.003676507324047436
    0.004024717018496307 0.004391442037410293 0.004776953480693729
    0.005181516702338386 0.005605391624202723 0.006048833022857054
    0.006512090792594475 0.006995410187265387 0.007499032043226175
    0.008023192985384994 0.008568125618069307 0.009134058702220787
    0.00972121732023785 0.010329823029626936 0.010960094006488246
    0.011612245179743885 0.012286488356915872 0.012983032342173012
    0.013702083047289686 0.014443843596092545 0.01520851442291271
    0.01599629336550963 0.016807375752887384 0.017641954488384078
    0.018500220128379697 0.019382360956935723 0.0202885630566524
    0.021219010376003555 0.022173884793387385 0.02315336617811041
    0.024157632448504756 0.02518685962736163 0.026241221894849898
    0.027320891639074894 0.028426039504420793 0.0295568344378088
    0.030713443732993635 0.03189603307301153 0.033104766570885055
    0.03433980680868217 0.03560131487502034 0.03688945040110004
    0.0382043715953465 0.03954623527673284 0.04091519690685319
    0.042311410620809675 0.043735029256973465 0.04518620438567554
    0.046665086336880095 0.04817182422688942 0.04970656598412723
    0.05126945837404324 0.052860647023180246 0.05448027644244237
    0.05612849004960009 0.05780543019106723 0.0595112381629812
    0.06124605423161761 0.06301001765316767 0.06480326669290577
    0.06662593864377289 0.06847816984440017 0.07036009569659588
    0.07227185068231748 0.07421356838014963 0.07618538148130785
    0.07818742180518633 0.08021982031446832 0.0822827071298148
    0.08437621154414882 0.08650046203654976 0.08865558628577294
    0.09084171118340768 0.09305896284668745 0.0953074666309647
    0.09758734714186246 0.09989872824711389 0.10224173308810132
    0.10461648409110419 0.10702310297826761 0.10946171077829933
    0.1119324278369056 0.11443537382697373 0.11697066775851084
    0.11953842798834562 0.12213877222960187 0.12477181756095049
    0.12743768043564743 0.1301364766903643 0.13286832155381798
    0.13563332965520566 0.13843161503245183 0.14126329114027164
    0.14412847085805777 0.14702726649759498 0.14995978981060856
    0.15292615199615017 0.1559264637078274 0.1589608350608804 0.162029375639111
    0.1651321945016676 0.16826940018969075 0.1714411007328226
    0.17464740365558504 0.17788841598362912 0.18116424424986022
    0.184474994500441 0.18782077230067787 0.19120168274079138 0.1946178304415758
    0.19806931955994886 0.20155625379439707 0.20507873639031693
    0.20863687014525575 0.21223075741405523 0.21586050011389926
    0.2195261997292692 0.2232279573168085 0.22696587351009836
    0.23074004852434915 0.23455058216100522 0.238397573812271
    0.24228112246555486 0.24620132670783548 0.25015828472995344
    0.25415209433082675 0.2581828529215958 0.26225065752969623
    0.26635560480286247 0.2704977910130658 0.27467731206038465
    0.2788942634768104 0.2831487404299921 0.2874408377269175 0.29177064981753587
    0.2961382707983211 0.3005437944157765 0.3049873140698863 0.30946892281750854
    0.31398871337571754 0.31854677812509186 0.32314320911295075
    0.3277780980565422 0.33245153634617935 0.33716361504833037
    0.3419144249086609 0.3467040563550296 0.35153259950043936 0.3564001441459435
    0.3613067797835095 0.3662525955988395 0.3712376804741491 0.3762621229909065
    0.38132601143253014 0.386429433787049 0.39157247774972326
    0.39675523072562685 0.4019777798321958 0.4072402119017367
    0.41254261348390375 0.4178850708481375 0.4232676699860717 0.4286904966139066
    0.43415363617474895 0.4396571738409188 0.44520119451622786
    0.45078578283822346 0.45641102318040466 0.4620769996544071 0.467783796112159
    0.47353149614800955 0.4793201831008268 0.4851499400560704 0.4910208498478356
    0.4969329950608704 0.5028864580325687 0.5088813208549338 0.5149176653765214
    0.5209955732043543 0.5271151257058131 0.5332764040105052 0.5394794890121072
    0.5457244613701866 0.5520114015120001 0.5583403896342679 0.5647115057049292
    0.5711248294648731 0.5775804404296506 0.5840784178911641 0.5906188409193369
    0.5972017883637634 0.6038273388553378 0.6104955708078648 0.6172065624196511
    0.6239603916750761 0.6307571363461468 0.6375968739940326 0.6444796819705821
    0.6514056374198242 0.6583748172794485 0.665387298282272 0.6724431569576875
    0.6795424696330938 0.6866853124353135 0.6938717612919899 0.7011018919329731
    0.7083757798916868 0.7156935005064807 0.7230551289219693 0.7304607400903537
    0.7379104087727308 0.7454042095403874 0.7529422167760779 0.7605245046752924
    0.768151147247507 0.7758222183174236 0.7835377915261935 0.7912979403326302
    0.799102738014409 0.8069522576692516 0.8148465722161012 0.8227857543962835
    0.8307698767746546 0.83879901174074 0.846873231509858 0.8549926081242338
    0.8631572134541023 0.8713671191987972 0.8796223968878317 0.8879231178819663
    0.8962693533742664 0.9046611743911496 0.9130986517934192 0.9215818562772946
    0.9301108583754237 0.938685728457888 0.9473065367331999 0.9559733532492861
    0.9646862478944651 0.9734452903984125 0.9822505503331171 0.9911020971138298
    1
);
Used By

rmd-theme-color-map

Map

This is a map of all the material design base colors so that you can programmatically get variables with the neat sass-map functions.

$rmd-theme-color-map: (
  rmd-red-50: $rmd-red-50,
  rmd-red-100: $rmd-red-100,
  rmd-red-200: $rmd-red-200,
  rmd-red-300: $rmd-red-300,
  rmd-red-400: $rmd-red-400,
  rmd-red-500: $rmd-red-500,
  rmd-red-600: $rmd-red-600,
  rmd-red-700: $rmd-red-700,
  rmd-red-800: $rmd-red-800,
  rmd-red-900: $rmd-red-900,
  rmd-red-a-100: $rmd-red-a-100,
  rmd-red-a-200: $rmd-red-a-200,
  rmd-red-a-400: $rmd-red-a-400,
  rmd-red-a-700: $rmd-red-a-700,
  rmd-pink-50: $rmd-pink-50,
  rmd-pink-100: $rmd-pink-100,
  rmd-pink-200: $rmd-pink-200,
  rmd-pink-300: $rmd-pink-300,
  rmd-pink-400: $rmd-pink-400,
  rmd-pink-500: $rmd-pink-500,
  rmd-pink-600: $rmd-pink-600,
  rmd-pink-700: $rmd-pink-700,
  rmd-pink-800: $rmd-pink-800,
  rmd-pink-900: $rmd-pink-900,
  rmd-pink-a-100: $rmd-pink-a-100,
  rmd-pink-a-200: $rmd-pink-a-200,
  rmd-pink-a-400: $rmd-pink-a-400,
  rmd-pink-a-700: $rmd-pink-a-700,
  rmd-purple-50: $rmd-purple-50,
  rmd-purple-100: $rmd-purple-100,
  rmd-purple-200: $rmd-purple-200,
  rmd-purple-300: $rmd-purple-300,
  rmd-purple-400: $rmd-purple-400,
  rmd-purple-500: $rmd-purple-500,
  rmd-purple-600: $rmd-purple-600,
  rmd-purple-700: $rmd-purple-700,
  rmd-purple-800: $rmd-purple-800,
  rmd-purple-900: $rmd-purple-900,
  rmd-purple-a-100: $rmd-purple-a-100,
  rmd-purple-a-200: $rmd-purple-a-200,
  rmd-purple-a-400: $rmd-purple-a-400,
  rmd-purple-a-700: $rmd-purple-a-700,
  rmd-deep-purple-50: $rmd-deep-purple-50,
  rmd-deep-purple-100: $rmd-deep-purple-100,
  rmd-deep-purple-200: $rmd-deep-purple-200,
  rmd-deep-purple-300: $rmd-deep-purple-300,
  rmd-deep-purple-400: $rmd-deep-purple-400,
  rmd-deep-purple-500: $rmd-deep-purple-500,
  rmd-deep-purple-600: $rmd-deep-purple-600,
  rmd-deep-purple-700: $rmd-deep-purple-700,
  rmd-deep-purple-800: $rmd-deep-purple-800,
  rmd-deep-purple-900: $rmd-deep-purple-900,
  rmd-deep-purple-a-100: $rmd-deep-purple-a-100,
  rmd-deep-purple-a-200: $rmd-deep-purple-a-200,
  rmd-deep-purple-a-400: $rmd-deep-purple-a-400,
  rmd-deep-purple-a-700: $rmd-deep-purple-a-700,
  rmd-indigo-50: $rmd-indigo-50,
  rmd-indigo-100: $rmd-indigo-100,
  rmd-indigo-200: $rmd-indigo-200,
  rmd-indigo-300: $rmd-indigo-300,
  rmd-indigo-400: $rmd-indigo-400,
  rmd-indigo-500: $rmd-indigo-500,
  rmd-indigo-600: $rmd-indigo-600,
  rmd-indigo-700: $rmd-indigo-700,
  rmd-indigo-800: $rmd-indigo-800,
  rmd-indigo-900: $rmd-indigo-900,
  rmd-indigo-a-100: $rmd-indigo-a-100,
  rmd-indigo-a-200: $rmd-indigo-a-200,
  rmd-indigo-a-400: $rmd-indigo-a-400,
  rmd-indigo-a-700: $rmd-indigo-a-700,
  rmd-blue-50: $rmd-blue-50,
  rmd-blue-100: $rmd-blue-100,
  rmd-blue-200: $rmd-blue-200,
  rmd-blue-300: $rmd-blue-300,
  rmd-blue-400: $rmd-blue-400,
  rmd-blue-500: $rmd-blue-500,
  rmd-blue-600: $rmd-blue-600,
  rmd-blue-700: $rmd-blue-700,
  rmd-blue-800: $rmd-blue-800,
  rmd-blue-900: $rmd-blue-900,
  rmd-blue-a-100: $rmd-blue-a-100,
  rmd-blue-a-200: $rmd-blue-a-200,
  rmd-blue-a-400: $rmd-blue-a-400,
  rmd-blue-a-700: $rmd-blue-a-700,
  rmd-light-blue-50: $rmd-light-blue-50,
  rmd-light-blue-100: $rmd-light-blue-100,
  rmd-light-blue-200: $rmd-light-blue-200,
  rmd-light-blue-300: $rmd-light-blue-300,
  rmd-light-blue-400: $rmd-light-blue-400,
  rmd-light-blue-500: $rmd-light-blue-500,
  rmd-light-blue-600: $rmd-light-blue-600,
  rmd-light-blue-700: $rmd-light-blue-700,
  rmd-light-blue-800: $rmd-light-blue-800,
  rmd-light-blue-900: $rmd-light-blue-900,
  rmd-light-blue-a-100: $rmd-light-blue-a-100,
  rmd-light-blue-a-200: $rmd-light-blue-a-200,
  rmd-light-blue-a-400: $rmd-light-blue-a-400,
  rmd-light-blue-a-700: $rmd-light-blue-a-700,
  rmd-cyan-50: $rmd-cyan-50,
  rmd-cyan-100: $rmd-cyan-100,
  rmd-cyan-200: $rmd-cyan-200,
  rmd-cyan-300: $rmd-cyan-300,
  rmd-cyan-400: $rmd-cyan-400,
  rmd-cyan-500: $rmd-cyan-500,
  rmd-cyan-600: $rmd-cyan-600,
  rmd-cyan-700: $rmd-cyan-700,
  rmd-cyan-800: $rmd-cyan-800,
  rmd-cyan-900: $rmd-cyan-900,
  rmd-cyan-a-100: $rmd-cyan-a-100,
  rmd-cyan-a-200: $rmd-cyan-a-200,
  rmd-cyan-a-400: $rmd-cyan-a-400,
  rmd-cyan-a-700: $rmd-cyan-a-700,
  rmd-teal-50: $rmd-teal-50,
  rmd-teal-100: $rmd-teal-100,
  rmd-teal-200: $rmd-teal-200,
  rmd-teal-300: $rmd-teal-300,
  rmd-teal-400: $rmd-teal-400,
  rmd-teal-500: $rmd-teal-500,
  rmd-teal-600: $rmd-teal-600,
  rmd-teal-700: $rmd-teal-700,
  rmd-teal-800: $rmd-teal-800,
  rmd-teal-900: $rmd-teal-900,
  rmd-teal-a-100: $rmd-teal-a-100,
  rmd-teal-a-200: $rmd-teal-a-200,
  rmd-teal-a-400: $rmd-teal-a-400,
  rmd-teal-a-700: $rmd-teal-a-700,
  rmd-green-50: $rmd-green-50,
  rmd-green-100: $rmd-green-100,
  rmd-green-200: $rmd-green-200,
  rmd-green-300: $rmd-green-300,
  rmd-green-400: $rmd-green-400,
  rmd-green-500: $rmd-green-500,
  rmd-green-600: $rmd-green-600,
  rmd-green-700: $rmd-green-700,
  rmd-green-800: $rmd-green-800,
  rmd-green-900: $rmd-green-900,
  rmd-green-a-100: $rmd-green-a-100,
  rmd-green-a-200: $rmd-green-a-200,
  rmd-green-a-400: $rmd-green-a-400,
  rmd-green-a-700: $rmd-green-a-700,
  rmd-light-green-50: $rmd-light-green-50,
  rmd-light-green-100: $rmd-light-green-100,
  rmd-light-green-200: $rmd-light-green-200,
  rmd-light-green-300: $rmd-light-green-300,
  rmd-light-green-400: $rmd-light-green-400,
  rmd-light-green-500: $rmd-light-green-500,
  rmd-light-green-600: $rmd-light-green-600,
  rmd-light-green-700: $rmd-light-green-700,
  rmd-light-green-800: $rmd-light-green-800,
  rmd-light-green-900: $rmd-light-green-900,
  rmd-light-green-a-100: $rmd-light-green-a-100,
  rmd-light-green-a-200: $rmd-light-green-a-200,
  rmd-light-green-a-400: $rmd-light-green-a-400,
  rmd-light-green-a-700: $rmd-light-green-a-700,
  rmd-lime-50: $rmd-lime-50,
  rmd-lime-100: $rmd-lime-100,
  rmd-lime-200: $rmd-lime-200,
  rmd-lime-300: $rmd-lime-300,
  rmd-lime-400: $rmd-lime-400,
  rmd-lime-500: $rmd-lime-500,
  rmd-lime-600: $rmd-lime-600,
  rmd-lime-700: $rmd-lime-700,
  rmd-lime-800: $rmd-lime-800,
  rmd-lime-900: $rmd-lime-900,
  rmd-lime-a-100: $rmd-lime-a-100,
  rmd-lime-a-200: $rmd-lime-a-200,
  rmd-lime-a-400: $rmd-lime-a-400,
  rmd-lime-a-700: $rmd-lime-a-700,
  rmd-yellow-50: $rmd-yellow-50,
  rmd-yellow-100: $rmd-yellow-100,
  rmd-yellow-200: $rmd-yellow-200,
  rmd-yellow-300: $rmd-yellow-300,
  rmd-yellow-400: $rmd-yellow-400,
  rmd-yellow-500: $rmd-yellow-500,
  rmd-yellow-600: $rmd-yellow-600,
  rmd-yellow-700: $rmd-yellow-700,
  rmd-yellow-800: $rmd-yellow-800,
  rmd-yellow-900: $rmd-yellow-900,
  rmd-yellow-a-100: $rmd-yellow-a-100,
  rmd-yellow-a-200: $rmd-yellow-a-200,
  rmd-yellow-a-400: $rmd-yellow-a-400,
  rmd-yellow-a-700: $rmd-yellow-a-700,
  rmd-amber-50: $rmd-amber-50,
  rmd-amber-100: $rmd-amber-100,
  rmd-amber-200: $rmd-amber-200,
  rmd-amber-300: $rmd-amber-300,
  rmd-amber-400: $rmd-amber-400,
  rmd-amber-500: $rmd-amber-500,
  rmd-amber-600: $rmd-amber-600,
  rmd-amber-700: $rmd-amber-700,
  rmd-amber-800: $rmd-amber-800,
  rmd-amber-900: $rmd-amber-900,
  rmd-amber-a-100: $rmd-amber-a-100,
  rmd-amber-a-200: $rmd-amber-a-200,
  rmd-amber-a-400: $rmd-amber-a-400,
  rmd-amber-a-700: $rmd-amber-a-700,
  rmd-orange-50: $rmd-orange-50,
  rmd-orange-100: $rmd-orange-100,
  rmd-orange-200: $rmd-orange-200,
  rmd-orange-300: $rmd-orange-300,
  rmd-orange-400: $rmd-orange-400,
  rmd-orange-500: $rmd-orange-500,
  rmd-orange-600: $rmd-orange-600,
  rmd-orange-700: $rmd-orange-700,
  rmd-orange-800: $rmd-orange-800,
  rmd-orange-900: $rmd-orange-900,
  rmd-orange-a-100: $rmd-orange-a-100,
  rmd-orange-a-200: $rmd-orange-a-200,
  rmd-orange-a-400: $rmd-orange-a-400,
  rmd-orange-a-700: $rmd-orange-a-700,
  rmd-deep-orange-50: $rmd-deep-orange-50,
  rmd-deep-orange-100: $rmd-deep-orange-100,
  rmd-deep-orange-200: $rmd-deep-orange-200,
  rmd-deep-orange-300: $rmd-deep-orange-300,
  rmd-deep-orange-400: $rmd-deep-orange-400,
  rmd-deep-orange-500: $rmd-deep-orange-500,
  rmd-deep-orange-600: $rmd-deep-orange-600,
  rmd-deep-orange-700: $rmd-deep-orange-700,
  rmd-deep-orange-800: $rmd-deep-orange-800,
  rmd-deep-orange-900: $rmd-deep-orange-900,
  rmd-deep-orange-a-100: $rmd-deep-orange-a-100,
  rmd-deep-orange-a-200: $rmd-deep-orange-a-200,
  rmd-deep-orange-a-400: $rmd-deep-orange-a-400,
  rmd-deep-orange-a-700: $rmd-deep-orange-a-700,
  rmd-brown-50: $rmd-brown-50,
  rmd-brown-100: $rmd-brown-100,
  rmd-brown-200: $rmd-brown-200,
  rmd-brown-300: $rmd-brown-300,
  rmd-brown-400: $rmd-brown-400,
  rmd-brown-500: $rmd-brown-500,
  rmd-brown-600: $rmd-brown-600,
  rmd-brown-700: $rmd-brown-700,
  rmd-brown-800: $rmd-brown-800,
  rmd-brown-900: $rmd-brown-900,
  rmd-grey-50: $rmd-grey-50,
  rmd-grey-100: $rmd-grey-100,
  rmd-grey-200: $rmd-grey-200,
  rmd-grey-300: $rmd-grey-300,
  rmd-grey-400: $rmd-grey-400,
  rmd-grey-500: $rmd-grey-500,
  rmd-grey-600: $rmd-grey-600,
  rmd-grey-700: $rmd-grey-700,
  rmd-grey-800: $rmd-grey-800,
  rmd-grey-900: $rmd-grey-900,
  rmd-blue-grey-50: $rmd-blue-grey-50,
  rmd-blue-grey-100: $rmd-blue-grey-100,
  rmd-blue-grey-200: $rmd-blue-grey-200,
  rmd-blue-grey-300: $rmd-blue-grey-300,
  rmd-blue-grey-400: $rmd-blue-grey-400,
  rmd-blue-grey-500: $rmd-blue-grey-500,
  rmd-blue-grey-600: $rmd-blue-grey-600,
  rmd-blue-grey-700: $rmd-blue-grey-700,
  rmd-blue-grey-800: $rmd-blue-grey-800,
  rmd-blue-grey-900: $rmd-blue-grey-900,
  rmd-black-base: $rmd-black-base,
  rmd-white-base: $rmd-white-base,
);

Examples

Example Usage SCSS
@use 'react-md' as *;

.error-field {
  background: map-get($rmd-theme-color-map, rmd-red-50);
}
Used By

rmd-theme-primary-suffixes

List

The "primary" color suffix numbers that are available for use. This is really just created for the rmd-theme-get-swatch mixin, but might be useful since it also gets added to the scssVariables export.

$rmd-theme-primary-suffixes: 50 100 200 300 400 500 600 700 800 900;
Used By

rmd-theme-accent-suffixes

List

The "accent" color suffix numbers that are available for use. This is really just created for the rmd-theme-get-swatch mixin, but might be useful since it also gets added to the scssVariables export.

$rmd-theme-accent-suffixes: 100 200 400 700;
Used By

rmd-theme-colors

List

A list of all the available colors within material design. This is really just created for the rmd-theme-get-swatch mixin, but might be useful since it also gets added to the scssVariables export.

$rmd-theme-colors: (
  'red' 'pink' 'purple' 'deep-purple' 'indigo' 'blue' 'light-blue' 'cyan' 'teal'
    'green' 'light-green' 'lime' 'yellow' 'amber' 'orange' 'deep-orange' 'brown'
    'grey' 'blue-grey'
);
Used By

rmd-theme-no-css-variables-fallback

Boolean

Boolean if the main theme mixin should also apply the styles without the var(--rmd-theme-NAME) for browsers that don't support CSS Variables yet. This is disabled by default since it is mostly just IE11 at this point and create-react-app already is using a postcss plugin to do this automatically.

$rmd-theme-no-css-variables-fallback: true !default;
Used By

rmd-theme-define-colors-with-rgba

Boolean

Boolean if the light and dark theme text colors should be created using rgba instead of lighten for the light theme colors. It is generally recommended to keep this false since it is more in line with how the dark theme colors are created.

$rmd-theme-define-colors-with-rgba: false !default;

rmd-theme-dark-elevation

Since v2.1.0

Boolean

Boolean if the dark theme should gain different background colors based on the current elevation instead of a static surface color.

$rmd-theme-dark-elevation: true !default;
Used By

rmd-theme-light

Boolean

Boolean if the light theme default colors should be used. This means that the background-color, surface, and text colors will be updated to their light theme defaults. Setting this to false, will use their dark theme defaults.

$rmd-theme-light: true !default;
Used By

rmd-theme-primary

Color

The primary theme color to use for your app. This is normally one of the material design colors with a -500 suffix, but it can be any color.

$rmd-theme-primary: $rmd-purple-500 !default;
Used By

rmd-theme-on-primary

Color

The color to use when text should be displayed on the primary theme color. The default behavior is to test the primary color's contrast tone. If the color is considered 'dark', $rmd-white-base will be used. Otherwise $rmd-black-base will be used. If this isn't sufficient for your app, you can change this to be any color. Just make sure that it meets the contrast accessibility requirements (3.1:1 ratio for large (18px regular or 14px bold) and 4.5:1 for normal text).

$rmd-theme-on-primary: rmd-theme-best-contrast-color(
  $rmd-theme-primary
) !default;
Requires

rmd-theme-secondary

Color

The secondary theme color to use for your app. This is normally one of the material design colors with an accent suffix (-a-100 or -a-200 or -a-400 or -a-700, but it can really be any color.

$rmd-theme-secondary: $rmd-pink-a-400 !default;
Used By

rmd-theme-on-secondary

Color

The color to use when text should be displayed on the secondary theme color. The default behavior is to test the secondary color's contrast tone. If the color is considered 'dark', $rmd-white-base will be used. Otherwise $rmd-black-base will be used. If this isn't sufficient for your app, you can change this to be any color. Just make sure that it meets the contrast accessibility requirements (3.1:1 ratio for large (18px regular or 14px bold) and 4.5:1 for normal text).

$rmd-theme-on-secondary: rmd-theme-best-contrast-color(
  $rmd-theme-secondary
) !default;
Requires

rmd-theme-warning

Color

The warning theme color to use for your app. This isn't used by anything internally within react-md at this time, but it might be helpful to have this variable defined as more things get developed.

$rmd-theme-warning: $rmd-deep-orange-a-200 !default;

rmd-theme-on-warning

Color

The color to use when text should be displayed on the warning theme color. The default behavior is to test the warning color's contrast tone. If the color is considered 'dark', $rmd-white-base will be used. Otherwise $rmd-black-base will be used. If this isn't sufficient for your app, you can change this to be any color. Just make sure that it meets the contrast accessibility requirements (3.1:1 ratio for large (18px regular or 14px bold) and 4.5:1 for normal text).

$rmd-theme-on-warning: rmd-theme-best-contrast-color(
  $rmd-theme-warning
) !default;
Requires

rmd-theme-error

Color

The error theme color to use for your app.

$rmd-theme-error: $rmd-red-500 !default;
Used By

rmd-theme-on-error

Color

The color to use when text should be displayed on the warning theme color. The default behavior is to test the error color's contrast tone. If the color is considered 'dark', $rmd-white-base will be used. Otherwise $rmd-black-base will be used. If this isn't sufficient for your app, you can change this to be any color. Just make sure that it meets the contrast accessibility requirements (3.1:1 ratio for large (18px regular or 14px bold) and 4.5:1 for normal text).

$rmd-theme-on-error: rmd-theme-best-contrast-color($rmd-theme-error) !default;
Requires

rmd-theme-success

Color

The success theme color to use for your app. This isn't used by anything internally within react-md at this time, but it might be helpful to have this variable defined as more things get developed.

$rmd-theme-success: $rmd-green-a-700 !default;

rmd-theme-on-success

Color

The color to use when text should be displayed on the warning theme color. The default behavior is to test the success color's contrast tone. If the color is considered 'dark', $rmd-white-base will be used. Otherwise $rmd-black-base will be used. If this isn't sufficient for your app, you can change this to be any color. Just make sure that it meets the contrast accessibility requirements (3.1:1 ratio for large (18px regular or 14px bold) and 4.5:1 for normal text).

$rmd-theme-on-success: rmd-theme-best-contrast-color(
  $rmd-theme-success
) !default;
Requires

rmd-theme-light-background

Color

The light theme's background color.

$rmd-theme-light-background: $rmd-grey-50 !default;
Used By

rmd-theme-light-surface

Color

The light theme's surface color.

$rmd-theme-light-surface: $rmd-white-base !default;
Used By

rmd-theme-dark-background

Color

The dark theme's background color.

$rmd-theme-dark-background: if(
  $rmd-theme-dark-elevation,
  #121212,
  #303030
) !default;
Used By
Requires

rmd-theme-dark-surface

Color

The dark theme's surface color.

Note: If the $rmd-theme-dark-elevation variable is set to true, this value will not really be used.

$rmd-theme-dark-surface: $rmd-grey-800 !default;
Used By

rmd-theme-dark-class

Since v2.1.0

String

The class name that gets applied to the root <html> element if your app switches between dark and light themes. This is really only used for the changing the background color based on elevation when the app is in dark mode and the $rmd-theme-dark-elevation boolean is enabled.

If this is set to prefers-color-scheme, the dark elevation styles will only be applied when the @media (prefers-color-scheme: dark).

$rmd-theme-dark-class: '.dark-theme' !default;
Used By

rmd-theme-background

Color

The theme's background color.

$rmd-theme-background: if(
  $rmd-theme-light,
  $rmd-theme-light-background,
  $rmd-theme-dark-background
) !default;
Used By

rmd-theme-surface

Color

The theme's surface background color. This is the background color that will be used for any temporary 'material' (or surface)

Ex: Dialogs, Lists

$rmd-theme-surface: if(
  $rmd-theme-light,
  $rmd-theme-light-surface,
  $rmd-theme-dark-surface
) !default;
Used By

rmd-theme-on-surface

Color

The color to use when text should be displayed on a surface or temporary material. The default behavior is to test if the surface color's contrast tone. If the color is considered 'dark', $rd-white-base will be used. Otherwise $rmd-black-base will be used. If this isn't sufficient for your app, you can change this to be any color. Just make sure that it meets the contrast accessibility requirements (3.1:1 ratio for large (18px regular or 14px bold) and 4.5:1 for normal text).

$rmd-theme-on-surface: if(
  rmd-theme-contrast-tone($rmd-theme-surface) == 'dark',
  $rmd-black-base,
  $rmd-white-base
);

rmd-theme-light-primary-text-color

Color

The default light theme's primary text color. This default value changes between the result of rgba or lighten with $rmd-black-base.

$rmd-theme-light-primary-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.87),
  color.adjust($rmd-black-base, $lightness: 13%)
) !default;

rmd-theme-light-secondary-text-color

Color

The default light theme's secondary text color. This default value changes between the result of rgba or lighten with $rmd-black-base.

$rmd-theme-light-secondary-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.54),
  color.adjust($rmd-black-base, $lightness: 46%)
) !default;

rmd-theme-light-hint-text-color

Color

The default light theme's hint text color. This default value changes between the result of rgba or lighten with $rmd-black-base.

$rmd-theme-light-hint-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.34),
  color.adjust($rmd-black-base, $lightness: 66%)
) !default;

rmd-theme-light-disabled-text-color

Color

The default light theme's disabled text color. This default value changes between the result of rgba or lighten with $rmd-black-base.

$rmd-theme-light-disabled-text-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.38),
  color.adjust($rmd-black-base, $lightness: 62%)
) !default;

rmd-theme-light-icon-color

Color

The default light theme's icon text color. This default value changes between the result of rgba or lighten with $rmd-black-base.

$rmd-theme-light-icon-color: if(
  $rmd-theme-define-colors-with-rgba,
  rgba($rmd-black-base, 0.54),
  color.adjust($rmd-black-base, $lightness: 46%)
) !default;

rmd-theme-dark-primary-text-color

Color

The default dark theme's primary text color. This default value changes between the result of rgba or darken with $rmd-white-base.

$rmd-theme-dark-primary-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -15%
) !default;

rmd-theme-dark-secondary-text-color

Color

The default dark theme's secondary text color. This default value changes between the result of rgba or darken with $rmd-white-base.

$rmd-theme-dark-secondary-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -30%
) !default;

rmd-theme-dark-hint-text-color

Color

The default dark theme's hint text color. This default value changes between the result of rgba or darken with $rmd-white-base.

$rmd-theme-dark-hint-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -50%
) !default;

rmd-theme-dark-disabled-text-color

Color

The default dark theme's disabled text color. This default value changes between the result of rgba or darken with $rmd-white-base.

$rmd-theme-dark-disabled-text-color: color.adjust(
  $rmd-white-base,
  $lightness: -50%
) !default;

rmd-theme-dark-icon-color

Color

The default dark theme's icon text color. This default value changes between the result of rgba or darken with $rmd-white-base.

$rmd-theme-dark-icon-color: color.adjust(
  $rmd-white-base,
  $lightness: -30%
) !default;

rmd-theme-light-text-colors

Map

A Map of all the light theme text colors for quick lookups.

$rmd-theme-light-text-colors: (
  primary: $rmd-theme-light-primary-text-color,
  secondary: $rmd-theme-light-secondary-text-color,
  hint: $rmd-theme-light-hint-text-color,
  disabled: $rmd-theme-light-disabled-text-color,
  icon: $rmd-theme-light-icon-color,
);
Used By

rmd-theme-dark-text-colors

Map

A Map of all the light theme text colors for quick lookups.

$rmd-theme-dark-text-colors: (
  primary: $rmd-theme-dark-primary-text-color,
  secondary: $rmd-theme-dark-secondary-text-color,
  hint: $rmd-theme-dark-hint-text-color,
  disabled: $rmd-theme-dark-disabled-text-color,
  icon: $rmd-theme-dark-icon-color,
);
Used By

rmd-theme-primary-text-on-background-color

Color

The primary text color to use on the background "surface". This is not related to the $rmd-theme-primary variable.

$rmd-theme-primary-text-on-background-color: rmd-theme-text-color(
  primary,
  $rmd-theme-background
) !default;
See also

rmd-theme-secondary-text-on-background-color

Color

The secondary text color to use on the background "surface". This is not related to the $rmd-theme-secondary variable.

$rmd-theme-secondary-text-on-background-color: rmd-theme-text-color(
  secondary,
  $rmd-theme-background
) !default;
See also

rmd-theme-hint-text-on-background-color

Color

The hint text color to use on the background "surface".

$rmd-theme-hint-text-on-background-color: rmd-theme-text-color(
  hint,
  $rmd-theme-background
) !default;
See also

rmd-theme-disabled-text-on-background-color

Color

The disabled text color to use on the background "surface".

$rmd-theme-disabled-text-on-background-color: rmd-theme-text-color(
  disabled,
  $rmd-theme-background
) !default;
See also

rmd-theme-icon-on-background-color

Color

The icon color to use on the background "surface".

$rmd-theme-icon-on-background-color: rmd-theme-text-color(
  icon,
  $rmd-theme-background
) !default;
See also

rmd-theme-primary-text-on-light-color

Color

The primary text color to use on the light colored surface. This is not related to the $rmd-theme-primary variable.

$rmd-theme-primary-text-on-light-color: rmd-theme-text-color(
  primary,
  light
) !default;
See also
Used By

rmd-theme-secondary-text-on-light-color

Color

The secondary text color to use on the light colored surface. This is not related to the $rmd-theme-secondary variable.

$rmd-theme-secondary-text-on-light-color: rmd-theme-text-color(
  secondary,
  light
) !default;
See also
Used By

rmd-theme-hint-text-on-light-color

Color

The hint text color to use on the light colored surface.

$rmd-theme-hint-text-on-light-color: rmd-theme-text-color(hint, light) !default;
See also
Used By

rmd-theme-disabled-text-on-light-color

Color

The disabled text color to use on the light colored surface.

$rmd-theme-disabled-text-on-light-color: rmd-theme-text-color(
  disabled,
  light
) !default;
See also
Used By

rmd-theme-icon-on-light-color

Color

The icon color to use on the light colored surface.

$rmd-theme-icon-on-light-color: rmd-theme-text-color(icon, light) !default;
See also
Used By

rmd-theme-primary-text-on-dark-color

Color

The primary text color to use on the dark colored surface. This is not related to the $rmd-theme-primary variable.

$rmd-theme-primary-text-on-dark-color: rmd-theme-text-color(
  primary,
  dark
) !default;
See also
Used By

rmd-theme-secondary-text-on-dark-color

Color

The secondary text color to use on the dark colored surface. This is not related to the $rmd-theme-secondary variable.

$rmd-theme-secondary-text-on-dark-color: rmd-theme-text-color(
  secondary,
  dark
) !default;
See also
Used By

rmd-theme-hint-text-on-dark-color

Color

The hint text color to use on the dark colored surface.

$rmd-theme-hint-text-on-dark-color: rmd-theme-text-color(hint, dark) !default;
See also
Used By

rmd-theme-disabled-text-on-dark-color

Color

The disabled text color to use on the dark colored surface.

$rmd-theme-disabled-text-on-dark-color: rmd-theme-text-color(
  disabled,
  dark
) !default;
See also
Used By

rmd-theme-icon-on-dark-color

Color

The icon color to use on the dark colored surface.

$rmd-theme-icon-on-dark-color: rmd-theme-text-color(icon, dark) !default;
See also
Used By

rmd-theme-dark-elevation-colors

Since v2.1.0

Map

A map containing all the available dark theme elevation colors. This needs to contain a color for each elevation in the @react-md/elevation package (0 - 24).

$rmd-theme-dark-elevation-colors: (
  0: $rmd-theme-dark-background,
  1: #1f1f1f,
  2: #242424,
  3: #262626,
  4: #282828,
  5: #282828,
  6: #2c2c2c,
  7: #2c2c2c,
  8: #2f2f2f,
  9: #2f2f2f,
  10: #2f2f2f,
  11: #2f2f2f,
  12: #333,
  13: #333,
  14: #333,
  15: #333,
  16: #353535,
  17: #353535,
  18: #353535,
  19: #353535,
  20: #353535,
  21: #353535,
  22: #353535,
  23: #353535,
  24: #383838,
) !default;
Used By
Requires

rmd-theme-values

Map

A Map of all the theme values that can be used throughout the app. This is mainly created so that the specific rmd-theme--NAME classes can be created, but also for the rmd-theme function to get a specific color within your theme.

$rmd-theme-values: (
  background: $rmd-theme-background,
  primary: $rmd-theme-primary,
  on-primary: $rmd-theme-on-primary,
  secondary: $rmd-theme-secondary,
  on-secondary: $rmd-theme-on-secondary,
  surface: $rmd-theme-surface,
  on-surface: $rmd-theme-on-surface,
  warning: $rmd-theme-warning,
  on-warning: $rmd-theme-on-warning,
  error: $rmd-theme-error,
  on-error: $rmd-theme-on-error,
  success: $rmd-theme-success,
  on-success: $rmd-theme-on-success,
  text-primary-on-background: $rmd-theme-primary-text-on-background-color,
  text-secondary-on-background: $rmd-theme-secondary-text-on-background-color,
  text-hint-on-background: $rmd-theme-hint-text-on-background-color,
  text-disabled-on-background: $rmd-theme-disabled-text-on-background-color,
  text-icon-on-background: $rmd-theme-icon-on-background-color,
  light-background: $rmd-theme-light-background,
  light-surface: $rmd-theme-light-surface,
  dark-background: $rmd-theme-dark-background,
  dark-surface: $rmd-theme-dark-surface,
  text-primary-on-light: $rmd-theme-primary-text-on-light-color,
  text-secondary-on-light: $rmd-theme-secondary-text-on-light-color,
  text-hint-on-light: $rmd-theme-hint-text-on-light-color,
  text-disabled-on-light: $rmd-theme-disabled-text-on-light-color,
  text-icon-on-light: $rmd-theme-icon-on-light-color,
  text-primary-on-dark: $rmd-theme-primary-text-on-dark-color,
  text-secondary-on-dark: $rmd-theme-secondary-text-on-dark-color,
  text-hint-on-dark: $rmd-theme-hint-text-on-dark-color,
  text-disabled-on-dark: $rmd-theme-disabled-text-on-dark-color,
  text-icon-on-dark: $rmd-theme-icon-on-dark-color,
);
Used By

Mixins

rmd-theme-apply-rmd-var

mixin
Used By
Requires

rmd-theme-update-rmd-var

mixin
Used By
Requires

rmd-theme-create-root-theme

mixin
Used By
Requires

rmd-theme

mixin

Applies one of theme values to the provided property.

Parameters
NameDescriptionTypeDefault Value
$property

This is normally color or background-color, but any valid CSS property that accepts color values can be used.

String—
$theme-style

The type of theme style to use. This should be one of the $rmd-theme-values or a literal color value.

String—

Examples

Example Theme Application
@use 'react-md' as *;

html {
  @include rmd-theme(background-color, background);
  @include rmd-theme(color, text-primary-on-background);
}

.primary-bg {
  @include rmd-theme(background-color, primary);
}

.primary-text {
  @include rmd-theme(color, primary);
}
Used By
Requires

rmd-theme-update-var

mixin

This is an extremely simple mixin that will allow you to quickly set or update the value of a theme css variable with the new provided value.

Parameters
NameDescriptionTypeDefault Value
$theme-style

The react-md theme style to update. This should be one of the keys of $rmd-theme-values map.

String—
$value

The updated color value to apply.

Color—

Examples

Example Usage SCSS
@use 'react-md' as *;

$rmd-theme-primary: $rmd-blue-500;
$rmd-theme-secondary: $rmd-pink-a-200;

.some-class-with-different-themes {
  // no idea if these colors go together...
  @include rmd-theme-update-var(primary, $rmd-orange-500);
  @include rmd-theme-update-var(secondary, $rmd-brown-700);
}
Used By
Requires

rmd-theme-dark-elevation-styles

Since v2.5.4

mixin

Conditionally adds styles only when the $rmd-theme-dark-elevation variable is set to true. This will also work with the $rmd-theme-dark-class variable to either set the styles with a media query or only when the dark class has been enabled on a parent element.

Note: This will have a higher specificity than other variables so the colors might not be as expected. It is recommended to set a custom CSS variable instead of using this mixin.

Parameters
NameDescriptionTypeDefault Value
$css-modules

Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with :global and :local.

Booleanfalse
$selector

An optional selector to use if the $rmd-theme-dark-class is 'prefers-color-scheme'. Otherwise, setting this to a value other than '&' will be joined to the $rmd-theme-dark-class.

String'&'

Examples

Simple Example
@use 'react-md' as *;

.container {
  @include rmd-theme-dark-elevation-styles {
    background-color: red;
  }
}

@include rmd-theme-dark-elevation-styles($selector: null) {
  --container-bg: orange;
}

@include rmd-theme-dark-elevation-styles($selector: '.rmd-menu') {
  --container-bg: blue;
}

.container-2 {
  background-color: var(--container-bg, red);
}
Simple Prefers Color Scheme
@use 'react-md' as * with (
  $rmd-theme-dark-class: 'prefers-color-scheme'
);

.container {
  @include rmd-theme-dark-elevation-styles {
    background-color: red;
  }
}

@include rmd-theme-dark-elevation-styles($selector: ':root') {
  --container-bg: orange;
}

@include rmd-theme-dark-elevation-styles($selector: '.rmd-menu') {
  --container-bg: blue;
}

.container-2 {
  background-color: var(--container-bg, red);
}
CSS Module Example
@use 'react-md' as *;

.container {
  @include rmd-theme-dark-elevation-styles(true) {
    background-color: red;
  }
}

@include rmd-theme-dark-elevation-styles(true, null) {
  --container-bg: orange;
}

@include rmd-theme-dark-elevation-styles(true, '.rmd-menu') {
  --container-bg: blue;
}

.container-2 {
  background-color: var(--container-bg, red);
}
CSS Module Prefers Color Scheme Example
@use 'react-md' as * with (
  $rmd-theme-dark-class: 'prefers-color-scheme'
);

.container {
  @include rmd-theme-dark-elevation-styles(true) {
    background-color: red;
  }
}

@include rmd-theme-dark-elevation-styles(true, ':root') {
  --container-bg: orange;
}

@include rmd-theme-dark-elevation-styles(true, '.rmd-menu') {
  --container-bg: blue;
}

.container-2 {
  background-color: var(--container-bg, red);
}
Used By
Requires

rmd-theme-dark-elevation

Since v2.1.0

mixin

This mixin should normally be used with the rmd-elevation mixin to change the background color based on the current elevation in dark themes.

Note: This will have a higher specificity than other variables so the colors might not be as expected. It is recommended to set a custom CSS variable instead of using this mixin.

Parameters
NameDescriptionTypeDefault Value
$z-value

This should be a number between 0 and 24 representing the current elevation.

Number—
$css-modules

Boolean if this is being used within CSS Modules which will update the selector to work correctly by wrapping different parts with :global and :local.

Booleanfalse

Examples

All z-values
@use 'react-md' as *;

.container {
  @for $i from 0 to 24 {
    @include rmd-theme-dark-elevation($i);
  }
}
All z-values with CSS Modules
@use 'react-md' as *;

.container {
  @for $i from 0 to 24 {
    @include rmd-theme-dark-elevation($i, true);
  }
}
Requires

rmd-theme-light

mixin

This mixin can be used to apply the light theme by updating every color theme variable across all react-md packages.

Note: You'll still need to ensure that all the package's mixins were imported to get this to work.

Requires

rmd-theme-dark

mixin

This mixin can be used to apply the dark theme by updating every color theme variable across all react-md packages.

This is really great to use within a media query for browsers that now support the prefers-color-scheme so that if the user has the dark theme enabled, they'll automatically gain the dark theme while using your app as well.

Note: You'll still need to ensure that all the package's mixins were imported to get this to work.

Examples

Media Query Example
@use 'react-md' as *;

@media (prefers-color-scheme: dark) {
  :root {
    @include rmd-theme-dark;
  }
}
Requires

react-md-theme

mixin

Creates all the styles for a theme in react-md. This will start by creating CSS Variables for each theme variable and then create class names for each variable.

Examples

Normal SCSS Usage
@use 'react-md' as *;

// declare your theme variables
$rmd-theme-primary: $rmd-teal-500;
$rmd-theme-secondary: $rmd-pink-a-400;

@include react-md-theme;
Used By
Requires

Functions

rmd-theme-luminance

function

Calculate the luminance for a color.

Returns — Number

A number representing the luminance for the color.

Parameters
NameDescriptionTypeDefault Value
$color

The color to check

Color—
See also
Used By
Requires

rmd-theme-contrast

function

Gets the contrast between two colors.

Returns — Number

The contrast ratio between the background and foreground colors

Parameters
NameDescriptionTypeDefault Value
$back

The background color

Color—
$front

The foreground color that should be compared to the background color for contrast ratio.

Color—
Used By
Requires

rmd-theme-tone

function

Determines if a provided color is considered light or dark.

Returns — String

The string 'light' if the color is considered light, otherwise 'dark'.

Parameters
NameDescriptionTypeDefault Value
$color

The color to test.

Color—
$min-contrast

The minimum contrast that should be applied. The min contrast for normal text should be 4.5 while large or 14px bold text should be 3.1. See the link for contrasts for more information.

Number$rmd-theme-default-contrast-ratio
See also
Used By
Requires

rmd-theme-contrast-tone

function

Determines if the provided color should have a light or dark contrast using the luminance algorithm to maintain a required contrast ratio for accessibility.

Returns — String

The string 'dark' if the color is considered light, or 'light' if the color is considered dark.

Parameters
NameDescriptionTypeDefault Value
$color

The color to test.

Color—
$min-contrast

The minimum contrast that should be applied. The min contrast for normal text should be 4.5 while large or 14px bold text should be 3.1. See the link for contrasts for more information.

Number$rmd-theme-default-contrast-ratio
See also
Used By
Requires

rmd-theme-best-contrast-color

Since v2.4.0

function

Compares a color to a provided light and dark color. If the $rmd-theme-better-contrast-colors variable is true, the color with the bigger contrast ratio will be chosen. If the variable is false, the light color will be returned when it meets the minimum contrast ratio and fallback to the dark color.

Returns — Color

Either the `$light-color` or `$dark-color` depending on contrast ratios.

Parameters
NameDescriptionTypeDefault Value
$color

The color to check against

Color—
$light-color

A light color to try to use

Color$rmd-white-base
$dark-color

A dark color to try to use

Color$rmd-white-base
$enabled

Boolean if the new/better contrast ratios should be used. When this is false, it will return the lighter color as long as it meets the minimum contrast ratio even if the darker color would have a greater contrast ratio.

Boolean$rmd-theme-better-contrast-colors

Examples

Better Contrast Enabled
@use '@react-md/theme/dist/scss/color-palette' as colors;
@use 'react-md' as * with (
  $rmd-theme-better-contrast-colors: true,
  $rmd-theme-primary: colors.$rmd-teal-500,
  $rmd-theme-secondary: colors.$rmd-pink-a-200
);

// these are the rmd-defaults
// $rmd-theme-on-primary: rmd-theme-best-contrast-color($rmd-theme-primary) !default;
// $rmd-theme-on-secondary: rmd-theme-best-contrast-color($rmd-theme-secondary) !default;

.output {
  --p: #{$rmd-theme-primary};
  --s: #{$rmd-theme-secondary};

  // since black has a ~5.3 color ratio as compared to white with ~3.6
  --op: #{$rmd-theme-on-primary};
  --os: #{$rmd-theme-on-secondary};
}
Better Contrast Disabled
@use '@react-md/theme/dist/scss/color-palette' as colors;
@use 'react-md' as * with (
  $rmd-theme-better-contrast-colors: false,
  $rmd-theme-primary: colors.$rmd-teal-500,
  $rmd-theme-secondary: colors.$rmd-pink-a-200
);

// these are the rmd-defaults
// $rmd-theme-on-primary: rmd-theme-best-contrast-color($rmd-theme-primary) !default;
// $rmd-theme-on-secondary: rmd-theme-best-contrast-color($rmd-theme-secondary) !default;

.output {
  --p: #{$rmd-theme-primary};
  --s: #{$rmd-theme-secondary};

  // white has a ~3.6 color ratio so it _is_ contrast compliant with the
  // minimal contrast ratios even though black would be ~5.6
  --op: #{$rmd-theme-on-primary};
  --os: #{$rmd-theme-on-secondary};
}
Used By
Requires

rmd-theme-get-swatch

function

A theme utility function to convert a material design color to the same color but with a different swatch. If your app is not using material design colors, this utility function is useless but you will need to define fallback colors so compilation does not fail.

Returns — Color

the new color within the same color family with the provided swatch and optional accent.

Parameters
NameDescriptionTypeDefault Value
$color

The material design color to create a new color for with the provided swatch.

Color—
$swatch

The swatch to apply. This should be one of $rmd-theme-primary-suffixes or $rmd-theme-accent-suffixes if the $accent param is enabled.

Number—
$accent

Boolean if the swatch is an accent color instead of a primary color.

Booleanfalse
$fallback-color

The color to fallback to if the $color is not a valid material design color. Since this is null by default, the compilation will fail until a valid fallback is provided.

Colornull
$fallback-name

The name of a variable or global variable that should be set to automatically fix the compilation error.

Stringnull
Throws
  • Invalid fallback color:

Examples

Example Material Design Color Usage
@use 'react-md' as *;

.something {
  color: rmd-theme-get-swatch($rmd-theme-primary, 200);
}

.something-2 {
  color: rmd-theme-get-swatch($rmd-theme-primary, 200, true);
}
Example Non-Material Design Color Usage
@use 'react-md' as *;

$my-theme-color: #3498db;
.something-failed--fixed {
  color: rmd-theme-get-swatch(
    $my-theme-color,
    200,
    false,
    rgba($my-theme-color, 0.32)
  );
}
Used By
Requires

rmd-theme

function

A small utility function to get a color from the current theme. This is normally used along with the rmd-theme-var function so that both css variables and a fallback can be applied. If the provided style prop is a color or 'currentColor', the provided style prop will be returned instead.

You are most likely looking for the rmd-theme mixin and not the functions instead.

Returns — Color

the theme color.

Parameters
NameDescriptionTypeDefault Value
$theme-name

The theme style to get. This should be one of the keys from $rmd-theme-values.

String—
Used By
Requires

rmd-theme-var

function

A small utility function to get a color from the current theme as a css variable. This is normally used along with the rmd-theme function so that both css variables and a fallback can be applied.

You are most likely looking for the rmd-theme mixin and not the functions instead.

Returns — Color

the theme color.

Parameters
NameDescriptionTypeDefault Value
$theme-name

The theme style to get. This should be one of the keys from $rmd-theme-values.

String—
Used By
Requires

rmd-theme-get-var-value

function
Returns — Color|String|Number

The value from the theme map.

Parameters
NameDescriptionTypeDefault Value
$theme-name

The name of the theme to extract from the theme-map.

String—
$theme-map

The map containing the theme values.

Map—
$theme-group

The group/package that the theme exists in. This should be one of the react-md packages.

String—
Used By
Requires

rmd-theme-get-var

function

This function is used behind the scenes of react-md to help get css variables from different packages with some built in validation. This is generally used to create the helper function within each package to get the css var string.

Returns — String

a css var string to apply to a css property.

Parameters
NameDescriptionTypeDefault Value
$theme-name

The name of the theme to extract from the theme-map.

String—
$theme-map

The map containing the theme values.

Map—
$theme-group

The group/package that the theme exists in. This should be one of the react-md packages.

String—
$fallback

A fallback value to use for css variables if the theme variable has not been defined somehow. When this is set to null, it will automatically use the value from the theme-map instead.

Color|String|Numbernull

Examples

Example Usage SCSS
@use 'react-md' as *;

$rmd-example-theme-values: (
  background-color: #303030,
  color: $rmd-red-500,
);

@function rmd-example-get-var($theme-name) {
  @return rmd-theme-get-var($theme-name, $rmd-example-theme-values, example);
}

.example-class {
  color: rmd-example-get-var(color);
}
Used By
Requires

rmd-theme-text-color

function

This function is used to auto-generate "reasonable" defaults for the text colors based on a the background it is on. This will basically check if the provided color is considered light or dark, and choose a value from either the dark theme text colors or the light theme text colors so that it is still legible.

NOTE: This is not perfect since it only handles the min-contrast ration of 3:1 by default so you still might need to define your own overrides.

Returns — Color

The color from either the light or dark theme text colors maps.

Parameters
NameDescriptionTypeDefault Value
$style

This should be one of the keys for the text colors map.

String—
$color

This is either a color that will be checked for a contrast tone or one of 'light' | 'dark'.

Color|String—

Examples

Current Default Values
@use 'react-md' as *;

$variables: primary secondary hint disabled icon;
$themes: background light dark;

@each $theme in $themes {
  @each $variable in $variables {
    .#{$theme}-#{$variable} {
      // create the corresponding color. When it's the `background`, we'll check the current defined background theme
      // color so that it "works out of the box" (for most cases).
      color: rmd-theme-text-color(
        $variable,
        if($theme == background, $rmd-theme-background, $theme)
      );
    }
  }
}
Requires