CODEWITHSUNDEEP
css
Melvin Chua
Melvin Chua

Reputation: 35

Possibility of creating Color palette for easy customisation [CSS]

Context: I am creating a template HTML/CSS codes for various users to customize the page color of their choice. While CSS is able to reduce the styling codes for the HTML pages, I was wondering if there can be a way to have a "master color palette" for user to change the hex of 5 title to complete the whole change.

Below i have a sample of my css to show multiple scripts calling out to the same color which i want to "store it in a var", I understand in CSS3 that you can use @font-face but im not sure if there is an easy way for color.

Note that although my CSS only contains 3 color, my full codes have 5 color being called out in table, header, div, p, img, etc..

Sample of my CSS before edits:

 body{
   color:#ffffff; /*@colorTwo*/
   background-color:#eeeeee; /*@colorThree*/
 }

 .heading1{
    color:#3e3e3e; /*@colorOne*/
    font-weight: bold;
    text-decoration:underline;
    padding-right: 1em;
 }

 .heading2{
    color:#3e3e3e; /*@colorOne*/
    text-decoration: underline;
    padding-right: 1em;
 }

 .heading3{
    color:#3e3e3e; /*@colorOne*/
    padding-right: 1em;
 }

Upvotes: 0

Views: 550

Answers (4)

user6179028
user6179028

Reputation:

Use JS/Jquery to apply the style?

Index.html

<html>
    <head>
        <title>Title here</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <script src="customColors.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script>
            //Get Element by id: $("#elementId");
            //Get Element by class: $(".elementClass");
            //Get Element by tag: $("elementTag");

            $(".heading1").css("backround", colorOne)
            ... Rest of your code here :) ...
        </script>

        <div class="heading1"></div>
        <div class="heading2"></div>
        <div class="heading3"></div>

    </body>
</html>

customColors.js

var colorOne = '#color'
var colorTwo = '#color'
var colorThree = '#color'

Upvotes: 1

neilmaledev
neilmaledev

Reputation: 1

I am also working on templating, and we have the save problem. But my current solution is to include a LESS css file. Below is a basic sample

1. copy below and paste to a new file and name style.less

@red: red;

@orange: orange;

@blue: blue;

@black: #000;

@white: rgb(255,255,255);

body {

    background: @black;
}

div {

    color: @red;
}

2. import your less file

follow this http://lesscss.org/#client-side-usage

Upvotes: 1

boxmein
boxmein

Reputation: 875

Newer versions of CSS include variables, however you need something like Myth that compiles your files to CSS to support all non-green browsers here.

/* something.css */
/* CSS variables are like other CSS properties - they need a selector to see 
   which elements to apply to. The root scope applies globally. */
:root {
    --background-color: #FF00FF;
}

.content {
    background: var(--background-color);
}

.content div li .subcontent {
    background: var(--background-color);
}

However, CSS preprocessors like Sass are also very common. They have additional non-CSS syntax that lets you use variables.

/* src/something.scss */
$backgroundColor: #FFFFFF;

.content {
    background: $backgroundColor;
}

If developing with CSS preprocessors, you will typically have some sort of "build" and "watch" setups that will automatically make a "distribution" version of your CSS, for uploading onto a website. The result for the above SCSS would be this:

/* dist/something.css */
.content {
    background: #FFFFF;
}

Upvotes: 1

user6179028
user6179028

Reputation:

Probaly one of the worst ways:

Create a file called Style.php

<?php

    $colorone = '#3e3e3e';
    $colortwo = '#ffffff';
    $colorthree = '#eeeeee';

    echo "
        <style>
            body{
               color:$colorTwo;
                 background-color:$colorthree;
             }

             .heading1{
                color:$colorone;
                font-weight: bold;
                text-decoration:underline;
                padding-right: 1em;
             }

             .heading2{
                color:$colorone;
                text-decoration: underline;
                padding-right: 1em;
             }

             .heading3{
                color:$colorone;
                padding-right: 1em;
          }
        </style>
    "
?>

To include this document you will need to have an index.php

<html>
    <head>
        <?php include 'Style.php';?>
    </head>
    <body>
        <!-- Rest of code -->
    </body>
</html>

Upvotes: 1

Related Questions