Em Tema > Modo claro e escuro: | Opção | O que faz | |-------|-----------| | Modo do curso | Que modo vê quem faz o curso: Claro (o habitual, com o qual todos os temas começam), Escuro ou O do sistema, que segue a definição de claro ou escuro do seu dispositivo e muda em direto se essa definição mudar | | Seletor de modo no leitor | Acrescenta ao leitor um botão com um ícone de sol ou de lua para alternar entre claro e escuro. A escolha fica guardada no navegador de quem aprende, curso a curso, e tem prioridade sobre o modo do sistema | Enquanto o modo for Claro e o seletor estiver desligado, o leitor não muda em nada. Com o modo Escuro e sem seletor, o curso é «só escuro».

O seletor Modo apresentado (Claro / Escuro) do cabeçalho do editor do tema diz que modo está a editar e qual mostra a pré-visualização. Em Escuro, o editor avisa que está a editar o modo escuro, e o que alterar só vale em escuro. Cada campo de cada separador diz Igual ao claro ou Valor próprio em escuro. Se tiver valor próprio, pode voltar ao claro com Voltar a igual ao claro. Cada secção tem Toda a secção igual ao claro e conta quantos dos seus campos têm valor próprio em escuro. As cores da paleta podem ser retocadas em escuro, mas a variante nunca acrescenta nem retira cores da paleta. No editor de conteúdo, o mesmo seletor (Claro / Escuro) aparece quando o tema tem modos ou já tem variante escura. Só muda a forma como vê a lição enquanto edita; não altera o tema.

Modo claro e escuro — Creator

Q: Gerar a variante escura

Gerar variante escura cria um ponto de partida. Inverte o fundo e o texto, passa cada cor da paleta que o tema usa para a sua par de luminosidade invertida (exceto os véus das imagens e o que está sobre um preenchimento de cor, como os botões) e verifica o contraste. Ao terminar, o editor passa para Escuro para que a retoque, e um aviso, Contraste no modo escuro, diz se tudo atinge o contraste mínimo (4,5:1 para o texto e 3:1 para o resto) ou que campos não o atingem e com que contraste. Se o tema já tiver variante escura, é-lhe pedida confirmação antes: a nova variante substitui a anterior e o que retocou em escuro perde-se.

Q: CSS próprio e modo escuro

O CSS próprio não tem variante escura: o que escrever vale nos dois modos. Para o que só deva ver-se em escuro, use o seletor [data-color-scheme="dark"]: O leitor põe data-color-scheme («light» ou «dark», o modo que está a ser apresentado) na sua raiz quando o tema tem modos: quando o modo não é Claro ou o seletor está ligado. Sem modos, o atributo não existe.

Q: Acessibilidade

O painel Verificações mede o contraste nos dois modos; o que só falha em escuro leva a etiqueta No modo escuro. Com um tema «só escuro» (modo Escuro e sem seletor), só se mede o escuro e os seus problemas são os principais. Consulte Verificador de Acessibilidade.

Um tema, dois modos

Um conteúdo continua a usar um só tema. O que configura como de costume é o modo claro; o modo escuro é uma variante do mesmo tema que guarda apenas o que muda em escuro, em qualquer campo: cores, imagens do tema (como o logótipo da capa ou a imagem do cabeçalho de lição), sombras, bordas… Tudo o que a variante não diz, toma-o do modo claro, pelo que uma alteração no claro chega também ao escuro enquanto esse campo não tiver valor próprio em escuro.

Se o tema não tiver variante escura, em escuro aparece igual ao claro.

Escolher o modo

Em Tema > Modo claro e escuro:

Opção	O que faz
Modo do curso	Que modo vê quem faz o curso: Claro (o habitual, com o qual todos os temas começam), Escuro ou O do sistema, que segue a definição de claro ou escuro do seu dispositivo e muda em direto se essa definição mudar
Seletor de modo no leitor	Acrescenta ao leitor um botão com um ícone de sol ou de lua para alternar entre claro e escuro. A escolha fica guardada no navegador de quem aprende, curso a curso, e tem prioridade sobre o modo do sistema

Enquanto o modo for Claro e o seletor estiver desligado, o leitor não muda em nada. Com o modo Escuro e sem seletor, o curso é «só escuro».

Gerar a variante escura

Gerar variante escura cria um ponto de partida. Inverte o fundo e o texto, passa cada cor da paleta que o tema usa para a sua par de luminosidade invertida (exceto os véus das imagens e o que está sobre um preenchimento de cor, como os botões) e verifica o contraste.

Ao terminar, o editor passa para Escuro para que a retoque, e um aviso, Contraste no modo escuro, diz se tudo atinge o contraste mínimo (4,5:1 para o texto e 3:1 para o resto) ou que campos não o atingem e com que contraste.

Se o tema já tiver variante escura, é-lhe pedida confirmação antes: a nova variante substitui a anterior e o que retocou em escuro perde-se.

Editar o modo escuro

O seletor Modo apresentado (Claro / Escuro) do cabeçalho do editor do tema diz que modo está a editar e qual mostra a pré-visualização. Em Escuro, o editor avisa que está a editar o modo escuro, e o que alterar só vale em escuro.

Cada campo de cada separador diz Igual ao claro ou Valor próprio em escuro. Se tiver valor próprio, pode voltar ao claro com Voltar a igual ao claro.
Cada secção tem Toda a secção igual ao claro e conta quantos dos seus campos têm valor próprio em escuro.
As cores da paleta podem ser retocadas em escuro, mas a variante nunca acrescenta nem retira cores da paleta.
No editor de conteúdo, o mesmo seletor (Claro / Escuro) aparece quando o tema tem modos ou já tem variante escura. Só muda a forma como vê a lição enquanto edita; não altera o tema.

CSS próprio e modo escuro

O CSS próprio não tem variante escura: o que escrever vale nos dois modos. Para o que só deva ver-se em escuro, use o seletor [data-color-scheme="dark"]:

[data-color-scheme="dark"] .minha-classe {
  box-shadow: none;
}

O leitor põe data-color-scheme («light» ou «dark», o modo que está a ser apresentado) na sua raiz quando o tema tem modos: quando o modo não é Claro ou o seletor está ligado. Sem modos, o atributo não existe.

Onde se vê

O modo aplica-se da mesma forma na pré-visualização, na ligação de partilha e nas exportações web e SCORM. Os controlos nativos de vídeo e de áudio também seguem o modo apresentado.

O PDF sai sempre em claro.

Acessibilidade

O painel Verificações mede o contraste nos dois modos; o que só falha em escuro leva a etiqueta No modo escuro. Com um tema «só escuro» (modo Escuro e sem seletor), só se mede o escuro e os seus problemas são os principais. Consulte Verificador de Acessibilidade.

Exportar e importar

«Modo claro e escuro» é uma das secções ao exportar e importar um tema: leva o modo do curso e o seletor. A variante escura não tem caixa própria: viaja com cada secção que marcar.