Mes coses

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -50,8 +50,8 @@ const changeLocale = (lang) => {
 
 <style lang="scss" scoped>
 .menu-button {
-  background: #161b22;
-  color: white;
+  background: var(--color-background-fore);
+  color: var(--color-text);
   font-size: 1em;
   border: 1px solid #30363d;
   padding: 8px 12px;
@@ -69,7 +69,7 @@ z-index: 10;
   top: 50px;
   right: 110px;
   margin-right: 10px;
-  background: #161b22;
+  background: var(--color-background-fore);
   border: 1px solid #30363d;
   border-radius: 8px;
   padding: 8px 0;
@@ -79,14 +79,18 @@ z-index: 10;
 /* Items */
 .menu-item {
   padding: 8px 16px;
-  color: #c9d1d9;
+  color: var(--color-text);
   cursor: pointer;
   display: flex;
   gap: 10px;
   align-items: center;
 
   &.active {
-    background: #30363d;
+    background: var(--color-selected);
   }
 }
+
+.menu-item:hover {
+  background: var(--color-hover);
+}
 </style>

frontend/app/components/parts/site_options/ThemeSelector.vue

@@ -64,10 +64,10 @@ onUnmounted(() => {
                     <div class="circle katlum"></div>
                     {{ $t('themes.accents.katlum') }}
                 </div>
-                <!--
                 <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">
                     <div class="circle solus"></div>Solus
                 </div>
+                <!--
                 <div :class="{'menu-item': true, 'active': accent === 'silang' }" @click="setAccent('silang')">
                     <div class="circle silang"></div>Silang
                 </div>
@@ -136,8 +136,8 @@ onUnmounted(() => {
 
 /* Button */
 .menu-button {
-  background: #161b22;
-  color: white;
+  background: var(--color-background-fore);
+  color: var(--color-text);
   font-size: 1em;
   border: 1px solid #30363d;
   padding: 8px 12px;
@@ -154,7 +154,7 @@ z-index: 10;
   right: 0;
   margin-right: 10px;
   width: 320px;
-  background: #161b22;
+  background: var(--color-background-fore);
   border: 1px solid #30363d;
   border-radius: 8px;
   padding: 8px 0;
@@ -169,7 +169,7 @@ z-index: 10;
 /* Items */
 .menu-item {
   padding: 8px 16px;
-  color: #c9d1d9;
+  color: var(--color-text);
   cursor: pointer;
   display: flex;
   border-radius: 5px;
@@ -178,13 +178,13 @@ z-index: 10;
   align-items: center;
 
   &.active {
-    background: #30363d;
+    background: var(--color-selected);
   }
 }
 
 .menu-header {
   padding: 8px 16px;
-  color: #c9d1d9;
+  color: var(--color-text);
   display: flex;
   gap: 10px;
   align-items: center;
@@ -193,7 +193,7 @@ z-index: 10;
 }
 
 .menu-item:hover {
-  background: #21262d;
+  background: var(--color-hover);
 }
 
 /* Divider */