Umgedrehte Vorder-/Hintergrundfarben kann man ganz einfach per
class="invert"
erreichen.
<li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
<header>Switch Widget</header>
<!-- place your widget here -->
<div class="vbox">
<div class="hbox">
<div class="vbox gray">normal</div>
<div class="vbox">
<div data-type="switch" data-icon="fa-rss"
data-device='isAutoHomeStatus'
data-get-on="1" data-get-off="0"
data-set-on="1" data-set-off="0"
class="green"></div>
<div class="gray">on</div>
</div>
<div class="vbox">
<div data-type="switch" data-icon="fa-rss"
data-device='isAutoHomeStatus'
data-get-on="0" data-get-off="1"
data-set-on="0" data-set-off="1"
class="green"></div>
<div class="gray">off</div>
</div>
</div>
<div class="hbox">
<div class="vbox gray">invert</div>
<div class="vbox">
<div data-type="switch" data-icon="fa-rss"
data-device='isAutoHomeStatus'
data-get-on="1" data-get-off="0"
data-set-on="1" data-set-off="0"
class="green invert"></div>
<div class="gray">on</div>
</div>
<div class="vbox">
<div data-type="switch" data-icon="fa-rss"
data-device='isAutoHomeStatus'
data-get-on="0" data-get-off="1"
data-set-on="0" data-set-off="1"
class="green invert"></div>
<div class="gray">off</div>
</div>
</div>
</div>
</li>