下記のソースコードは、data-theme属性によりスタイルを切り替えている物です。
時計と、それに色を付けるためのボタンがあるのですが、
"ボタンの背景色=時計の色"のため<style>の[data-theme]の"color"を
"background-color"と同じにしました。
しかし、そうすると今度はボタンの中の文字色も同じになるため、その文字が
消えてしまいます。
ここの矛盾を解決するにはどうしたらいいか、ご教示ください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
<meta charset="utf-8" />
    <title></title>


<style>
[data-theme="black"]{ color: black; background-color:black;}
[data-theme="blue"]{ color: blue; background-color:blue;}
[data-theme="silver"]{ color: silver; background-color:silver;}
[data-theme="white"]{ color: white; background-color:white;}

</style>
</head>

<body id="back" data-theme="silver">

<button onclick="clock.hidden = !clock.hidden; event.target.textContent = clock.hidden ? 'Show' : 'Hide'; match_theme();" data-theme="white">Hide</button>
<br>
<button data-theme="black" onclick="set_theme([back], 'black'); match_theme();">Black</button>
<button data-theme="blue" onclick="set_theme([back], 'blue'); match_theme();">Blue</button>
<button data-theme="silver" onclick="set_theme([back], 'silver'); match_theme();">Silver</button>
<br>

Clock:
<select id="clock_setter" data-theme="blue" autocomplete="off"
onchange="set_theme(clock_parts, get_theme(event));">
  <option data-theme="black">Clock</option>
  <option data-theme="blue" selected> Blue </option>
  <option data-theme="silver"> Silver</option>  
  <option id="clock_setter_none" data-theme="white" hidden>--C--</option>
        </select>
Date:
<select id="date_setter" data-theme="blue" autocomplete="off"
    onchange="set_theme([Od],get_theme(event));">
    <option data-theme="black"> Black </option>
    <option data-theme="blue" selected> Blue </option>
    <option data-theme="silver"> Silver </option>
    </select>
Face:
<select id="face_setter" data-theme="blue" autocomplete="off"
    onchange="set_theme([Of],get_theme(event));">
    <option data-theme="black"> Black </option>
    <option data-theme="blue" selected> Blue </option>
    <option data-theme="silver"> Silver </option>
    </select>
Hours:
<select id="hour_setter" data-theme="blue" autocomplete="off"
    onchange="set_theme([Oh],get_theme(event));">
    <option data-theme="black"> Black </option>
    <option data-theme="blue" selected> Blue </option>
    <option data-theme="silver"> Silver </option>
    </select>
Minutes:
<select id="minute_setter" data-theme="blue" autocomplete="off"
    onchange="set_theme([Om],get_theme(event));">
    <option data-theme="black"> Black </option>
    <option data-theme="blue" selected> Blue </option>
    <option data-theme="silver"> Silver </option>
    </select>
Seconds:
<select id="second_setter" data-theme="blue" autocomplete="off"
    onchange="set_theme([Os],get_theme(event));">
    <option data-theme="black"> Black </option>
    <option data-theme="blue" selected> Blue </option>
    <option data-theme="silver"> Silver </option>
    </select>
</body>

<div id="clock">
    <div id="Od" data-theme="blue" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
        </div>
    <div id="Of" data-theme="blue" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
        </div>
    <div id="Oh" data-theme="blue" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
        </div>
    <div id="Om" data-theme="blue" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
        </div>
    <div id="Os" data-theme="blue" style="position:absolute;top:0px;left:0px">
        <div style="position:relative">
        </div>
    </div>
</div>

<script type="text/javascript">


(function(){
    "use strict";

function $(sel)
{
    return document.getElementById(sel);
}   

function $$(sel)
{
    if (typeof document.getElementsByClassName === 'undefined')
    {
        return document.getElementsByName(sel);
    }
    return document.getElementsByClassName(sel);
}

var dCol = '', //date colour.
    sCol = '', //seconds colour.
    mCol = '', //minutes colour.
    hCol = '', //hours colour.
    fCol = '', //face color
    ClockHeight = 40,
    ClockWidth = 40,
    ClockFromMouseY = 0,
    ClockFromMouseX = 100,
    d = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
    m = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    date = new Date(),
    day = date.getDate(),
    year = date.getYear() + 1900;

var TodaysDate = " " + d[date.getDay()] + " " + day + " " + m[date.getMonth()] + " " + year;
var D = TodaysDate.split('');
var H = '...';
    H = H.split('');
var M = '....';
    M = M.split('');
var S = '.....';
    S = S.split('');
var Face = '1 2 3 4 5 6 7 8 9 10 11 12',
    font = 'Helvetica, Arial, sans-serif',
    size = 1,
    speed = 0.6;
    Face = Face.split(' ');
var n = Face.length;
var a = size * 10;
var ymouse = 0,
    xmouse = 0,
    scrll = 0,
    props = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + fCol + '">',
    props2 = '<span style="font-family:' + font + ';font-size:' + size + 'em; color:#' + dCol + '">';
var Split = 360 / n;
var Dsplit = 360 / D.length;
var HandHeight = ClockHeight / 4.5; 
var HandWidth = ClockWidth / 4.5;
var HandY = -7,
    HandX = -2.5,
    step = 0.06,
    currStep = 0,
    y = [],
    x = [],
    Y = [],
    X = [],
    Dy = [],
    Dx = [],
    DY = [],
    DX = [];
var i;

for (i = 0; i < n; i++) 
{
    y[i] = 0;
    x[i] = 0;
    Y[i] = 0;
    X[i] = 0;
}

for (i = 0; i < D.length; i++) 
{
    Dy[i] = 0;
    Dx[i] = 0;
    DY[i] = 0;
    DX[i] = 0;
}

var wrapper = $('clock');
var html = ''
// Date wrapper

html = '';

for (i = 0; i < D.length; i++)
{
    html += '<div class="Date" name="Date" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props2 + D[i] + '</span></div>';
}

$('Od').children[0].innerHTML = html;
// Face wrapper
html = '';

for (i = 0; i < n; i++) 
{
    html += '<div class="Face" name="Face" style="position:absolute;top:0px;left:0;height:' + a + ';width:' + a + ';text-align:center">' + props + Face[i] + '</span></div>';
}

$('Of').children[0].innerHTML = html;
// Hours wrapper
html = '';

for (i = 0; i < H.length; i++)
{
    html += '<div class="Hours" name="Hours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + hCol + ';text-align:center;font-weight:bold">' + H[i] + '</div>';
} 

$('Oh').children[0].innerHTML = html;
// Minute wrapper

html = '';

for (i = 0; i < M.length; i++)

{

    html += '<div class="Minutes" name="Minutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + mCol + ';text-align:center;font-weight:bold">' + M[i] + '</div>';

} 

$('Om').children[0].innerHTML = html;



// Seconds wrapper

html = '';

for (i = 0; i < S.length; i++)

{

    html += '<div class="Seconds" name="Seconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:' + sCol + ';text-align:center;font-weight:bold">' + S[i] + '</div>';

} 

$('Os').children[0].innerHTML = html;



// Mouse move event handler


function Mouse(evnt) 

{

    if (typeof evnt === 'undefined')

    {

        ymouse = event.Y + ClockFromMouseY;

        xmouse = event.X + ClockFromMouseX;

    }
    else
    {
        ymouse = evnt.clientY + ClockFromMouseY;
        xmouse = evnt.clientX + ClockFromMouseX;
    }
}

document.onmousemove = Mouse;

function ClockAndAssign() 

{
    var time = new Date();
    var secs = time.getSeconds();
    var sec = -1.57 + Math.PI * secs / 30;
    var mins = time.getMinutes();
    var min = -1.57 + Math.PI * mins / 30;
    var hr = time.getHours();
    var hrs = -1.575 + Math.PI * hr / 6 + Math.PI * parseInt(time.getMinutes(), 10) / 360;

    $('Od').style.top = window.document.body.scrollTop;
    $('Of').style.top = window.document.body.scrollTop;
    $('Oh').style.top = window.document.body.scrollTop;
    $('Om').style.top = window.document.body.scrollTop;
    $('Os').style.top = window.document.body.scrollTop;

    for (i = 0; i < n; i++)
    {
        var F = $$('Face')[i];
        F.style.top = y[i] + ClockHeight * Math.sin(-1.0471 + i * Split * Math.PI / 180) + scrll;
        F.style.left = x[i] + ClockWidth * Math.cos(-1.0471 + i * Split * Math.PI / 180);
    }

    for (i = 0; i < H.length; i++)
    {
        var HL = $$('Hours')[i];
        HL.style.top = y[i] + HandY + (i * HandHeight) * Math.sin(hrs) + scrll;
        HL.style.left = x[i] + HandX + (i * HandWidth) * Math.cos(hrs);
    }

    for (i = 0; i < M.length; i++)
    {
        var ML = $$('Minutes')[i].style;
        ML.top = y[i] + HandY + (i * HandHeight) * Math.sin(min) + scrll;
        ML.left = x[i] + HandX + (i * HandWidth) * Math.cos(min);
    }

    for (i = 0; i < S.length; i++)
    {
        var SL = $$('Seconds')[i].style;
        SL.top = y[i] + HandY + (i * HandHeight) * Math.sin(sec) + scrll;
        SL.left = x[i] + HandX + (i * HandWidth) * Math.cos(sec);
    }

    for (i = 0; i < D.length; i++)
    {
        var DL = $$('Date')[i].style;
        DL.top = Dy[i] + ClockHeight * 1.5 * Math.sin(currStep + i * Dsplit * Math.PI / 180) + scrll;
        DL.left = Dx[i] + ClockWidth * 1.5 * Math.cos(currStep + i * Dsplit * Math.PI / 180);
    }
    currStep -= step;
}

function Delay() 
{
    scrll = 0;
    Dy[0] = Math.round(DY[0] += ((ymouse) - DY[0]) * speed);
    Dx[0] = Math.round(DX[0] += ((xmouse) - DX[0]) * speed);
    for (i = 1; i < D.length; i++) {
        Dy[i] = Math.round(DY[i] += (Dy[i - 1] - DY[i]) * speed);
        Dx[i] = Math.round(DX[i] += (Dx[i - 1] - DX[i]) * speed);
    }
    y[0] = Math.round(Y[0] += ((ymouse) - Y[0]) * speed);
    x[0] = Math.round(X[0] += ((xmouse) - X[0]) * speed);
    for (i = 1; i < n; i++) {
        y[i] = Math.round(Y[i] += (y[i - 1] - Y[i]) * speed);
        x[i] = Math.round(X[i] += (x[i - 1] - X[i]) * speed);
    }
    ClockAndAssign();
    setTimeout(Delay, 20);
}

Delay();
}());
</script>

