Как установить светлые цвета переднего плана для текста при использовании темной темы?

Я начинаю экспериментировать с Angular Material (точнее, с версией 0.8.3).
Из кода директив, связанных с темами, и исходного кода mdThemingProvider я обнаружил, что светлый передний план определен для темной темы. Но текст для текстовых абзацев остается темным, как и по умолчанию.
Даже с их примером кода для Input Demo есть проблема с цветом. Когда вы удаляете содержимое полей title и e-mail, текст-заполнитель поля ввода становится темно-серым, поэтому его почти не видно.
Я только начинаю просматривать их библиотеку. исходный код и не могу найти, как активировать изменение текста для абзацев и заполнителей для контраста.
Из краткого просмотра файла core/services/theming/theme.palette.js я нашел несколько палитр. свойства с префиксом имени contrast. Поэтому я думаю, что они определяют цвета, которые будут видны в темной теме. Но как активировать тему, чтобы использовать их?

Есть ли у кого-нибудь хорошее предложение архивировать читаемый контент в темной теме без большого количества дополнительного кода?
Если это не нарушает динамическую смену темы всего приложения (через вызов $mdThemeProvider из кода js), было бы замечательно .


angular-material
person Tarhan    schedule 12.04.2015    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Я тоже столкнулся с этим, и в моем случае я смог удовлетворительно решить (Angular Material v0.9.6), установив foregroundPalette темы:

myApp.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .dark()
    .foregroundPalette['3'] = 'rgba(255,0,0,1)';
})

Вы можете посмотреть демонстрацию здесь и сравнить ее с исходный передний план. Это, похоже, не задокументировано публично, поэтому это может быть внутренним для AM, и на самом деле это изменит передний план для вашего всего приложения, даже если вы используете несколько тем.

Есть четыре оттенка для переднего плана, и они имеют разные значения для светлых и темных тем. Вот значения по умолчанию (из источника AM):

var DARK_FOREGROUND = {
  name: 'dark',
  '1': 'rgba(0,0,0,0.87)',
  '2': 'rgba(0,0,0,0.54)',
  '3': 'rgba(0,0,0,0.26)',
  '4': 'rgba(0,0,0,0.12)'
};
var LIGHT_FOREGROUND = {
  name: 'light',
  '1': 'rgba(255,255,255,1.0)',
  '2': 'rgba(255,255,255,0.7)',
  '3': 'rgba(255,255,255,0.3)',
  '4': 'rgba(255,255,255,0.12)'
};

Что касается того, почему я выбрал 3, так получилось, что это оттенок, используемый md-input-container, который я нашел методом проб и ошибок.

person 0u812    schedule 29.05.2015
comment
Есть ли способ использовать светлый передний план с не темной палитрой? мой основной цвет зеленый, и я бы предпочел белый текст сверху вместо темного - person Amrit Kahlon; 17.09.2015
comment
Например, на панели инструментов мой основной цвет — зеленый, но я бы предпочел белый текст сверху, а не черный. Однако я хотел бы сохранить черный текст везде, где есть белый фон. Есть ли способ настроить это, не прибегая к css? - person Amrit Kahlon; 17.09.2015
comment
Блестящее разрешение. Большое спасибо. - person Lalit Narayan Mishra; 02.01.2016