Question

在paletta中，我可以看到对比度。如何选择对比色？

工作：

scss
mat-color($button-primary);

不工作

scss 
mat-color($button-primary, contrast(900));

在底部看它说对比。

scss
$mat-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  400: #ef5350,
  500: #f44336,
  600: #e53935,
  700: #d32f2f,
  800: #c62828,
  900: #b71c1c,
  A100: #ff8a80,
  A200: #ff5252,
  A400: #ff1744,
  A700: #d50000,
  contrast: (
    50: $black-87-opacity,
    100: $black-87-opacity,
    200: $black-87-opacity,
    300: $black-87-opacity,
    400: $black-87-opacity,
    500: white,
    600: white,
    700: white,
    800: $white-87-opacity,
    900: $white-87-opacity,
    A100: $black-87-opacity,
    A200: white,
    A400: white,
    A700: white,
  )
);

我如何使用对比度？

Answer 1

// search input
const searchInput = document.getElementById('js-search-input');

// Google Maps autocomplete
const autocomplete = new google.maps.places.Autocomplete(searchInput);

// Has user pressed the down key to navigate autocomplete options?
let hasDownBeenPressed = false;

// Listener outside to stop nested loop returning odd results
searchInput.addEventListener('keydown', (e) => {
    if (e.keyCode === 40) {
        hasDownBeenPressed = true;
    }
});

// GoogleMaps API custom eventlistener method
google.maps.event.addDomListener(searchInput, 'keydown', (e) => {

    // Maps API e.stopPropagation();
    e.cancelBubble = true;

    // If enter key, or tab key
    if (e.keyCode === 13 || e.keyCode === 9) {
        // If user isn't navigating using arrows and this hasn't ran yet
        if (!hasDownBeenPressed && !e.hasRanOnce) {
            google.maps.event.trigger(e.target, 'keydown', {
                keyCode: 40,
                hasRanOnce: true,
            });
        }
    }
});

 // Clear the input on focus, reset hasDownBeenPressed
searchInput.addEventListener('focus', () => {
    hasDownBeenPressed = false;
    searchInput.value = '';
});

// place_changed GoogleMaps listener when we do submit
google.maps.event.addListener(autocomplete, 'place_changed', function() {

    // Get the place info from the autocomplete Api
    const place = autocomplete.getPlace();

    //If we can find the place lets go to it
    if (typeof place.address_components !== 'undefined') {          
        // reset hasDownBeenPressed in case they don't unfocus
        hasDownBeenPressed = false;
    }

});

链接供参考： https://github.com/angular/material2/blob/2.0.0-beta.8/src/lib/core/theming/_theming.scss#L4

Answer 2

如果使用自定义主题，有时对于默认，较亮或较暗的预设获取对比度很有用。例如，在您的styles.scss中，您可以设置以下自定义主题：

$default-primary: mat-palette($mat-blue, 500, 300, 700);
$default-accent: mat-palette($mat-red, 500, 50, 900);
$default-warn: mat-palette($mat-deep-orange);        

$default-theme: mat-light-theme($default-primary, $default-accent, $default-warn);

@include my-component-theme($default-theme);

然后，在组件主题中，您可以执行以下操作：

@mixin my-component-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .test {
      color: mat-color($primary, default-contrast); // or 'lighter-contrast' or 'darker-contrast'
  }
}

Answer 3

解决方案是：

.test {
  color: mat-color($button-primary, 900-contrast)
}

材料2 paletta对比色

3 个答案: