Computing desk
< December 16	<< Nov \| December \| Jan >>	December 18 >

Welcome to the Wikipedia Computing Reference Desk Archives
The page you are currently viewing is a transcluded archive page. While you can leave answers for any questions shown below, please ask new questions on one of the current reference desk pages.

December 17

Making buttons to change the colors on a page.

I had buttons on a site that changed the bgcolor and text color back and forth between "day time" and "night time." The code just changed the default colors. But now I want to use to as declaring variables, i.e., color1, color2, which can change, upon button click. Here's what I have

<style type="text/css">
		body.theme-day { color1: green; color2: red; color3: lightgray; }
		body.theme-night { color1: darkgreen; color2: darkred; color3: gray; }

		/* hide elements for the opposite theme 
		body.theme-day .theme-night { display: none; }
		body.theme-night .theme-day { display: none; }
         */
	</style>
	<script type="text/javascript">
		function change_theme(theme) {
			document.body.className = document.body.className.replace(/\s*theme-\S+/, "") + " theme-" + theme;
		}
	</script>
//And then the buttons.
<P align="center"><button class="theme-night" type="button" onclick="change_theme('day');">Day version</button>
<button class="theme-day" type="button" onclick="change_theme('night');">Night version</button></P>

And so my issue is, using color1 and color2 are not recognized, say, when I use font color="color1" for example. Thanks. 67.165.185.178 (talk) 16:29, 17 December 2022 (UTC).reply

I'm not used to CSS, but I had a look at the relevant page on W3Schools.

Variables: it seems that their names have to start with --, so you would have to say --color1: green; --color2: red;, and so on. Then, it seems that you have refer to them using the var() function. So rather than saying style="color: color2;" it would be style="color: var(--color2);". Card Zero (talk) 22:07, 17 December 2022 (UTC)reply

Okay, I got half of it to work. The part that works is

th, td {
  border: 2px solid var(--color2);
}

(Above is all within <style> tags. But the part that doesn't work is <body style="bgcolor: var(--color3);">,

<table style="bgcolor: var(--color3);">

, and

<td style="bgcolor: var(--color1); width:83%">

67.165.185.178 (talk) 00:08, 18 December 2022 (UTC).reply

Is it possibly background-color rather than bgcolor?

Here's a complete functioning page.

<!DOCTYPE html>
<html>
<head>
<style>
#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 2px solid var(--color2);
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

		body.theme-day { --color1: green; --color2: red; --color3: lightgray; }
		body.theme-night { --color1: darkgreen; --color2: darkred; --color3: gray; }
</style>
<script type="text/javascript">
	function change_theme(theme) {
		document.body.className = document.body.className.replace(/\s*theme-\S+/, "") + " theme-" + theme;
	}
</script>
</head>

<body class="theme-day" style="background-color: var(--color3);">

<h1>A Fancy Table</h1>

<table id="customers" style="background-color: var(--color3);">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td style="background-color: var(--color1); width:83%">Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

<P align="center"><button class="theme-night" type="button" onclick="change_theme('day');">Day version</button>
<button class="theme-day" type="button" onclick="change_theme('night');">Night version</button></P>

</body>
</html>

Card Zero (talk) 00:49, 18 December 2022 (UTC)reply

Okay, got it to work, it was indeed background-color. 67.165.185.178 (talk) 01:07, 18 December 2022 (UTC).reply

This page was redesigned at the edge.

Wikipedia:Reference desk/Archives/Computing/2022 December 17

December 17

Making buttons to change the colors on a page.