updated to include themes

This commit is contained in:
2026-06-01 10:59:20 +02:00
parent 3f54c13a1b
commit 3629c8633c
67 changed files with 2273 additions and 1 deletions
@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#282828"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#1b1b1b"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#32302f"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ddc7a1">Gruvbox Material Medium (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#45403d"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#ddc7a1">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#a89984">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#a8b665"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#1b1b1b">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#d7a657"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#32302f"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#282828"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#32302f"/>
<circle cx="148" cy="166" r="9" fill="#e96962"/>
<circle cx="172" cy="166" r="9" fill="#e68a4e"/>
<circle cx="196" cy="166" r="9" fill="#d7a657"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#3b4439" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#1d2021"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#141617"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#282828"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ddc7a1">Gruvbox Material Hard (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#3c3836"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#ddc7a1">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#a89984">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#a8b665"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#141617">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#d7a657"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#282828"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#1d2021"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#282828"/>
<circle cx="148" cy="166" r="9" fill="#e96962"/>
<circle cx="172" cy="166" r="9" fill="#e68a4e"/>
<circle cx="196" cy="166" r="9" fill="#d7a657"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#333e34" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#f9f5d7"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#f3eac7"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#f5edca"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#4e3829">Gruvbox Material Hard (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#f2e5bc"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#4e3829">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#7c6f64">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#6b782e"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#f3eac7">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#b37109"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#f5edca"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#f9f5d7"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#f5edca"/>
<circle cx="148" cy="166" r="9" fill="#c04a4a"/>
<circle cx="172" cy="166" r="9" fill="#c25e0a"/>
<circle cx="196" cy="166" r="9" fill="#b37109"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#dde5c2" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#1d2021"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#141617"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#282828"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ddc7a1">Gruvbox Material Hard (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#3c3836"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#ddc7a1">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#a89984">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#a8b665"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#141617">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#d7a657"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#282828"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#1d2021"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#282828"/>
<circle cx="148" cy="166" r="9" fill="#e96962"/>
<circle cx="172" cy="166" r="9" fill="#e68a4e"/>
<circle cx="196" cy="166" r="9" fill="#d7a657"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#333e34" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#f9f5d7"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#f3eac7"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#f5edca"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#4e3829">Gruvbox Material Hard (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#f2e5bc"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#4e3829">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#7c6f64">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#6b782e"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#f3eac7">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#b37109"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#f5edca"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#f9f5d7"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#f5edca"/>
<circle cx="148" cy="166" r="9" fill="#c04a4a"/>
<circle cx="172" cy="166" r="9" fill="#c25e0a"/>
<circle cx="196" cy="166" r="9" fill="#b37109"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#dde5c2" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#fbf1c7"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#f2e5bc"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#f4e8be"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#4e3829">Gruvbox Material Medium (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#eee0b7"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#4e3829">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#7c6f64">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#6b782e"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#f2e5bc">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#b37109"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#f4e8be"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#fbf1c7"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#f4e8be"/>
<circle cx="148" cy="166" r="9" fill="#c04a4a"/>
<circle cx="172" cy="166" r="9" fill="#c25e0a"/>
<circle cx="196" cy="166" r="9" fill="#b37109"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#dee2b6" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#282828"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#1b1b1b"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#32302f"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ddc7a1">Gruvbox Material Medium (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#45403d"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#ddc7a1">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#a89984">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#a8b665"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#1b1b1b">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#d7a657"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#32302f"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#282828"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#32302f"/>
<circle cx="148" cy="166" r="9" fill="#e96962"/>
<circle cx="172" cy="166" r="9" fill="#e68a4e"/>
<circle cx="196" cy="166" r="9" fill="#d7a657"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#3b4439" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#fbf1c7"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#f2e5bc"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#f4e8be"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#4e3829">Gruvbox Material Medium (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#eee0b7"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#4e3829">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#7c6f64">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#6b782e"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#f2e5bc">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#b37109"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#f4e8be"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#fbf1c7"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#f4e8be"/>
<circle cx="148" cy="166" r="9" fill="#c04a4a"/>
<circle cx="172" cy="166" r="9" fill="#c25e0a"/>
<circle cx="196" cy="166" r="9" fill="#b37109"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#dee2b6" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#282828"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#1b1b1b"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#32302f"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ddc7a1">Gruvbox Material Medium (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#45403d"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#ddc7a1">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#a89984">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#a8b665"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#1b1b1b">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#d7a657"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#32302f"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#282828"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#32302f"/>
<circle cx="148" cy="166" r="9" fill="#e96962"/>
<circle cx="172" cy="166" r="9" fill="#e68a4e"/>
<circle cx="196" cy="166" r="9" fill="#d7a657"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#3b4439" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#fbf1c7"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#f2e5bc"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#f4e8be"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#4e3829">Gruvbox Material Medium (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#eee0b7"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#4e3829">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#7c6f64">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#6b782e"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#f2e5bc">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#b37109"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#f4e8be"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#fbf1c7"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#f4e8be"/>
<circle cx="148" cy="166" r="9" fill="#c04a4a"/>
<circle cx="172" cy="166" r="9" fill="#c25e0a"/>
<circle cx="196" cy="166" r="9" fill="#b37109"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#dee2b6" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#32302f"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#252423"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#3c3836"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ddc7a1">Gruvbox Material Soft (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#504945"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#ddc7a1">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#a89984">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#a8b665"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#252423">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#d7a657"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#3c3836"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#32302f"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#3c3836"/>
<circle cx="148" cy="166" r="9" fill="#e96962"/>
<circle cx="172" cy="166" r="9" fill="#e68a4e"/>
<circle cx="196" cy="166" r="9" fill="#d7a657"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#424a3e" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#f2e5bc"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#ebdbb2"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#eddeb5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#4e3829">Gruvbox Material Soft (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#e6d5ae"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#4e3829">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#7c6f64">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#6b782e"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ebdbb2">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#b37109"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#eddeb5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#f2e5bc"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#eddeb5"/>
<circle cx="148" cy="166" r="9" fill="#c04a4a"/>
<circle cx="172" cy="166" r="9" fill="#c25e0a"/>
<circle cx="196" cy="166" r="9" fill="#b37109"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#d7d9ae" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" width="484" height="240" viewBox="0 0 484 240">
<g transform="translate(0, 0)">
<rect width="240" height="240" fill="#32302f"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#252423"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#3c3836"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#ddc7a1">Gruvbox Material Soft (dark)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#504945"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#ddc7a1">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#a89984">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#a8b665"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#252423">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#d7a657"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#3c3836"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#32302f"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#3c3836"/>
<circle cx="148" cy="166" r="9" fill="#e96962"/>
<circle cx="172" cy="166" r="9" fill="#e68a4e"/>
<circle cx="196" cy="166" r="9" fill="#d7a657"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#424a3e" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ddc7a1">Surface Tint Overlay</text>
</g>
<rect x="240" y="0" width="4" height="240" fill="#888"/>
<g transform="translate(244, 0)">
<rect width="240" height="240" fill="#f2e5bc"/>
<rect x="8" y="8" width="224" height="224" rx="8" fill="#ebdbb2"/>
<rect x="16" y="16" width="208" height="36" rx="6" fill="#eddeb5"/>
<text x="28" y="40" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#4e3829">Gruvbox Material Soft (light)</text>
<rect x="16" y="60" width="208" height="72" rx="6" fill="#e6d5ae"/>
<text x="28" y="82" font-family="system-ui, sans-serif" font-size="11" fill="#4e3829">Surface Text</text>
<text x="28" y="98" font-family="system-ui, sans-serif" font-size="10" fill="#7c6f64">Outline color</text>
<rect x="28" y="108" width="72" height="18" rx="9" fill="#6b782e"/>
<text x="64" y="120" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#ebdbb2">Primary</text>
<rect x="108" y="108" width="48" height="18" rx="4" fill="#b37109"/>
<rect x="16" y="140" width="100" height="52" rx="6" fill="#eddeb5"/>
<rect x="24" y="148" width="84" height="36" rx="4" fill="#f2e5bc"/>
<text x="66" y="170" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Background</text>
<rect x="124" y="140" width="100" height="52" rx="6" fill="#eddeb5"/>
<circle cx="148" cy="166" r="9" fill="#c04a4a"/>
<circle cx="172" cy="166" r="9" fill="#c25e0a"/>
<circle cx="196" cy="166" r="9" fill="#b37109"/>
<rect x="16" y="200" width="208" height="24" rx="4" fill="#d7d9ae" opacity="0.15"/>
<text x="120" y="216" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle" fill="#4e3829">Surface Tint Overlay</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@@ -0,0 +1,109 @@
{
"id": "gruvboxMaterial",
"name": "Gruvbox Material",
"version": "1.0.0",
"author": "fontaine",
"description": "Material version of the popular Gruvbox theme with retro groove colors",
"dark": {
"primary": "#a8b665",
"primaryContainer": "#555c34",
"secondary": "#d7a657",
"surfaceText": "#ddc7a1",
"surfaceVariantText": "#d4be98",
"backgroundText": "#ddc7a1",
"outline": "#a89984",
"error": "#e96962",
"warning": "#e68a4e",
"info": "#d7a657"
},
"light": {
"primary": "#6b782e",
"primaryContainer": "#6f8352",
"secondary": "#b37109",
"surfaceText": "#4e3829",
"surfaceVariantText": "#644735",
"backgroundText": "#4e3829",
"outline": "#7c6f64",
"error": "#c04a4a",
"warning": "#c25e0a",
"info": "#b37109"
},
"variants": {
"default": "medium",
"options": [
{
"id": "hard",
"name": "Hard",
"dark": {
"primaryText": "#141617",
"surface": "#141617",
"surfaceVariant": "#1d2021",
"surfaceTint": "#333e34",
"background": "#1d2021",
"surfaceContainer": "#282828",
"surfaceContainerHigh": "#3c3836",
"surfaceContainerHighest": "#504945"
},
"light": {
"primaryText": "#f3eac7",
"surface": "#f3eac7",
"surfaceVariant": "#f9f5d7",
"surfaceTint": "#dde5c2",
"background": "#f9f5d7",
"surfaceContainer": "#f5edca",
"surfaceContainerHigh": "#f2e5bc",
"surfaceContainerHighest": "#ebdbb2"
}
},
{
"id": "medium",
"name": "Medium",
"dark": {
"primaryText": "#1b1b1b",
"surface": "#1b1b1b",
"surfaceVariant": "#282828",
"surfaceTint": "#3b4439",
"background": "#282828",
"surfaceContainer": "#32302f",
"surfaceContainerHigh": "#45403d",
"surfaceContainerHighest": "#5a524c"
},
"light": {
"primaryText": "#f2e5bc",
"surface": "#f2e5bc",
"surfaceVariant": "#fbf1c7",
"surfaceTint": "#dee2b6",
"background": "#fbf1c7",
"surfaceContainer": "#f4e8be",
"surfaceContainerHigh": "#eee0b7",
"surfaceContainerHighest": "#ddccab"
}
},
{
"id": "soft",
"name": "Soft",
"dark": {
"primaryText": "#252423",
"surface": "#252423",
"surfaceVariant": "#32302f",
"surfaceTint": "#424a3e",
"background": "#32302f",
"surfaceContainer": "#3c3836",
"surfaceContainerHigh": "#504945",
"surfaceContainerHighest": "#665c54"
},
"light": {
"primaryText": "#ebdbb2",
"surface": "#ebdbb2",
"surfaceVariant": "#f2e5bc",
"surfaceTint": "#d7d9ae",
"background": "#f2e5bc",
"surfaceContainer": "#eddeb5",
"surfaceContainerHigh": "#e6d5ae",
"surfaceContainerHighest": "#d5c4a1"
}
}
]
},
"sourceDir": "gruvbox-material"
}