4

Estou estudando algumas formas mais eficientes para a estilização de um aplicativo utilizando temas. A minha ideia seria usar algo assim:

<div class='tema-1'>
    <button class='btn btn-primary'>botão principal</button>
</div>

.tema-1 .btn-primary {
    background-color: green;
}

O problema surge quando tento utilizar hierarquia entre os temas:

<div class='tema-2'>
    <button class='btn btn-primary'>botão principal tema 2</button>

    <div class='tema-1'>
        <button class='btn btn-primary'>botão principal tema 1</button>
    </div>
</div>

.tema-1 {
    background-color: green;
}

.tema-2 {
    background-color: red;
}

No exemplo, o botão pertencente ao tema-1 (que está abaixo do tema-2) continua recebendo os estilos do tema-2. Entendo que os estilos do tema-2 possuem prioridade sobre os do tema-1 devido a ordem que são inseridos no css, mas a minha pergunta é, há alguma forma de chegar ao comportamento esperado utilizando CSS? E utilizando JS?

6
  • O tema-1 é suposto estar dentro dotema-2 no HTML? Não me parece correcto pela sua hierarquia...
    – Chun
    Commented 29/06/2015 às 20:41
  • Isto não deveria estar dentro de uma função if/else em PHP ou Javascript? Porque pelo que estou a perceber o queres fazer aqui é: se a opção do tema-1 estiver selecionada - correr o código HTML <div class='tema-1'></div> ou se a opção tema-2 estiver selecionada - <div class='tema-2'></div>
    – Chun
    Commented 29/06/2015 às 20:48
  • A intencão é que cada tema sobrescreva o anterior respeitando a ordem no html. Os nomes numerados são apenas exemplos.
    – Oeslei
    Commented 29/06/2015 às 20:58
  • Dá uma olhada na na minha resposta @Oeslei . Se ela te ajudou a resolver o teu problema, por favor considera marcá-la como correta. =)
    – Chun
    Commented 2/07/2015 às 15:53
  • @Chun Coloquei na pergunta apenas um exemplo simples. A mudança não é apenas para o background. Eu gostaria de conseguir aplicar os estilos aos elementos conforme o tema mais próximo definido. Tome como exemplo o RelativeLayout e o LinearLayout do android com uma estrutura do tipo LinearLayout > RelativeLayout > LinearLayout.
    – Oeslei
    Commented 2/07/2015 às 17:10

5 Respostas 5

1

O que você tem que definir primeiro são padrões.

Qual será o padrão do botão, por exemplo ?

Tamanho
Padding
Borda Arredondada

O que vai mudar no botão ?

Cor
Cor da Borda
Cor da Letra

Então,

// Padrão

.btn{
   width: 200px;
   height: 40px;
   border-radius: 5px;
   font-family: "Verdana";
   font-size: 14px;
   padding: 8px;
   box-sizing: border-box;
}

// Mudanças
.btn .red{
   background-color: red;
   color: white;
   border: 1px solid red;
}
1

O @Chun está certo quando disse que sua "hierarquia" HTML não deveria ser implementada assim. Todavia resolvendo o "problema", você pode incluir "prioridades" nos seus seletores, exemplo:

.tema-1 .btn, .tema-2 .tema-1 .btn{
    background-color:#975167;
    border-color:#774137;
}

.tema-2 .btn, .tema-1 .tema-2 .btn{
    background-color:#36c1ab;
    border-color:#26819b;
}

O seletor .tema-2 .tema-1 .btn tem predominância sobre o .tema-2 .btn, mesmo estando antes. Assim como o .tema-1 .tema-2 .btn sobre o .tema-2 .btn. Se você tiver 10 temas terá que fazer isso pra todos em cada regra:

.tema-1  .btn, 
.tema-2  .tema-1 .btn,
.tema-3  .tema-1 .btn,
.tema-4  .tema-1 .btn,
.tema-5  .tema-1 .btn,
.tema-6  .tema-1 .btn,
.tema-7  .tema-1 .btn,
.tema-8  .tema-1 .btn,
.tema-9  .tema-1 .btn,
.tema-10 .tema-1 .btn,{
    background-color:#975167;
    border-color:#774137;
}

.tema-1  .controle, 
.tema-2  .tema-1 .controle,
.tema-3  .tema-1 .controle,
.tema-4  .tema-1 .controle,
.tema-5  .tema-1 .controle,
.tema-6  .tema-1 .controle,
.tema-7  .tema-1 .controle,
.tema-8  .tema-1 .controle,
.tema-9  .tema-1 .controle,
.tema-10 .tema-1 .controle,{
    /* Regras */
}

.tema-1  .alerta, 
.tema-2  .tema-1 .alerta,
.tema-3  .tema-1 .alerta,
.tema-4  .tema-1 .alerta,
.tema-5  .tema-1 .alerta,
.tema-6  .tema-1 .alerta,
.tema-7  .tema-1 .alerta,
.tema-8  .tema-1 .alerta,
.tema-9  .tema-1 .alerta,
.tema-10 .tema-1 .alerta,{
    background-color:#975167;
    border-color:#774137;
}