<script type="text/javascript">
        "use strict";
var clock_parts = [Od, Of, Oh, Om, Os];
var clock_part_setters = [date_setter, face_setter, hour_setter, minute_setter, second_setter];

function for_each(array,func){Array.prototype.forEach.call(array,func);}

function get_theme(event){return event.target.options[event.target.selectedIndex].dataset.theme;
}

function select_option(select_elm,theme){select_elm.dataset.theme = theme;
// IE hack
select_elm.className = select_elm.className;
for_each(select_elm.options, function(option_elm){
if(option_elm.dataset.theme == theme){
option_elm.selected = true;
}
});
}

function set_theme(elms,theme){
    for_each(elms, function(elm){
elm.dataset.theme = theme;
        // IE hack
elm.className = elm.className;
});
// update clock_part_setters
for_each(clock_parts,function(part,i){
select_option(clock_part_setters[i],part.dataset.theme);
});
// update clock_setter
var is_same_theme = clock_parts.every(function(part){
return part.dataset.theme == clock_parts[0].dataset.theme;
});
if(is_same_theme){
clock_setter_none.hidden = true;
select_option(clock_setter,clock_parts[0].dataset.theme);
}
else{
clock_setter_none.hidden = false;
select_option(clock_setter,"white");
}
}
function match_theme(){
    var theme_table = {
        // back_theme: "clock_theme",
        black: "silver",
        blue: "black",
        silver: "blue",

    };
    set_theme(clock_parts, theme_table[back.dataset.theme]);
}
</script>
</body>
</html>