Done

assets/profile.css

@@ -4,19 +4,16 @@
   --color-primary: #E3C23D;
   --color-secondary: #5D5535;
   --color-bar-background: #303030;
-}
-
-.vscode-dark1 {
-  --color-language: #ddca7e;  
-  --color-primary: #dcc97e;
-  --color-secondary: #318245;
-  --color-bar-background: #303030;
+  --color-bar-border: #424242;
 }
 
 /* Light theme color palette */
 .vscode-light {
-  --color-language: blue;
-  --color-primary: #00ca7e;
+  --color-language: #1B2334;  
+  --color-primary: #5D78B3;
+  --color-secondary: #354567;
+  --color-bar-background: #939DB3;
+  --color-bar-border: #697080;
 }
 
 .profile {
@@ -43,13 +40,11 @@ sup {
 .language-progress .tooltiptext {
   visibility: hidden;
   width: 120px;
-  background-color: var(--color-primary);
-  color: black;
+  background-color: var(--color-bar-border);
+  color: var(--color-language);
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
-
-  /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
@@ -112,9 +107,7 @@ circle.oldxp {
   background-color: var(--color-bar-background);
   border-radius: 4px;
   border: solid 1px; 
-  border-color: #424242;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+  border-color: var(--color-bar-border);
 }
 
 .progress-bar {
@@ -123,11 +116,8 @@ circle.oldxp {
   height: 100%;
   font-size: 12px;
   line-height: 20px;  
-  text-align: center;
-  
+  text-align: center;  
   background-color: var(--color-secondary);
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
 }                  
 
 .progress-bar-new {

assets/profile.html.eex

@@ -19,7 +19,7 @@
         <span class="tooltiptext">
           <strong><%=languages[l].xp %> xp</strong>        
           <% if( languages[l].new_xp > 0 ) { %>
-            <sup style="color:black">+<%= languages[l].new_xp %></sup>
+            <sup>+<%= languages[l].new_xp %></sup>
           <% } %>        
         </span>
         <svg viewBox="0 0 100 100">