Isso ficaria ruim de gerenciar, então você poderia usar um pre-processador, como LESS ou SASS. E fazer algo como:

.tema-1, 
.tema-2  .tema-1,
.tema-3  .tema-1,
.tema-4  .tema-1,
.tema-5  .tema-1,
.tema-6  .tema-1,
.tema-7  .tema-1,
.tema-8  .tema-1,
.tema-9  .tema-1,
.tema-10 .tema-1{

    .btn { 
        /* Regras */ 
    }

    .controle { 
        /* Regras */ 
    }

    .alerta { 
        /* Regras */ 
    }
}

Exemplo funcional:

.box{
    background-color:rgba(0,0,0,0.08);
    padding:5px;
}
.box .box{margin: 10px 0 0 10px;}
.btn{
    border: 1px solid #CF8A5B;
    border-radius:2px;
    background-color: #DFAA5B;
    color:#333;
    padding:3px;
    margin:5px 0;
    cursor:pointer;
}

.tema-1 .btn, .tema-2 .tema-1 .btn{
    background-color:#975167;
    border-color:#774137;
}

.tema-2 .btn, .tema-1 .tema-2 .btn{
    background-color:#36c1ab;
    border-color:#26819b;
}
<div class="box">
    Padrão: <button class="btn">Botão</button>
    <div class="box tema-2">
        Tema 2:
        <button class="btn">Botão</button>
        <div class="box tema-1">
            Tema 1:
            <button class="btn">Botão</button>
            <div class="box tema-2">
                Tema 2:
                <button class="btn">Botão</button>
            </div>
        </div>
    </div>
</div>

0

Para que a sua configuração nao seja sobrescrita, coloque !important

.tema-1 {
    background-color: green !important;
}

.tema-2 {
    background-color: red;
}
1
  • Os problemas gerados pelo !important são os que mais quero evitar, e se eu quisesse que o tema-1 tivesse prioridade bastava declará-lo por último no CSS.
    – Oeslei
    Commented 29/06/2015 às 21:03
0

Como mencionei no meu comentário acima referido na tua pergunta, não me parece que a hierarquia do teu HTML deveria ser implementada dessa maneira. Pois pelo que eu percebi, o que estás a tentar fazer aqui, é criar é um código que mude a cor do background, ou seja que mude a cor do tema conforme uma opção seja selecionada pelo usuário, como por exemplo:

<!-- Se a opção 2 estiver selecionada - Corre este código -->
<div class='tema-2'>
    <button class='btn btn-primary'>botão principal tema 2</button>
</div>

<!-- Mas se a opção 1 estiver selecionada - Então corre este código -->
<div class='tema-1'>
    <button class='btn btn-primary'>botão principal tema 1</button>
</div>

Por isso é que eu disse no comentário acima que a sua hierarquia deveria estar desta maneira e não 1 dentro do outro.

Se estiveres à procura de criar uma opção de troca de tema dependendo do tema que o usuário escolher, podes fazer isso como no exemplo deste código abaixo:

Tens aqui também um exemplo online de como ele irá funcionar num site real: http://jsfiddle.net/6jm3t2au/

$('select[id$=-status][id^=id_item-]').change(function (){
    var color = $(this).find('option:selected').val();
    
    $(".tema").removeClass('t1 t2 t3').addClass('t' + $(this).find('option:selected').val());
}).change();
.tema    { background-color:white; }
.tema.t1 { background-color:green; }
.tema.t2 { background-color:cornflowerblue; }
.tema.t3 { background-color:orange; }

.tema {
    height: 100px;
    border: 1px solid #C2C2C2;
    margin-top: 15px;
    padding: 10px;
}

.tema .container { 
    background-color: #fff;
    text-align: center;
    height: 70%;
    margin: 10px auto;
 }
.t1 .container { background-color: #B6DC33; width:50%; height: 20%;}
.t2 .container { background-color:cornflowerblue; }
.t3 .container { background-color: #D23131; color: #fff; width:30%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<select name="item-0-status" id="id_item-0-status">
<option value="">-- Escolher tema --</option>
<option value="1">Tema 1 - Verde</option>
<option value="2">Tema 2 - Azul</option>
<option value="3">Tema 3 - Laranja</option>
</select>

<div class="tema">
    <button class='btn btn-primary'>botão principal</button>
    <div class="container">Texto Aleatório</div>
</div>

0

Eu estava estudando o código do jquery mobile para verificar como os temas eram processados.

O que acontece com o jquery mobile é que o tema é setado via um atributo data-theme e na inicialização do aplicativo todo o html é modificado para utilizar classes.

Por exemplo:

<div data-theme="b">
    <button></button>
</div>

ficará:

<div data-theme="b">
    <button class="ui-btn-b">
</div>

Como o script que seta a classe busca pelo tema mais próximo (algo como .closest('[data-theme]').data('theme')), a hierarquia dos temas no html é mantida.

Ainda não é a solução que eu estava procurando (que talvez nem exista) pois ainda exige que cada elemento possua uma classe específica por tema, mas é a mais próxima do desejado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .