Toggle color script - [Advanced]

2

Sat Jun 26, 2021 10:07 am
Clan Leader
Top Dog
2631 Posts
coRpSE
Online
Most Played:
This week: 81.4hrs.
Total Played: 161hrs.
  
There is life outside of the game.
First off, before I get into details on how to implement this into your theme on your site, this will require you to know CSS, using variables in CSS, HTML, be able to somewhat understand some JavaScript, (it's already coded, so you don't need to write it from the ground up), and, you do need to know what a ternary operator is. You will also need a code editor that has syntax highlighting, something like VS Code, sublime text, ect...

My top picks:
Please login to see this link
Get registered or Log in


Okay, now that is out of the way, with this system I am going to show you, you will only really need to edit 3/4 files in total for your theme, this is good for those theme designers that want to make multiple color variants of their theme, but releasing it under a single theme. If you want an example of what this looks like and how it functions, just look on my website
Please login to see this link
Get registered or Log in
and click the "toggle color" button in the upper left. This is the same principle of making a light mode and dark mode which you can use and add in as well. This system does NOT use cookies, but instead, uses a local storage key.

The first file is the JavaScript file called toggler.js. Open that and the two lines you really will need to edit is line 8 and line 14.
Line 8 is as follows:

Code: [ Select all ]

wcolor = (lscolor === "blue") ? "blue" : (lscolor === "red") ? "red" : "green";

This is a ternary operator. It's shorthand for an "if else" statement. If this was an "if else" setting instead of the shorthand, it would read like:

Code: [ Select all ]

if (lscolor === "blue") {
  wcolor = "blue";
}else if (lscolor === "red") {
  wcolor = "red";
}else{
  wcolor = "green";
}


As you can see, there, if lscolor isn't set, then it would set wcolor to green, which would be your default color. These color names, "blue, red, green", are just class names I set to match the CSS, which we will go over below. Here is a broken down version of the ternary operation to help you.

Expand

Now, the other line I mentioned was line 14. This is the same thing as above, but with an offest.

Code: [ Select all ]

var sitecolor = (wcolor === "blue") ? "red" : (wcolor === "red") ? "green" : "blue";

This is what changes the color on the click event of the button. Again, this is only changing the class name that we give for each varent of the color, (must match the list from line 8).

So basically, it reads the same as above, but if the color is set to blue when the button is clicked, it will set the color not to be red, and if the color was red, set it to green, and if it's neither one of those two, set it to blue. That is exactly how that reads and with the visual aid that I provided, you should be able to follow that. That is really it for that file.

The second file to edit will be your style.css. Here is a copy of what I have on my site, this is where knowing how to use variables within CSS is needed.

Code: [ Select all ]

:root[webcolor="green"] {
   --main-color: #0F0;
   --light1-color: hsla(104, 73%, 46%, 0.8);
   --light2-color: rgba(0, 255, 0, 0.5);
   --light3-color: rgb(123, 255, 123);
   --light4-color: rgb(179, 255, 182);
   --dark1-color: #008600;
   --dark2-color: rgba(0, 255, 20, 0.5);
   --dark3-color: #26f626;
   --img-rotate: 0deg;
   --som-rotate: 0deg;
   --donation-color: #0F0;
   --img-corners: url(../images/corners.png);
   --butt-color1: #caefab;
   --butt-color2: #0F0;
   --butt-color3: #007a00;
   --dono-glow1: rgba(0,255,0,.2);
   --dono-glow2: rgba(0,255,0,.1);
   --dono-glow3: rgba(0,255,0,.6);
   --dono-glow4: rgba(0,255,0,.4);
  }
  :root[webcolor="blue"] {
   --main-color: #1b63ff;
   --light1-color: hsla(207, 73%, 46%, 0.8);
   --light2-color: rgba(0, 140, 255, 0.5);
   --light3-color: rgb(123, 169, 255);
   --light4-color: rgb(179, 184, 255);
   --dark1-color: #005586;
   --dark2-color: rgba(0, 89, 255, 0.5);
   --dark3-color: #264cf6;
   --img-rotate: 125deg;
   --som-rotate: 100deg;
   --donation-color: rgb(0, 119, 255);
   --img-corners: url(../images/corners-b.png);
   --butt-color1: #abb2ef;
   --butt-color2: #007bce ;
   --butt-color3: #003983;
   --dono-glow1: rgba(0, 132, 255, 0.2);
   --dono-glow2: rgba(0, 132, 255, 0.1);
   --dono-glow3: rgba(0, 140, 255, 0.6);
   --dono-glow4: rgba(0, 140, 255, 0.4);
  }
  :root[webcolor="red"] {
   --main-color: #ff1b1b;
   --light1-color: hsla(0, 73%, 46%, 0.8);
   --light2-color: rgba(255, 0, 0, 0.5);
   --light3-color: rgb(255, 123, 123);
   --light4-color: rgb(255, 179, 179);
   --dark1-color: #860000;
   --dark2-color: rgba(255, 0, 0, 0.5);
   --dark3-color: #f62626;
   --img-rotate: -125deg;
   --som-rotate: -100deg;
   --donation-color: rgb(255, 0, 0);
   --img-corners: url(../images/corners-r.png);
   --butt-color1: #efabab;
   --butt-color2: #ce0000 ;
   --butt-color3: #830000;
   --dono-glow1: rgba(255, 0, 0, 0.2);
   --dono-glow2: rgba(255, 0, 0, 0.1);
   --dono-glow3: rgba(255, 0, 0, 0.6);
   --dono-glow4: rgba(255, 0, 0, 0.4);
  }


I will break this down into a few sections. The first thing you see is the selector I am using which is :root which targets the highest-level, “or parent”, element in the DOM, or document tree, which is going to be html. After the selector, you can see the CSS attribute selector. In this case, what I used on my site, I have it set so if the class webcolor that is on the HTML selector, is equal to Green, then it will use this section of variables that I have set for that colors, (:root[webcolor="green"]). As you can see I have one set for each color Group which is the green, blue, and red. Now inside these sections, you can see that I have set up Global variables so I can control the color of the theme without needing to repeat the same color over and over again. How, just say you copy and paste what I have above into your style.css, (not recommended, best to make your own), how would you now add that to all the different ids and classes in your style file, easily. You would just use a var(--variable-name); in place of the value you want. For example:

Code: [ Select all ]

#btn-toggle:hover {
   background:linear-gradient(to bottom, #323232 5%, #181818 100%);
   border:1px solid var(--butt-color3);
   color: var(--butt-color3);
   animation: none;
   font-weight:900;
}


This is the button id I have in my theme, you can see on both the border and the color of that ID, it will be using what ever --butt-color3 is set to.
What I did to make things go faster when I did mine is, I first started with creating the first :root[webcolor="green"]{, then I started with making a --main-color: variable and put that to #0F0 which is the primary color of my theme, then using the "Find & Replace feature of my editor, I did a search for all instances of #0F0 and replaced all with var(--main-color);. I did the same for #00FF00 since #0F0 is just the shorthand of #00FF00, I also had case-sensitive off, and I did that for each color I found that I wanted to be different on each theme. Now, changing the color of some images, I just did a filter that is pretty much supported by all browsers.

Example:

Code: [ Select all ]

#color-rotate, .color-rotate {
   filter:hue-rotate(var(--img-rotate));
}


And to rotate the colors, its just using degrees, just look at the CSS above in my DOM section, or Google on how to use the hue-rotate filter. Overall, it can be a tedious process at first, but once you get one color done, then you just copy that section, and paste a new one for each color section, (remembering to change the name of the HTML selector), EG: green, red, blue that I used.

Now, last file, this, will be what ever file you want that correlates with your theme with the location that you want the button, since not all themes are made the same, I can't tell you which file, that will be up to you to decide upon. Also, depending on how your theme is made, you may need to change the div's/tables and what not, but the button code is just simply:

Code: [ Select all ]

<button id="btn-toggle">Toggle Color</button>


You will need to style your button with CSS, but I did provide the styling I am using in the download attached to this post.
There is one last thing you need to do, and that is call upon the JavaScript file and add it to THE HEAD of your site. To do this, all you need to do is add to your theme;

Code: [ Select all ]

add_js_to_head( 'style/toggler.js', 'file', '1.0.0' );


This is just a PHP function that is in Xtreme that allows you to add a file to the header. You should already be using add_css_to_head and add_js_to_body already, but as you can see, that one is not adding the js to the body, you need it in the head. Also, depending on where you put the toggler file is where you're going to need to point the path to. I just showed that I have my file in the style folder.

That is all that is needed to put your own toggler, and you can have as many different color sets up, along with doing multicolor, both dark and light.

Note: I know there are other ways to go about doing this, there may be better ways and there may be worse ways, this is just the way I went, and it works well and for me, is simple and straight to the point and I can easily understand it and follow it. It doesn't use jQuery, which I am starting to try not using as much since JavaScript is native and catching up to the jQuery library.


Expand
Forums ©