Modo escuro Moodle 5.3: como ativar e o que quebra no seu tema

O modo escuro Moodle chegou ao tema Boost no Moodle LMS 5.3 LTS, lançado em 5 de outubro de 2026, mas chegou como recurso experimental e desligado por padrão. Isso muda a pergunta. Não é "como ativar", é "o meu tema, os meus plugins e o meu CSS aguentam?". Neste guia eu mostro como ligar, o que muda para aluno e professor, onde o contraste quebra e o checklist que uso antes de atualizar.

TL;DR

• O modo escuro Moodle 5.3 fica em Administração do site → Aparência → Temas → Boost → aba Experimental, na opção enablecolourmodes. Vem desligado.
• Quando ligado, cada usuário logado escolhe Claro, Escuro ou Sistema num seletor na barra superior. Visitante e convidado ficam sempre no padrão do site, que hoje é Claro.
• O Boost passou a usar variáveis CSS (--bs-body-bg, --bs-body-color, tokens --mds-*) que mudam com o modo. CSS fixo (background: #fff, color: #333) em tema filho ou plugin é o que quebra.
• A própria equipe do Moodle documentou que o azul padrão só atinge 2,56:1 de contraste sobre um card escuro, abaixo dos 3:1 que a WCAG 2.2 pede. A cor da sua marca pode ter o mesmo problema.
• Quem está no 4.5 pode ir direto para o 5.3 (o mínimo é o 4.4), mas precisa de PHP 8.3 e MariaDB 11.4 ou PostgreSQL 17. Teste em homologação antes.

O que é o modo escuro Moodle 5.3 e por que ele é experimental

O recurso nasceu de um pedido antigo da comunidade, registrado no tracker como MDL-68037, e foi entregue no 5.3 com o rótulo de experimental. Tecnicamente, ele usa a API de color modes do Bootstrap 5.3, a mesma versão do Bootstrap que o Boost adotou a partir do Moodle 5.0. O modo em uso é gravado no atributo data-bs-theme da tag <html>. Quando ele vale dark, as variáveis CSS do tema trocam de valor e a página inteira escurece.

Por que experimental? Porque o tema só controla o que é dele. Um plugin que pinta a própria tela com cores fixas continua claro, ou pior, fica com texto escuro sobre fundo escuro. A descrição oficial da opção diz isso com todas as letras: páginas de plugins que ainda não foram revisados podem aparecer com fundo claro ou com texto difícil de ler.

Por isso o Moodle HQ tomou duas decisões conservadoras que você precisa conhecer:

• A opção vem desligada. Nenhum site muda de cor sozinho depois do upgrade.
• O padrão do site é Claro enquanto o recurso for experimental. Seguir o sistema operacional jogaria no escuro todo mundo cujo celular já está no escuro, inclusive visitantes que nem têm o seletor para voltar. O código do Boost cita o MDL-89379 como a tarefa que vai devolver o padrão "Sistema" quando todos os componentes estiverem convertidos.

Na prática, o modo escuro Moodle hoje é uma escolha do usuário logado, liberada por uma decisão do administrador. Essa decisão é o assunto deste post.

O que muda para alunos e professores

Para quem usa o AVA todo dia, a mudança é pequena na tela e grande no conforto. Depois que o administrador liga o recurso, aparece na barra de navegação um botão com ícone de sol, lua ou meio círculo. Ele abre um menu com três opções:

Opção	O que faz	Para quem faz sentido
Claro	Mantém o visual de sempre	Quem projeta a tela em sala, quem imprime muito
Escuro	Fundo escuro, texto claro	Quem estuda à noite, quem tem fotofobia ou enxaqueca
Sistema	Segue o tema do celular ou do computador	Quem já usa modo escuro no dispositivo

O que o aluno percebe

A escolha fica salva como preferência do usuário. Ela vale em qualquer computador em que ele fizer login. O Moodle também grava um cookie chamado theme_boost_colourmode, para que a tela de login apareça no mesmo modo depois que ele sair. Sem esse cookie, quem escolheu escuro veria um clarão branco toda vez que deslogasse.

O editor TinyMCE acompanha o modo da página. Um detalhe: se o modo for trocado com o editor aberto, o editor só muda de cor quando a página é recarregada.

O que o professor precisa saber

O ponto sensível para o professor é o conteúdo que ele mesmo criou. Rótulos, páginas e descrições de atividade montados com cor fixa no editor (texto preto, caixa de fundo amarelo-claro, tabela com fundo branco) não seguem o modo. O texto preto que o professor escolheu continua preto. O fundo da página fica escuro. Resultado: texto ilegível.

Imagens com fundo transparente e traço preto, como logotipos, diagramas e fórmulas exportadas, somem no fundo escuro pelo mesmo motivo.

Nos ambientes que mantemos, esse é o chamado de suporte que mais aparece quando alguém testa o modo escuro Moodle pela primeira vez. O culpado quase nunca é o Moodle. É o HTML colado do Word anos atrás.

Acessibilidade: contraste WCAG no modo escuro Moodle 5.3

Modo escuro não é automaticamente mais acessível. Ele alivia quem sofre com luz forte, mas algumas pessoas leem pior texto claro sobre fundo escuro. O que importa, nos dois modos, é o contraste.

A WCAG (Web Content Accessibility Guidelines, a norma do W3C para acessibilidade na web) define os limites que você deve conferir:

• 1.4.3 Contraste mínimo: texto normal precisa de 4,5:1 contra o fundo; texto grande, de 3:1.
• 1.4.11 Contraste de elementos não textuais: bordas de campos, ícones e controles precisam de 3:1.
• 2.4.11 Foco visível (WCAG 2.2): o contorno de foco precisa aparecer contra o que está atrás dele.

O que mais me chamou atenção ao ler o código do 5.3 é que a própria equipe do Moodle fez essa conta e deixou anotado no arquivo dark.scss do Boost. Alguns números de lá:

• O azul padrão do Moodle chega a só 2,56:1 sobre um card escuro e 2,15:1 num card com hover. Por isso as bordas de foco foram clareadas no modo escuro.
• O cinza usado em placeholders atingia 3,8:1. Foi levantado para passar dos 4,5:1.
• As cores de link e de texto colorido do Bootstrap ficavam "logo abaixo do AA" no escuro e passaram a ser calculadas de outra forma.
• O botão de "Modo de edição" foi refeito com o componente do design system justamente para cumprir a 1.4.11.

A lição para a sua instituição: se o Boost precisou corrigir o próprio azul, a sua cor de marca também pode reprovar. Vermelho, azul-marinho e verde-escuro institucionais costumam ficar ótimos sobre branco e péssimos sobre cinza-escuro. Teste a cor da marca contra o fundo escuro com uma ferramenta de contraste antes de liberar o recurso.

Para instituição pública ou que atende aluno com deficiência, isso não é estética. A Lei Brasileira de Inclusão (Lei 13.146/2015) exige acessibilidade nos sítios mantidos por empresas e órgãos. Liberar um modo escuro Moodle que reprova em contraste cria um problema que não existia.

Impacto em temas personalizados e temas filhos do Boost

Aqui está o custo real da novidade. A maior parte das instituições não usa o Boost puro. Usa um tema filho (um tema que herda do Boost e muda logo, cores e alguns blocos) ou tem SCSS colado nos campos de configuração do Boost. As notas de upgrade do 5.3 listam o que mudou para esses temas.

1. Cinzas e cores de corpo viraram variáveis CSS

As folhas de estilo do Boost passaram a usar var(--bs-gray-*), var(--bs-white), var(--bs-body-bg) e var(--bs-body-color) em vez das variáveis SCSS equivalentes. No modo claro os valores são os mesmos de antes. A diferença é que agora eles mudam no escuro.

Com o modo escuro Moodle ligado, o seu tema filho que escreve $gray-200 direto numa regra continua compilando, mas fica preso no valor claro.

2. Cards, alertas e diálogos mudaram de padrão

$card-bg, $card-border-color e as variáveis $state-*-bg e $state-*-border agora apontam para variáveis CSS. O mesmo vale para as variáveis dos diálogos antigos (YUI), como $dialogue-base-bg. Se o seu preset sobrescreve alguma delas com uma cor literal, essa cor não muda no escuro. A recomendação oficial é sobrescrever a variável CSS diretamente.

3. Navbar própria precisa renderizar o seletor

Tema filho que desenha a própria barra de navegação não ganha o seletor de modo automaticamente. É preciso chamar theme_boost\colour_mode::render_menu() no template. Sem isso, o administrador liga o recurso e ninguém encontra o botão.

4. A navegação principal mudou de marcação

No 5.3 a navegação principal passou a ser um componente React. Os itens viraram a.mds-nav-pill em vez de a.nav-link.active. Quem estiliza .primary-navigation .nav-link no tema precisa atualizar os seletores, com ou sem modo escuro.

5. A fonte padrão mudou

O Boost trocou a pilha de fontes do sistema pela Noto Sans, hospedada no próprio tema. Se o seu tema filho define $font-family-sans-serif, nada muda. Se dependia da fonte do sistema, o visual muda.

Logos e imagens da marca

O 5.3 não criou um campo de logo próprio para o modo escuro Moodle 5.3. O logo continua sendo o mesmo arquivo. Logo com fundo transparente e letra escura desaparece na barra escura. As saídas são três: usar uma versão com fundo sólido, usar um logo claro que funcione nos dois modos, ou trocar o arquivo por CSS no seletor [data-bs-theme="dark"]. Ícones SVG inseridos com <img> também não herdam a cor do texto. Esse ponto está nas notas oficiais.

Como corrigir o CSS fixo

A regra é simples e está documentada pelo próprio Moodle: pegue a cor das variáveis do tema e só use cor fixa quando ela tiver de ser diferente em cada modo.

/* Antes: quebra no modo escuro */
.bloco-aviso { background: #ffffff; color: #333333; }

/* Depois: segue o modo */
.bloco-aviso {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
}

/* Quando a cor precisa mudar só no escuro */
[data-bs-theme="dark"] .faixa-institucional {
  background: #1d3557;
}

O alerta mais útil das notas de upgrade é este: cor fixa é problema quando ela é metade de um par. Fundo claro fixo atrás de texto que segue o modo, ou texto escuro fixo sobre superfície que segue o modo. Se a cor precisa ficar (um selo verde de "aprovado", por exemplo), corrija também a outra metade.

Como ativar o modo escuro Moodle 5.3, passo a passo

Faça isto primeiro em homologação, nunca direto em produção.

1. Entre como administrador e vá em Administração do site → Aparência → Temas → Boost. Se o seu tema é filho do Boost, as opções continuam nas configurações do Boost.
2. Abra a aba Experimental (Experimental settings), que é nova no 5.3.
3. Marque Ativar modos de cor (Enable colour modes, chave theme_boost/enablecolourmodes).
4. Escolha o Modo de cor padrão (Default colour mode). Recomendo deixar Claro por enquanto, que é o padrão oficial. Esse campo só aparece com a opção anterior marcada.
5. Salve e limpe os caches em Desenvolvimento → Limpar todos os caches, ou rode php admin/cli/purge_caches.php no servidor.
6. Faça login com um usuário de teste de cada perfil (aluno, professor, coordenador) e troque para Escuro no seletor da barra superior.
7. Repita as páginas do checklist da próxima seção em claro e em escuro.

Se o recurso causar problema, desmarque a opção. Todo mundo volta para o claro na hora. As preferências ficam guardadas e reaparecem se você religar.

Se a sua equipe roda testes automatizados com Behat, o 5.3 trouxe a opção --colourmode=dark no admin/tool/behat/cli/init.php, que roda a suíte inteira no escuro. Para quem tem tema próprio, é o jeito mais barato de achar regressão.

Checklist de testes antes de atualizar para o 5.3

Este é o roteiro que aplicamos antes de liberar o modo escuro Moodle para uma instituição. Ele cabe numa tarde em homologação para um AVA com tema filho simples. Tema muito customizado leva mais.

Infraestrutura

• PHP 8.3 ou 8.4, 64 bits, com a extensão sodium e max_input_vars em 5000 ou mais.
• Banco no mínimo MariaDB 11.4, PostgreSQL 17 ou MySQL 8.4.
• Backup completo do banco e do moodledata, testado com restauração.

Tema e CSS

• Procurar cores fixas no tema filho e no SCSS bruto: grep -rnE "#fff|#ffffff|white|#000|color: ?#" theme/seutema/
• Conferir se o preset sobrescreve $card-bg, $state-* ou $dialogue-* com cor literal.
• Conferir se a navbar própria chama render_menu().
• Revisar seletores .primary-navigation .nav-link e .moremenu.
• Testar o logo e o favicon sobre a barra escura.
• Medir o contraste da cor da marca contra o fundo escuro (texto 4,5:1, borda e ícone 3:1).

Páginas que testamos nos dois modos

• Login, painel e página inicial do curso.
• Questionário em andamento e revisão com feedback colorido.
• Livro de notas, relatório de conclusão e calendário.
• Editor TinyMCE com conteúdo antigo do professor.
• Cada plugin de terceiros instalado (certificado, presença, gamificação, pagamento).
• App Moodle, se a instituição usa, para conferir se nada do tema web vazou para o app.

Quando NÃO ligar o modo escuro agora

• Quando a instituição tem plugin crítico de terceiros que ainda não foi revisado pelo autor.
• Quando há anos de conteúdo com cor fixa no editor e ninguém para revisar.
• Quando o tema filho é antigo e ninguém da equipe sabe mais quem o fez.
• Quando o upgrade para o 5.3 ainda nem foi feito. Faça o upgrade primeiro, estabilize, e só depois teste o modo escuro Moodle com calma. Misturar as duas mudanças torna impossível saber o que quebrou.

Ligar o escuro é opcional. O upgrade não é. As mudanças de variável e de navegação afetam o seu tema mesmo com a opção desligada.

O que muda para quem está no 4.5, 5.1 ou 5.2

O caminho depende da versão de partida. As datas abaixo são as do calendário oficial de versões do Moodle.

Versão atual	Fim das correções de segurança	Pode ir direto para o 5.3?	Atenção
4.5 LTS	4 de outubro de 2027	Sim (mínimo é 4.4)	PHP 8.3, banco novo, pasta public/, tema Classic removido
5.1	19 de abril de 2027	Sim	Banco: MariaDB 11.4 e PostgreSQL 17
5.2	4 de outubro de 2027	Sim	Revisar tema pelas notas do 5.3
5.3 LTS	1º de outubro de 2029	—	Suporte geral até 4 de outubro de 2027

Quem está no 4.5 tem o salto maior. O upgrade herda tudo que mudou do 5.0 ao 5.2, inclusive o Bootstrap 5 e a nova estrutura de diretórios. Já detalhei esse caminho no checklist real de atualização do Moodle 4.5 para o 5. A troca de PHP tem armadilhas próprias, que estão no guia sobre como atualizar o PHP do Moodle sem quebrar plugins.

Um aviso para quem ainda usa o tema Classic: ele saiu do núcleo no 5.3. No upgrade, parte das configurações migra para o Boost e o Classic é desinstalado, a menos que você instale o Classic manualmente antes. Para quem quer usar o modo escuro Moodle 5.3, isso não é perda: ele só existe no Boost e nos temas filhos dele.

Quem está no 5.1 ou 5.2 tem um upgrade mais leve. O trabalho fica concentrado no tema e no banco. Se a sua dúvida ainda é qual plataforma manter no longo prazo, o comparativo entre Moodle, Canvas e Google Classroom ajuda a colocar o custo desse tipo de manutenção na conta.

Quanto custa adaptar o tema para o modo escuro Moodle 5.3

Não existe preço de tabela, porque o custo depende do tamanho da dívida de CSS. O que dá para dizer com honestidade é onde o esforço se concentra:

• Boost puro com cor de marca e logo: ajuste de contraste da cor e um logo alternativo. Trabalho pequeno.
• Tema filho com SCSS próprio: varredura de cores fixas, troca por variáveis, teste dos componentes. Trabalho médio.
• Tema comprado de terceiros: depende de o autor lançar versão compatível com o 5.3. Às vezes a resposta certa é esperar ou migrar para um tema filho do Boost.
• Plugins locais desenvolvidos sob medida: cada styles.css precisa da mesma revisão. Esse é o item que mais surpreende no orçamento.

O custo de não fazer também existe. Um aluno que liga o modo escuro Moodle e encontra o questionário ilegível abre chamado, ou desiste da atividade no meio.

Como a Agathas Web resolve isso

Moodle é o centro do que fazemos há mais de 15 anos, e a equipe tem a Moodle Developer Certification pela Moodle Academy. No serviço de Moodle da Agathas Web, a preparação para o modo escuro Moodle entra como parte do upgrade para o 5.3, não como projeto separado.

O que está incluso na prática:

1. Diagnóstico do ambiente atual: versão, PHP, banco, tema, plugins de terceiros e quanto CSS fixo existe. Você recebe um relatório com o que quebra e o que não quebra.
2. Homologação com cópia da produção: o upgrade roda primeiro numa réplica, com o checklist deste post aplicado nos dois modos de cor.
3. Adaptação do tema filho: troca de cores fixas por variáveis, contraste da cor da marca medido contra a WCAG, logo alternativo e seletor de modo na navbar própria.
4. Revisão dos plugins locais que desenvolvemos ou que a instituição já tinha.
5. Upgrade em produção com janela combinada, backup verificado e plano de volta.
6. Sustentação depois: atualizações de segurança e acompanhamento na hospedagem otimizada para Moodle, com suporte em português pelo WhatsApp.

Para contratar, o caminho é pedir um diagnóstico na página de serviços de Moodle. Com o relatório em mãos, você decide se liga o modo escuro Moodle agora, depois do upgrade ou só quando o recurso sair do experimental.

Conclusão

O modo escuro Moodle 5.3 é uma boa notícia para quem estuda à noite e um teste de qualidade para o tema da sua instituição. Ele vem desligado, o padrão é claro e cada usuário escolhe o próprio modo. A parte trabalhosa está no CSS fixo, no logo e na cor da marca que não passa no contraste.

A ordem que recomendo é: atualizar para o 5.3 em homologação, revisar tema e plugins, medir contraste e só então ligar o recurso para um grupo piloto. Se quiser que a gente faça esse caminho junto com a sua equipe, comece pelo diagnóstico no serviço de Moodle da Agathas Web.