added working settings page

static/css/style-settings.css

@@ -0,0 +1,62 @@
+
+/* settings.html */
+
+.theme-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+    width: 48%;
+    margin-bottom: 10px;
+    height: 150px;
+    position: relative; /* Make it possible to position the tooltip */
+}
+
+.theme-link img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 4px;
+    border: 1px solid var(--snip-border);
+    transition: border-color 0.3s ease;
+}
+
+/* .theme-link:hover img {
+    border-color: var(--highlight); 
+} */
+
+.theme-tooltip {
+    display: none; /* Hidden by default */
+    position: absolute;
+    bottom: 10px; /* Position at the bottom of the image */
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
+    color: #fff;
+    padding: 5px 10px;
+    border-radius: 4px;
+    font-size: 14px;
+    white-space: nowrap;
+}
+
+.theme-link:hover .theme-tooltip {
+    display: block; /* Show tooltip on hover */
+}
+
+.themes-settings-menu {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background: var(--snip-background);
+    color: var(--fg);
+    border-radius: 4px;
+    padding: 10px;
+    gap: 10px;
+}
+
+@media (max-width: 600px) {
+    .theme-link {
+        width: 100%;
+    }
+}
+
+/* --- */