diff --git a/templates/ds4/base-blue.svg b/templates/ds4/base-blue.svg
new file mode 100644
index 0000000..73b9ae8
--- /dev/null
+++ b/templates/ds4/base-blue.svg
@@ -0,0 +1,83 @@
+
diff --git a/templates/ds4/base-red.svg b/templates/ds4/base-red.svg
new file mode 100644
index 0000000..5190394
--- /dev/null
+++ b/templates/ds4/base-red.svg
@@ -0,0 +1,83 @@
+
diff --git a/templates/ds4/template.css b/templates/ds4/template.css
index 53722fa..da2a6f0 100644
--- a/templates/ds4/template.css
+++ b/templates/ds4/template.css
@@ -4,10 +4,18 @@
height: 598px;
}
-.gamepad.white {
+.gamepad[data-color="white"] {
background-image: url(base-white.svg);
}
+.gamepad[data-color="red"] {
+ background-image: url(base-red.svg);
+}
+
+.gamepad[data-color="blue"] {
+ background-image: url(base-blue.svg);
+}
+
.gamepad.disconnected {
background-image: url(disconnected.svg);
}
diff --git a/templates/xbox-one/template.css b/templates/xbox-one/template.css
index af8d2e7..2cc0568 100644
--- a/templates/xbox-one/template.css
+++ b/templates/xbox-one/template.css
@@ -4,8 +4,8 @@
width: 750px;
}
-.gamepad.white {
- background-image: url(base-white.svg);
+.gamepad[data-color="white"] {
+ background-image: url(base-white.svg);
}
.gamepad.disconnected {