diff --git a/shaarli-pro/css/custom_views.css b/shaarli-pro/css/custom_views.css
index 5d4b3bc..be58d36 100644
--- a/shaarli-pro/css/custom_views.css
+++ b/shaarli-pro/css/custom_views.css
@@ -39,7 +39,7 @@ body.view-todo #linklist {
 }
 
 .create-task-btn:hover {
-    background-color: var(--primary-dark, #1d4ed8);
+    background-color: var(--primary-hover);
     transform: translateY(-1px);
 }
 
@@ -60,8 +60,8 @@ body.view-todo #linklist {
 }
 
 .todo-list-item.active {
-    background-color: rgba(37, 99, 235, 0.1);
-    color: var(--primary-color, #2563eb);
+    background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+    color: var(--primary);
     font-weight: 600;
     margin: 0;
 }
@@ -113,7 +113,7 @@ body.view-todo #linklist {
 
 .todo-item.completed .todo-title {
     text-decoration: line-through;
-    color: var(--text-light, #94a3b8);
+    color: var(--text-muted);
 }
 
 .todo-meta {
@@ -187,7 +187,7 @@ body.view-archive .content-container {
 }
 
 .icon-btn:hover {
-    background-color: rgba(136, 136, 136, 0.1);
+    background-color: color-mix(in srgb, var(--text-muted) 10%, transparent);
 }
 
 .icon-btn.active {
@@ -304,7 +304,7 @@ body.view-archive .content-container {
 
 .note-modal-pin-toggle:hover,
 .note-modal-pin-toggle.active {
-    background-color: rgba(255, 255, 255, 0.14);
+    background-color: color-mix(in srgb, var(--text-main) 14%, transparent);
 }
 
 .note-body {
@@ -584,11 +584,11 @@ body.view-todo .note-card.todo-card .todo-checklist-preview-wrap {
 }
 
 .todo-item-text:focus {
-    background: rgba(0, 0, 0, 0.06);
+    background: color-mix(in srgb, var(--text-main) 6%, transparent);
 }
 
 [data-theme="dark"] .todo-item-text:focus {
-    background: rgba(255, 255, 255, 0.08);
+    background: color-mix(in srgb, var(--text-main) 8%, transparent);
 }
 
 .todo-item-delete {
@@ -608,11 +608,11 @@ body.view-todo .note-card.todo-card .todo-checklist-preview-wrap {
 
 .todo-item-delete:hover {
     opacity: 1;
-    background: rgba(0, 0, 0, 0.08);
+    background: color-mix(in srgb, var(--text-main) 8%, transparent);
 }
 
 [data-theme="dark"] .todo-item-delete:hover {
-    background: rgba(255, 255, 255, 0.12);
+    background: color-mix(in srgb, var(--text-main) 12%, transparent);
 }
 
 .todo-item-delete i {
diff --git a/shaarli-pro/includes.html b/shaarli-pro/includes.html
index 1597543..b3e524c 100644
--- a/shaarli-pro/includes.html
+++ b/shaarli-pro/includes.html
@@ -34,6 +34,8 @@
 
     if (themeMode === 'dark') {
         document.documentElement.setAttribute('data-theme', 'dark');
+    } else {
+        document.documentElement.setAttribute('data-theme', 'light');
     }
     document.documentElement.setAttribute('data-theme-id', themeId);
     
diff --git a/shaarli-pro/tag.cloud.html b/shaarli-pro/tag.cloud.html
index d799f6e..4bdd82e 100644
--- a/shaarli-pro/tag.cloud.html
+++ b/shaarli-pro/tag.cloud.html
@@ -56,7 +56,8 @@
                     <div id="cloudtag" class="tag-cloud">
                         {loop="$tags"}
                         <span class="tag-item" data-tag="{$key}">
-                            <a href="{$base_path}/?searchtags={$tags_url.$key1}{$tags_separator|urlencode}{$search_tags_url}" style="font-size:{$value.size}em;" class="cloud-tag">{$key}</a>
+                            <a href="{$base_path}/?searchtags={$tags_url.$key1}{$tags_separator|urlencode}{$search_tags_url}"
+                                style="font-size:{$value.size}em;" class="cloud-tag">{$key}</a>
                             <span class="count-badge">{$value.count}</span>
                             {loop="$value.tag_plugin"}
                             {$value}
@@ -90,9 +91,9 @@
                 gap: 0.25rem;
                 margin-bottom: 1.5rem;
                 padding: 0.75rem;
-                background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
+                background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 80%, transparent) 0%, color-mix(in srgb, var(--bg-sidebar) 90%, transparent) 100%);
                 border-radius: 1rem;
-                border: 1px solid rgba(99, 102, 241, 0.2);
+                border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
                 box-shadow:
                     0 4px 20px rgba(0, 0, 0, 0.3),
                     inset 0 1px 0 rgba(255, 255, 255, 0.05);
@@ -113,7 +114,7 @@
                 font-weight: 600;
                 font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
                 letter-spacing: 0.02em;
-                color: rgba(148, 163, 184, 0.8);
+                color: color-mix(in srgb, var(--text-muted) 80%, transparent);
                 background: transparent;
                 border: none;
                 border-radius: 50%;
@@ -133,27 +134,27 @@
             }
 
             .alpha-btn:hover:not(.disabled) {
-                color: #fff;
+                color: var(--text-main);
             }
 
             .alpha-btn:hover:not(.disabled)::before {
-                background: rgba(99, 102, 241, 0.25);
+                background: color-mix(in srgb, var(--primary) 25%, transparent);
             }
 
             .alpha-btn.active {
-                color: #fff;
+                color: var(--text-main);
                 text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
             }
 
             .alpha-btn.active::before {
-                background: linear-gradient(135deg, #5b8def 0%, #6366f1 100%);
+                background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
                 box-shadow:
-                    0 2px 10px rgba(91, 141, 239, 0.5),
-                    0 0 20px rgba(99, 102, 241, 0.3);
+                    0 2px 10px color-mix(in srgb, var(--primary) 50%, transparent),
+                    0 0 20px color-mix(in srgb, var(--primary) 30%, transparent);
             }
 
             .alpha-btn.disabled {
-                color: rgba(100, 116, 139, 0.3);
+                color: color-mix(in srgb, var(--text-muted) 30%, transparent);
                 cursor: not-allowed;
             }
 
@@ -223,9 +224,9 @@
                 justify-content: center;
                 padding: 0.5em 1em;
                 font-weight: 500;
-                color: #e2e8f0;
-                background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
-                border: 1px solid rgba(99, 102, 241, 0.15);
+                color: var(--text-main);
+                background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 90%, transparent) 0%, color-mix(in srgb, var(--bg-sidebar) 95%, transparent) 100%);
+                border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
                 border-radius: 25px;
                 text-decoration: none;
                 white-space: nowrap;
@@ -236,13 +237,13 @@
             }
 
             .cloud-tag:hover {
-                color: #fff;
-                background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(91, 141, 239, 0.2) 100%);
-                border-color: rgba(99, 102, 241, 0.5);
+                color: var(--text-main);
+                background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 30%, transparent) 0%, color-mix(in srgb, var(--primary) 20%, transparent) 100%);
+                border-color: color-mix(in srgb, var(--primary) 50%, transparent);
                 text-decoration: none;
                 box-shadow:
-                    0 4px 16px rgba(99, 102, 241, 0.3),
-                    0 0 20px rgba(99, 102, 241, 0.1),
+                    0 4px 16px color-mix(in srgb, var(--primary) 30%, transparent),
+                    0 0 20px color-mix(in srgb, var(--primary) 10%, transparent),
                     inset 0 1px 0 rgba(255, 255, 255, 0.1);
             }