CODEWITHSUNDEEP
csssassless
Mehdi
Mehdi

Reputation: 1126

How to manage multiple skin of css with the same structure but different colors?

I need three skins that only have different colors
How can I create them so that the default file restructuring is applied automatically to other files?

<div class="test">
  Test
</div>

defaultVariables.scss:

$background: #f00;

default.scss:

@import "defaultVariables.scss";

.test{
    background: $background;
}

default.css:

.test{
    background: #f00;
}

darkVariables.scss:

$background: #000;

dark.scss:

@import "default.scss";
@import "darkVariables.scss";

dark.css: Expected output -> background: #000;

.test{
    background: #f00;
}

lightVariables.scss:

$background: #fff;

light.scss:

@import "default.scss";
@import "light.scss";

light.css: Expected output -> background: #fff;

.test{
    background: #f00;
}

Upvotes: 3

Views: 456

Answers (2)

Mehdi
Mehdi

Reputation: 1126

The most effective way is to use css capabilities:

function toggleSkin() {
   document
   .getElementsByTagName("html")[0]
   .classList
   .toggle("dark");
}
:root {
    --back-color: #fff;
    --color: #000;
}

html.dark {
    --back-color: #000;
    --color: #fff;
}

body {
  background: var(--back-color);
  color: var(--color);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        Test
    </div>
    <input type="button" value="Toggle skin" onclick="toggleSkin()" />
</body>
</html>

Upvotes: 0

Hossein Azizdokht
Hossein Azizdokht

Reputation: 1005

You must define _variable.scss and write all colors in this file:

//colors
$background:red;
$primary-color:#b22930;
$second-color:#dd4420;

//and then define again variables in dark mode for example:

body[data-theme="dark"]{
//colors
$background:#333;
$primary-color:#555;
$second-color:#888;
}

Or check this link: link for example

Upvotes: 4

Related Questions