Customizar temas no Trumbowyg, um editor WYSIWYG leve em JavaScript, permite adaptar sua aparência para atender a requisitos específicos de design. Este guia técnico aborda desde configurações básicas até técnicas avançadas para modificar a interface do usuário.

Importância da Personalização de Temas

Personalizar temas melhora a coesão da marca e a experiência do usuário ao:

• Harmonizar cores com o design do produto
• Otimizar layouts para diferentes dispositivos
• Refinar detalhes visuais e interativos
• Acommodar funcionalidades específicas

Estrutura de Arquivos para Temas

Para personalizar temas, familiarize-se com a estrutura de arquivos do Trumbowyg:

• Arquivo principle de estilos: localizado em src/ui/sass/trumbowyg.scss, contém variáveis e regras de tema
• Recursos de ícones: pasta src/ui/icons/ com ícones SVG para barra de ferramentas
• Estilos de plugins: diretório plugins/ com arquivos de estilo independentes para cada plugin

Personalização Básica de Tema

1. Configuração de Variáveis de Cores

No arquivo SCSS, ajuste as variáveis para alterar a paleta de cores do editor. Exemplo modificado:

$primary-light: #e8ecef;
$panel-background: darken($primary-light, 5%);
$edge-color: #c0d0d5;
$main-text: #2a2a2a;

2. Implementação de Tema Escuro

Ative um tema escuro adicionando uma classe CSS. Código revisado usando seletores alternativos:

const editorElement = document.querySelector('#content-editor');
editorElement.trumbowyg({
    btns: [
        ['viewHTML'],
        ['bold', 'italic']
    ]
});

// Aplicar modo escuro
document.querySelector('.trumbowyg-container').classList.add('dark-mode-theme');

Técnicas Avançadas de Customização

Ajuste botões da barra de ferramentas modificando variáveis como $btn-dimensions e $icon-sizes. O layout baseado em Flexbox permite adaptação responsiva através de media queries.

Pesronalização de Temas para Plugins

Cada plugin possui diretórios de estilo independentes. Por exemplo:

• Plugin de tabela: pasta plugins/table/ui/sass/ para estilos de edição de tabelas
• Plugin de cores: pasta plugins/colors/ui/sass/ para o seletor de cores de texto

Práticas Recomendadas

• Mantenha consistência com o design geral do sistema
• Priorize funcionalidades essenciais antes de refinamentos visuais
• Evite regras CSS complexas que possam impactar o desempenho

Caso Prático: Tema Corporativo

Para um tema empresarial, siga este fluxo:

1. Defina variáveis de cores alinhadas à identidade visual da empresa
2. Reorganize os botões da barra de ferramentas conforme necessidades de uso
3. Ajuste a responsividade para melhor visualização em dispositivos móveis