Easy way to add more thems, added a dark theme

api/templates/spotify-dark.html.j2

@@ -0,0 +1,112 @@
+<svg width="480" height="133" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <foreignObject width="480" height="133">
+        <div xmlns="http://www.w3.org/1999/xhtml" class="container">
+            <style>
+                .main {
+                    /*margin-top: 40px;*/
+                    display: flex;
+                }
+
+                .currentStatus {
+                    float: left;
+                    font-size: 24px;
+                    position: static;
+                    margin-top: -5px;
+                    margin-left: 10px;
+                }
+                
+                .container {
+                    border-radius: 5px;
+                    padding: 10px 10px 10px 0px;
+                    background-color:#181414;
+                }
+
+                .art {
+                    width: 27%;
+                    float: left;
+                    margin-left: -5px;
+                }
+
+                .content {
+                    width: 71%;
+                }
+
+                .song {
+                    color: #f7f7f7;
+                    overflow:hidden;
+                    margin-top: 3px;
+                    font-size: 24px;
+                    text-align: center;
+                    white-space:nowrap;
+                    text-overflow:ellipsis;
+                }
+
+                .artist {
+                    color: #9f9f9f;
+                    font-size: 20px;
+                    margin-top: 4px;
+                    text-align: center;
+                    margin-bottom: 5px;
+                }
+
+                .cover {
+                    width: 100px;
+                    height: 100px;
+                    border-radius: 5px;
+                }
+
+                #bars {
+                    width: 40px;
+                    height: 30px;
+                    bottom: 23px;
+                    position: absolute;
+                    margin: -20px 0 0 0px;
+                }
+
+                .bar {
+                    width: 3px;
+                    bottom: 1px;
+                    height: 3px;
+                    position: absolute;
+                    background: #1DB954cc;
+                    animation: sound 0ms -800ms linear infinite alternate;
+                }
+                
+                div {
+                    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+                }
+                
+                @keyframes sound {
+                    0% {
+                        height: 3px;
+                        opacity: .35;
+                    }
+
+                    100% {
+                        height: 15px;
+                        opacity: 0.95;
+                    }
+                }
+
+                {{barCSS|safe}}
+            </style>
+
+            <!-- <div class="currentStatus">{{status}}</div> -->
+
+            <div class="main">
+                <a class="art" href="{}" target="_blank">
+                    <center>
+                        <img src="data:image/png;base64, {{image}}" class="cover" />
+                    </center>
+                </a>
+
+                <div class="content">
+                    <div class="song">{{songName}}</div>
+                    <div class="artist">{{artistName}}</div>
+                    <div id="bars">{{contentBar|safe}}</div>
+                </div>
+            </div>
+
+        </div>
+    </foreignObject>
+</svg>