dart paper-scaffold background-color = # 526E9C для заголовка. Где меняться?

Question

Я прочитал ответы на другие [очень] связанные вопросы, но я думал, что буду позиционировать его снова, так как могут быть сделаны обновления с полимерами.

Я могу изменить все цвета в [dart] paper-scaffold (core-scaffold) - меню и панель инструментов, но я не могу изменить цвет заголовка сверху. Это всегда background-color = # 526E9C. Единственный способ сделать это - изменить стиль основной панели инструментов в сгенерированном (с использованием pub build) index.html. И это одно изменение линии устанавливает цвет через весь заголовок через окно браузера (это то, что я хочу). Так что я могу пройти.

Когда я стиль:

core-toolbar{ 
background-color: #7A418D; 
color: #FFF; 
} 

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

Я пробовал тень, ядро-каркас :: shadowdom .. и т. Д. Я попытался изменить/src/core-scaffold.html - и многое другое, где появляется это распространенное значение # 526E9C.

На моем сайте (sekpa.org) отображается эта синяя (# 526E9C) половина.

Это просто ошибка? Если да, я был бы очень доволен этим знанием!
Благодаря
Стив

Answer 1

Там находятся два core-header-panel s внутри paper-scaffold.

Каждый core-header-panel содержит один core-toolbar.

Левый складной core-header-panel, а также его внутренний core-toolbar находятся в нормальном Light DOM, и именно поэтому вы можете изменить его цвет, указав css таким образом.

Однако, core-header-panel и core-toolbar находятся внутри paper-scaffold 's Shadow DOM. Для того, чтобы изменить цвет этой core-toolbar, что вам нужно сделать что-то вроде -

paper-scaffold::shadow core-toolbar { 
    background: #7A418D; 
    color: #fff; 
} 

Для получения дополнительной информации, пожалуйста, обратитесь к этому link.