trocar cores do sistema com SASS .

Fala aí Amanda, tudo bem? Isso é possível ser feito de N maneiras, a mais simples, sendo elas:

• Separe os temas e .sass e pastas diferentes, exemplo:

light
    buttons.sass
    card.sass
    menu.sass

dark
    buttons.sass
    card.sass
    menu.sass

• Adicione classes modificadoras informando o "tema" do seu componente, exemplo:

<div class="card card--light"></div>
<div class="card card--dark"></div>

• Define o tema no seu elemento root, pode ser o body ou uma tag main que seja pai de todos, exemplo:

<main class="container t-light">
    <h1>Meu título</h1>
    <button>Meu botão</button>
    <div>Meu cartão</div>
</main>

<main class="container t-dark">
    <h1>Meu título</h1>
    <button>Meu botão</button>
    <div>Meu cartão</div>
</main>

Essa seria algumas soluções que no momento eu pensei/lembrei, claro que existe mais.

Espero ter ajudado.

Então a ideia era o sistema fornecer uma paleta de cores para o cliente poder trocar conforme sua escolha!

O sistema é desenvolvido em Java e angular

Só com essa opção eu consigo fazer?

Consegue, você pode partir para uma dessas abordagens que eu falei, dai no banco de dados vocês salvam o tema/cores que o usuário optou em utilizar.

Dai podem importar arquivos CSS diferentes para cada tema/cor salva no banco de dados, ou pega essa cor e devolve para o front, dai concatena ela nas classes dos componentes.

Muito obrigadaa

Ola Matheus, preciso te incomodar novamente.

Vou tentar explicar mais ou menos como eu faria e voce me corrige se eu estiver errada, plis !

Minha ideia inicial era fazer o que você disse no começo, sobre criar uma arquivo com as cores do sistema em sass.

Depois eu mudaria em todo o código onde tem cores para as variáveis em sass.

O cliente teria uma tela para escolher a cor que deseja. Eu gostaria que quando ele desse o click em uma cor o sistema mudaria para a cor optada. (obviamente)

então é ai que entra minha duvida! Vou dar um exemplo:

Eu tenho la no meu código em sass uma variável "btn-primary: red" então se eu trocar no arquivo a cor para blue obviamente todo o sistema também mudaria.. Eu só não sei como mudar o valor de uma variável quando eu clicar em uma cor.

Resumidamente eu sou stag front-end em uma empresa e recebi esse desafio! A parte de trocar as cores para o sass é fácil, meu maior problema é o que disse sobre como trocar o valor da variável no click.

Sorry pelo textão e desculpa te incomodar novamente!!

Fala aí Amanda, bom, vamos lá:

Uma vez fiz um framework em SASS, nele, para cada componente eu tenho um arquivo de cores, um exemplo seria os botões:

https://github.com/mahenrique94/stilize/blob/master/sass/helpers/variable/_theme.sass

Depois, dentro dos botões eu faço um for pegando todos os temas e criando seus estilos:

https://github.com/mahenrique94/stilize/blob/master/sass/object/button/_button_styles.sass

Dessa maneira, o CSS compilado irá ter várias classes (uma para cada tema), depois é possível chamar um botão azul com:

<button class="o-button--lube">Azul</button>
<button class="o-button--der">Vermelho</button>
<button class="o-button--ren">Verde</button>

Dai no banco de dados eu salvava o tema escolhido pelo usuário:

$themes: arky, der, gary, kal, lile, low, lube, neli, pin, range, ren, rup, tie

Sempre era um desses.

Dai no HTML eu recebia o tema do banco de dados e passava na classe dos elementos.

Espero ter ajudado