Jak utworzyć czarno-biały motyw za pomocą Angular Material Design?

Szukam prostego czarno-białego motywu do projektowania materiałów kątowych. Dokumentacja jest niewielka w tej dziedzinie.Jak utworzyć czarno-biały motyw za pomocą Angular Material Design?

Moim celem jest, aby to zrobić:

nieakcentowane kolor tła jest biały
nieakcentowane kolor tekstu jest czarny
Akcenty, błąd, ostrzeżenie kolory, które zostaną określone później

I miał nadzieję zrobić coś takiego w bloku konfiguracji:

$mdThemingProvider.theme('default') 
    .primaryPalette('black') 
    .backgroundPalette('white');

Ale białe i czarne palety nie istnieją.

Czy istnieje prosty sposób na zrobienie tego?

Źródło

2015-12-03 Andrew Eisenberg

Uważam, że trzeba będzie utworzyć palety zarówno dla czerni, jak i bieli. Na przykład:

angular.module('myApp', ['ngMaterial']) 
.config(function($mdThemingProvider) { 
    $mdThemingProvider.definePalette('black', { 
    '50': '000000', 
    '100': '000000', 
    '200': '000000', 
    '300': '000000', 
    '400': '000000', 
    '500': '000000', 
    '600': '000000', 
    '700': '000000', 
    '800': '000000', 
    '900': '000000', 
    'A100': '000000', 
    'A200': '000000', 
    'A400': '000000', 
    'A700': '000000', 
    'contrastDefaultColor': 'light' 
    }); 
    $mdThemingProvider.definePalette('white', { 
    '50': 'ffffff', 
    '100': 'ffffff', 
    '200': 'ffffff', 
    '300': 'ffffff', 
    '400': 'ffffff', 
    '500': 'ffffff', 
    '600': 'ffffff', 
    '700': 'ffffff', 
    '800': 'ffffff', 
    '900': 'ffffff', 
    'A100': 'ffffff', 
    'A200': 'ffffff', 
    'A400': 'ffffff', 
    'A700': 'ffffff', 
    'contrastDefaultColor': 'dark' 
    }); 

    $mdThemingProvider.theme('default') 
    .primaryPalette('black') 
    .backgroundPalette('white'); 
});

Naturalnie można odtworzyć resztę każdej palety. Należy zauważyć, że "contrastDefaultColor" jest ważne, aby uzyskać odpowiedni kolor tekstu w każdym przypadku. Ponadto niestety wydaje się, że trzeba zdefiniować całą paletę kolorów. Innym rozwiązaniem, jeśli nie chcesz, aby stworzyć zupełnie nowe palety jest rozszerzenie istniejącej palety:

var blackPalette = $mdThemingProvider.extendPalette('grey', { '500': '000000' }); 
$mdThemingProvider.definePalette('black', blackPalette);

https://material.angularjs.org/latest/Theming/03_configuring_a_theme

Źródło

2015-12-05 15:58:25

Dzięki. Z grubsza działa. Niektóre rzeczy wciąż nie jestem pewien. Co oznaczają klawisze tematyczne? Rozumiem, że odpowiadają one 'md-hue-1',' md-hue-2', ale to nie wyjaśnia, dlaczego te klucze są używane. Czy użycie 'md-hue-x' nie byłoby bardziej przejrzyste niż użycie' A700', etc? Ponadto wciąż nie jestem pewien, od których odcieni są używane. Jeśli moje css nigdy jawnie nie używa żadnych klas 'md-hue- *', które są używane? –

Przyciski md-hue- * służą do ustawiania odmian kolorów (takich jak A700), które mogą być używane przez dodanie klasy .md-hue- *, na przykład '.md-primary .md-hue-1' użyłaby odcień określony dla md-hue-1 w palecie podstawowej. Zgodnie z dokumentami domyślnymi ustawieniami barw są: 500, 300, 800, A100 dla podstawowego i warn (domyślnie 500, następnie md-hue-1 wynosi 300 itd.). Dodaje więc poziom niezależności, aby tę samą paletę można było zastosować w różny sposób, bez zmiany samej palety. –

To wszystko ma sens. Wydaje mi się, że ten interfejs API jest przeznaczony dla zaawansowanych użytkowników o złożonych przypadkach użycia przez podstawowego użytkownika. W każdym razie pomocna byłaby bardziej wyraźna dokumentacja zawierająca więcej przykładów. Oddam ci nagrodę, ale musisz poczekać 12 godzin. –

Kod ten może przyczynić się do korzystania kolory biały i czarny w MD-kolorach

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <!-- Angular Material style sheet --> 
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
     </head> 
     <body ng-app="BlankApp" ng-cloak md-colors="::{'background': 'grey-400'}"> 
      <!--Your HTML content here--> 
      <div flex layout="row"> 
       <div flex layout="row" layout-padding md-colors="{'color':'white-50', 'background': 'black-500'}" 
       layout-align="center center">White text and Black background</div> 
       <div flex layout="row" layout-padding md-colors="{'color':'black-50', 'background': 'white-500'}" 
       layout-align="center center">Black text and White background</div> 
      </div> 
      <!--Your HTML content here--> 
      <!-- Angular Material requires Angular.js Libraries --> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
      <!-- Angular Material Library --> 
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
      <!-- Your application bootstrap --> 
      <script> 
       /** 
       * You must include the dependency on 'ngMaterial' 
       */ 
       var app = angular.module('BlankApp', ['ngMaterial']); 
       app.config(function($mdThemingProvider) { 
        $mdThemingProvider.definePalette('black', { 
        '50': '000000', 
        '100': '000000', 
        '200': '000000', 
        '300': '000000', 
        '400': '000000', 
        '500': '000000', 
        '600': '000000', 
        '700': '000000', 
        '800': '000000', 
        '900': '000000', 
        'A100': '000000', 
        'A200': '000000', 
        'A400': '000000', 
        'A700': '000000', 
        'contrastDefaultColor': 'light' 
        }); 
        $mdThemingProvider.definePalette('white', { 
        '50': 'ffffff', 
        '100': 'ffffff', 
        '200': 'ffffff', 
        '300': 'ffffff', 
        '400': 'ffffff', 
        '500': 'ffffff', 
        '600': 'ffffff', 
        '700': 'ffffff', 
        '800': 'ffffff', 
        '900': 'ffffff', 
        'A100': 'ffffff', 
        'A200': 'ffffff', 
        'A400': 'ffffff', 
        'A700': 'ffffff', 
        'contrastDefaultColor': 'dark' 
        }); 

        $mdThemingProvider.theme('default') 
        .primaryPalette('black') 
        .backgroundPalette('white'); 
       }); 
      </script> 
     </body> 
    </html>

Źródło

2017-11-15 11:26:57

Jak utworzyć czarno-biały motyw za pomocą Angular Material Design?

Odpowiedz

Powiązane problemy