BareGit
Login
scoundrel-web / Commits / 6142270

Add theme support and image-based card faces.

- Implement theme selection system with Text and SimpleSVG options.
- Generate local SVG assets for 52 poker cards in assets/themes/SimpleSVG.
- Update Card component to render image assets based on the selected theme.
- Persist user theme preference in localStorage.
- Add theme selector UI to the header.
Author: MetroWind <chris.corsair@gmail.com>
Date: Sat Jan 3 15:44:33 2026 -0800
Commit: 614227016f2b3d7e1125d89713dbf2949033b2ba

Changes

diff --git a/assets/themes/SimpleSVG/10c.svg b/assets/themes/SimpleSVG/10c.svg
new file mode 100644
index 0000000..2538030
--- /dev/null
+++ b/assets/themes/SimpleSVG/10c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">10</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">10</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/10d.svg b/assets/themes/SimpleSVG/10d.svg
new file mode 100644
index 0000000..afdfd73
--- /dev/null
+++ b/assets/themes/SimpleSVG/10d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">10</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">10</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/10h.svg b/assets/themes/SimpleSVG/10h.svg
new file mode 100644
index 0000000..f618b15
--- /dev/null
+++ b/assets/themes/SimpleSVG/10h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">10</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">10</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/10s.svg b/assets/themes/SimpleSVG/10s.svg
new file mode 100644
index 0000000..3695366
--- /dev/null
+++ b/assets/themes/SimpleSVG/10s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">10</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">10</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/2c.svg b/assets/themes/SimpleSVG/2c.svg
new file mode 100644
index 0000000..ab594db
--- /dev/null
+++ b/assets/themes/SimpleSVG/2c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">2</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">2</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/2d.svg b/assets/themes/SimpleSVG/2d.svg
new file mode 100644
index 0000000..d999a99
--- /dev/null
+++ b/assets/themes/SimpleSVG/2d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">2</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">2</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/2h.svg b/assets/themes/SimpleSVG/2h.svg
new file mode 100644
index 0000000..7872396
--- /dev/null
+++ b/assets/themes/SimpleSVG/2h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">2</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">2</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/2s.svg b/assets/themes/SimpleSVG/2s.svg
new file mode 100644
index 0000000..976cdb3
--- /dev/null
+++ b/assets/themes/SimpleSVG/2s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">2</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">2</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/3c.svg b/assets/themes/SimpleSVG/3c.svg
new file mode 100644
index 0000000..57ff859
--- /dev/null
+++ b/assets/themes/SimpleSVG/3c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">3</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">3</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/3d.svg b/assets/themes/SimpleSVG/3d.svg
new file mode 100644
index 0000000..24ef540
--- /dev/null
+++ b/assets/themes/SimpleSVG/3d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">3</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">3</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/3h.svg b/assets/themes/SimpleSVG/3h.svg
new file mode 100644
index 0000000..ca40f0e
--- /dev/null
+++ b/assets/themes/SimpleSVG/3h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">3</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">3</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/3s.svg b/assets/themes/SimpleSVG/3s.svg
new file mode 100644
index 0000000..90344fa
--- /dev/null
+++ b/assets/themes/SimpleSVG/3s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">3</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">3</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/4c.svg b/assets/themes/SimpleSVG/4c.svg
new file mode 100644
index 0000000..3b16ca6
--- /dev/null
+++ b/assets/themes/SimpleSVG/4c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">4</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">4</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/4d.svg b/assets/themes/SimpleSVG/4d.svg
new file mode 100644
index 0000000..b167b65
--- /dev/null
+++ b/assets/themes/SimpleSVG/4d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">4</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">4</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/4h.svg b/assets/themes/SimpleSVG/4h.svg
new file mode 100644
index 0000000..a1bc7f6
--- /dev/null
+++ b/assets/themes/SimpleSVG/4h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">4</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">4</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/4s.svg b/assets/themes/SimpleSVG/4s.svg
new file mode 100644
index 0000000..6d467a5
--- /dev/null
+++ b/assets/themes/SimpleSVG/4s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">4</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">4</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/5c.svg b/assets/themes/SimpleSVG/5c.svg
new file mode 100644
index 0000000..47b18bb
--- /dev/null
+++ b/assets/themes/SimpleSVG/5c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">5</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">5</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/5d.svg b/assets/themes/SimpleSVG/5d.svg
new file mode 100644
index 0000000..4c995ad
--- /dev/null
+++ b/assets/themes/SimpleSVG/5d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">5</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">5</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/5h.svg b/assets/themes/SimpleSVG/5h.svg
new file mode 100644
index 0000000..a1fd859
--- /dev/null
+++ b/assets/themes/SimpleSVG/5h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">5</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">5</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/5s.svg b/assets/themes/SimpleSVG/5s.svg
new file mode 100644
index 0000000..dcd05df
--- /dev/null
+++ b/assets/themes/SimpleSVG/5s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">5</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">5</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/6c.svg b/assets/themes/SimpleSVG/6c.svg
new file mode 100644
index 0000000..dffaef9
--- /dev/null
+++ b/assets/themes/SimpleSVG/6c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">6</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">6</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/6d.svg b/assets/themes/SimpleSVG/6d.svg
new file mode 100644
index 0000000..418b6e7
--- /dev/null
+++ b/assets/themes/SimpleSVG/6d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">6</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">6</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/6h.svg b/assets/themes/SimpleSVG/6h.svg
new file mode 100644
index 0000000..43802f2
--- /dev/null
+++ b/assets/themes/SimpleSVG/6h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">6</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">6</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/6s.svg b/assets/themes/SimpleSVG/6s.svg
new file mode 100644
index 0000000..09302cd
--- /dev/null
+++ b/assets/themes/SimpleSVG/6s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">6</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">6</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/7c.svg b/assets/themes/SimpleSVG/7c.svg
new file mode 100644
index 0000000..9d9efba
--- /dev/null
+++ b/assets/themes/SimpleSVG/7c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">7</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">7</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/7d.svg b/assets/themes/SimpleSVG/7d.svg
new file mode 100644
index 0000000..1fa14ab
--- /dev/null
+++ b/assets/themes/SimpleSVG/7d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">7</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">7</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/7h.svg b/assets/themes/SimpleSVG/7h.svg
new file mode 100644
index 0000000..e3a3aa3
--- /dev/null
+++ b/assets/themes/SimpleSVG/7h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">7</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">7</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/7s.svg b/assets/themes/SimpleSVG/7s.svg
new file mode 100644
index 0000000..687b318
--- /dev/null
+++ b/assets/themes/SimpleSVG/7s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">7</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">7</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/8c.svg b/assets/themes/SimpleSVG/8c.svg
new file mode 100644
index 0000000..6e34c46
--- /dev/null
+++ b/assets/themes/SimpleSVG/8c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">8</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">8</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/8d.svg b/assets/themes/SimpleSVG/8d.svg
new file mode 100644
index 0000000..7edab4c
--- /dev/null
+++ b/assets/themes/SimpleSVG/8d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">8</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">8</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/8h.svg b/assets/themes/SimpleSVG/8h.svg
new file mode 100644
index 0000000..d6e4715
--- /dev/null
+++ b/assets/themes/SimpleSVG/8h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">8</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">8</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/8s.svg b/assets/themes/SimpleSVG/8s.svg
new file mode 100644
index 0000000..34be6ee
--- /dev/null
+++ b/assets/themes/SimpleSVG/8s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">8</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">8</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/9c.svg b/assets/themes/SimpleSVG/9c.svg
new file mode 100644
index 0000000..885a268
--- /dev/null
+++ b/assets/themes/SimpleSVG/9c.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">9</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">9</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/9d.svg b/assets/themes/SimpleSVG/9d.svg
new file mode 100644
index 0000000..136e593
--- /dev/null
+++ b/assets/themes/SimpleSVG/9d.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">9</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">9</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/9h.svg b/assets/themes/SimpleSVG/9h.svg
new file mode 100644
index 0000000..0e56ed4
--- /dev/null
+++ b/assets/themes/SimpleSVG/9h.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">9</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">9</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/9s.svg b/assets/themes/SimpleSVG/9s.svg
new file mode 100644
index 0000000..f54a6a0
--- /dev/null
+++ b/assets/themes/SimpleSVG/9s.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">9</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">9</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/ac.svg b/assets/themes/SimpleSVG/ac.svg
new file mode 100644
index 0000000..39224a7
--- /dev/null
+++ b/assets/themes/SimpleSVG/ac.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">A</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">A</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/ad.svg b/assets/themes/SimpleSVG/ad.svg
new file mode 100644
index 0000000..72d0b00
--- /dev/null
+++ b/assets/themes/SimpleSVG/ad.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">A</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">A</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/ah.svg b/assets/themes/SimpleSVG/ah.svg
new file mode 100644
index 0000000..7dc07ae
--- /dev/null
+++ b/assets/themes/SimpleSVG/ah.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">A</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">A</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/as.svg b/assets/themes/SimpleSVG/as.svg
new file mode 100644
index 0000000..8688792
--- /dev/null
+++ b/assets/themes/SimpleSVG/as.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">A</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">A</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/jc.svg b/assets/themes/SimpleSVG/jc.svg
new file mode 100644
index 0000000..f25317d
--- /dev/null
+++ b/assets/themes/SimpleSVG/jc.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">J</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">J</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/jd.svg b/assets/themes/SimpleSVG/jd.svg
new file mode 100644
index 0000000..705208f
--- /dev/null
+++ b/assets/themes/SimpleSVG/jd.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">J</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">J</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/jh.svg b/assets/themes/SimpleSVG/jh.svg
new file mode 100644
index 0000000..2df9982
--- /dev/null
+++ b/assets/themes/SimpleSVG/jh.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">J</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">J</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/js.svg b/assets/themes/SimpleSVG/js.svg
new file mode 100644
index 0000000..bdfbba0
--- /dev/null
+++ b/assets/themes/SimpleSVG/js.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">J</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">J</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/kc.svg b/assets/themes/SimpleSVG/kc.svg
new file mode 100644
index 0000000..d9500c5
--- /dev/null
+++ b/assets/themes/SimpleSVG/kc.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">K</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">K</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/kd.svg b/assets/themes/SimpleSVG/kd.svg
new file mode 100644
index 0000000..6ea6332
--- /dev/null
+++ b/assets/themes/SimpleSVG/kd.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">K</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">K</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/kh.svg b/assets/themes/SimpleSVG/kh.svg
new file mode 100644
index 0000000..247956b
--- /dev/null
+++ b/assets/themes/SimpleSVG/kh.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">K</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">K</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/ks.svg b/assets/themes/SimpleSVG/ks.svg
new file mode 100644
index 0000000..3947030
--- /dev/null
+++ b/assets/themes/SimpleSVG/ks.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">K</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">K</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/qc.svg b/assets/themes/SimpleSVG/qc.svg
new file mode 100644
index 0000000..7639ce8
--- /dev/null
+++ b/assets/themes/SimpleSVG/qc.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">Q</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♣</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">Q</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♣</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/qd.svg b/assets/themes/SimpleSVG/qd.svg
new file mode 100644
index 0000000..5288bfb
--- /dev/null
+++ b/assets/themes/SimpleSVG/qd.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">Q</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♦</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">Q</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♦</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/qh.svg b/assets/themes/SimpleSVG/qh.svg
new file mode 100644
index 0000000..b574b00
--- /dev/null
+++ b/assets/themes/SimpleSVG/qh.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#e74c3c" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">Q</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#e74c3c" text-anchor="middle" dominant-baseline="central">♥</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#e74c3c" font-weight="bold">Q</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#e74c3c">♥</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/themes/SimpleSVG/qs.svg b/assets/themes/SimpleSVG/qs.svg
new file mode 100644
index 0000000..39e5fae
--- /dev/null
+++ b/assets/themes/SimpleSVG/qs.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 168">
+    <rect width="100%" height="100%" rx="10" fill="white" stroke="#2c3e50" stroke-width="2"/>
+    <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">Q</text>
+    <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    <text x="60" y="100" font-family="Arial" font-size="60" fill="#2c3e50" text-anchor="middle" dominant-baseline="central">♠</text>
+    <g transform="rotate(180, 110, 163)">
+        <text x="10" y="25" font-family="Arial" font-size="20" fill="#2c3e50" font-weight="bold">Q</text>
+        <text x="10" y="45" font-family="Arial" font-size="20" fill="#2c3e50">♠</text>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/main.js b/main.js
index 897e987..9bf3994 100644
--- a/main.js
+++ b/main.js
@@ -12,6 +12,11 @@ const SUITS = {
 
 const RANKS = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
 
+const THEMES = {
+    'Text': { label: 'Classic (Text)' },
+    'SimpleSVG': { label: 'Simple SVG', ext: 'svg', path: 'assets/themes/SimpleSVG' }
+};
+
 // --- Helpers ---
 const getCardValue = (rank) => {
     if (rank === 'A') return 14;
@@ -52,7 +57,7 @@ const shuffleDeck = (deck) => {
 
 // --- Components ---
 
-const Card = ({ card, onClick, is_disabled, onAttack, can_use_weapon }) => {
+const Card = ({ card, onClick, is_disabled, onAttack, can_use_weapon, themeKey }) => {
     if (!card) return html`<div class="card-slot-empty"></div>`;
 
     const handleWeaponClick = (e) => {
@@ -65,19 +70,33 @@ const Card = ({ card, onClick, is_disabled, onAttack, can_use_weapon }) => {
         onAttack(card, false);
     };
 
+    const theme = THEMES[themeKey];
+    
+    const renderCardContent = () => {
+        if (themeKey === 'Text') {
+            return html`
+                <div class="card-corner top-left">
+                    <span>${card.rank}</span>
+                    <span>${card.suit}</span>
+                </div>
+                <div class="card-center">
+                    ${card.suit}
+                </div>
+                <div class="card-corner bottom-right">
+                    <span>${card.rank}</span>
+                    <span>${card.suit}</span>
+                </div>
+            `;
+        } else {
+            const code = `${card.rank}${card.suit_key[0]}`.toLowerCase();
+            const src = `${theme.path}/${code}.${theme.ext}`;
+            return html`<img src="${src}" class="card-image" alt="${card.rank}${card.suit}" />`;
+        }
+    };
+
     return html`
         <div class="card ${card.color} ${is_disabled ? 'disabled' : ''}" onClick=${() => !is_disabled && onClick(card)}>
-            <div class="card-corner top-left">
-                <span>${card.rank}</span>
-                <span>${card.suit}</span>
-            </div>
-            <div class="card-center">
-                ${card.suit}
-            </div>
-            <div class="card-corner bottom-right">
-                <span>${card.rank}</span>
-                <span>${card.suit}</span>
-            </div>
+            ${renderCardContent()}
             ${card.type === 'MONSTER' && !is_disabled ? html`
                 <div class="card-overlay">
                     <button class="overlay-btn" title="Attack with Weapon" disabled=${!can_use_weapon} onClick=${handleWeaponClick}>
@@ -92,7 +111,7 @@ const Card = ({ card, onClick, is_disabled, onAttack, can_use_weapon }) => {
     `;
 };
 
-const WeaponSlot = ({ weapon, last_enemy_value }) => {
+const WeaponSlot = ({ weapon, last_enemy_value, themeKey }) => {
     if (!weapon) {
         return html`
             <div class="weapon-slot"><span>No Weapon</span></div>
@@ -105,7 +124,7 @@ const WeaponSlot = ({ weapon, last_enemy_value }) => {
 
     const max_kill_msg = last_enemy_value === Infinity ? "Any" : `< ${last_enemy_value}`;
     return html`
-        <div class="weapon-slot"><${Card} card=${weapon} is_disabled=${true} /></div>
+        <div class="weapon-slot"><${Card} card=${weapon} is_disabled=${true} themeKey=${themeKey} /></div>
         <div class="weapon-info">
             <p><strong>Equipped: ${weapon.rank}${weapon.suit}</strong></p>
             <p>Power: ${weapon.value} | Max Kill: ${max_kill_msg}</p>
@@ -143,11 +162,22 @@ const INITIAL_STATE = {
     won: false,
     fled_last_turn: false,
     msg: "Welcome to the dungeon.",
+    theme: 'Text',
     history: []
 };
 
 const App = () => {
-    const [state, setState] = useState(INITIAL_STATE);
+    const [state, setState] = useState(() => {
+        const saved_theme = localStorage.getItem('scoundrel_theme');
+        return {
+            ...INITIAL_STATE,
+            theme: (saved_theme && THEMES[saved_theme]) ? saved_theme : 'Text'
+        };
+    });
+
+    useEffect(() => {
+        localStorage.setItem('scoundrel_theme', state.theme);
+    }, [state.theme]);
 
     useEffect(() => { startGame(); }, []);
 
@@ -283,13 +313,16 @@ const App = () => {
             <div class="stats-bar">
                 <span class="hp-bar">HP: ${state.hp} / ${state.max_hp}</span>
                 <span class="deck-count">Deck: ${state.deck.length}</span>
+                <select class="theme-selector" value=${state.theme} onChange=${(e) => setState({...state, theme: e.target.value})}>
+                    ${Object.entries(THEMES).map(([key, theme]) => html`<option value=${key}>${theme.label}</option>`)}
+                </select>
             </div>
         </header>
 
         <div class="game-board">
             <div class="weapon-area">
                 <div style="display: flex; gap: 20px; align-items: center;">
-                    <${WeaponSlot} weapon=${state.weapon} last_enemy_value=${state.last_enemy_value} />
+                    <${WeaponSlot} weapon=${state.weapon} last_enemy_value=${state.last_enemy_value} themeKey=${state.theme} />
                 </div>
                 <div class="defeated-container">
                     <strong>Defeated:</strong>
@@ -309,6 +342,7 @@ const App = () => {
                         onClick=${handleCardClick} 
                         onAttack=${resolveCard}
                         can_use_weapon=${card && state.weapon && card.value < state.last_enemy_value}
+                        themeKey=${state.theme}
                     />`)}
                 </div>
             </div>
diff --git a/style.css b/style.css
index 9f252c4..943fe41 100644
--- a/style.css
+++ b/style.css
@@ -51,6 +51,20 @@ h1 { margin: 0; font-size: 1.5rem; }
 .hp-bar { color: var(--accent-red); }
 .deck-count { color: var(--highlight); }
 
+.theme-selector {
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    padding: 2px 5px;
+    font-size: 0.9rem;
+    cursor: pointer;
+}
+
+.theme-selector option {
+    background: var(--bg-color);
+}
+
 /* Game Area */
 .game-board {
     display: flex;
@@ -185,6 +199,13 @@ h1 { margin: 0; font-size: 1.5rem; }
 .card.red { color: var(--accent-red); }
 .card.black { color: var(--accent-black); }
 
+.card-image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: var(--card-radius);
+}
+
 .card-corner {
     position: absolute;
     font-size: 1.2rem;