diff --git a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml
index 8d11b7f8b040..c9af9cb661b9 100644
--- a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml
+++ b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-macro/xwiki-platform-notifications-macro-ui/src/main/resources/XWiki/Notifications/Code/Macro/NotificationsMacro.xml
@@ -772,7 +772,7 @@ require(['jquery', 'XWikiAsyncNotificationsMacro', 'xwiki-events-bridge'], funct
       <cache>long</cache>
     </property>
     <property>
-      <code>#template('colorThemeInit.vm')
+      <code>
 /***********************************************
  * Notification Container
  ***********************************************/
@@ -914,7 +914,7 @@ require(['jquery', 'XWikiAsyncNotificationsMacro', 'xwiki-events-bridge'], funct
       <name>CSS</name>
     </property>
     <property>
-      <parse>1</parse>
+      <parse>0</parse>
     </property>
     <property>
       <use>currentPage</use>
diff --git a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml
index bafbf5f66d04..e18f2d98a72b 100644
--- a/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml
+++ b/xwiki-platform-core/xwiki-platform-notifications/xwiki-platform-notifications-ui/src/main/resources/XWiki/Notifications/Code/NotificationsDisplayerUIX.xml
@@ -553,7 +553,7 @@ Get the actual notifications.
       <cache>long</cache>
     </property>
     <property>
-      <code>#template('colorThemeInit.vm')
+      <code>
 /***********************************************
  * Notifications Header
  ***********************************************/
@@ -644,7 +644,7 @@ Get the actual notifications.
       <name>LESS</name>
     </property>
     <property>
-      <parse>1</parse>
+      <parse>0</parse>
     </property>
     <property>
       <use>currentPage</use>
@@ -784,8 +784,13 @@ Get the actual notifications.
   #if ("$!xcontext.userReference" != '' &amp;&amp; $services.notification.isEnabled())
     #set ($discard = $xwiki.jsx.use('XWiki.Notifications.Code.Macro.NotificationsMacro'))
     #set ($discard = $xwiki.jsx.use('XWiki.Notifications.Code.NotificationsDisplayerUIX'))
-    #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.Macro.NotificationsMacro'))
-    #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.NotificationsDisplayerUIX'))
+    ## We make sure to use the color theme of the document where this UIX is used.
+    #set ($colorTheme = $xwiki.getUserPreference('colorTheme'))
+    #if ("$!colorTheme" != '')
+    #set ($colorTheme = $services.model.resolveDocument($colorTheme, $doc.documentReference))
+    #end
+    #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.Macro.NotificationsMacro', {'colorTheme': $colorTheme}))
+    #set ($discard = $xwiki.ssx.use('XWiki.Notifications.Code.NotificationsDisplayerUIX', {'colorTheme': $colorTheme}))
     {{html clean="false"}} ## We need the clean false to avoid getting a supplementary ul element.
     &lt;li class="notification-uix loading"&gt;&lt;/li&gt;
     {{/html}}
diff --git a/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml b/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml
index 0194b812cf67..b2152f963dfd 100644
--- a/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml
+++ b/xwiki-platform-core/xwiki-platform-panels/xwiki-platform-panels-ui/src/main/resources/Panels/Applications.xml
@@ -164,6 +164,7 @@
     </property>
     <property>
       <async_context>
+        <value>doc.reference</value>
         <value>icon.theme</value>
         <value>locale</value>
         <value>request.wiki</value>
@@ -226,7 +227,12 @@
 {{/velocity}}
 
 {{velocity}}
-#set ($discard = $xwiki.ssx.use('Panels.Applications'))
+## We make sure to use the color theme of the document where this UIX is used.
+#set ($colorTheme = $xwiki.getUserPreference('colorTheme'))
+#if ("$!colorTheme" != '')
+  #set ($colorTheme = $services.model.resolveDocument($colorTheme, $doc.documentReference))
+#end
+#set ($discard = $xwiki.ssx.use('Panels.Applications', {'colorTheme': $colorTheme}))
 #set ($discard = $xwiki.jsx.use('Panels.Applications'))
 
 #panelheader($services.localization.render('panels.applications.title'))
@@ -532,9 +538,7 @@ require(['scriptaculous/effects'], function() {
       <cache>long</cache>
     </property>
     <property>
-      <code>#template('colorThemeInit.vm')
-
-.applicationsPanel li img {
+      <code>.applicationsPanel li img {
   float: left;
   width: 16px;
   height: 16px;
@@ -555,7 +559,7 @@ require(['scriptaculous/effects'], function() {
   padding: 0;
   margin: 10px 0 0 0;
   border: 0;
-  color: $theme.linkColor;
+  color: @link-color;
   box-shadow: none;
   background-color: transparent;
   width: 100%;
@@ -565,7 +569,7 @@ require(['scriptaculous/effects'], function() {
 
 .applicationPanelMoreButton:hover,
 .applicationPanelMoreButton:focus {
-  background-color: $theme.highlightColor;
+  color: @link-hover-color;
 }
 
 .applicationPanelMoreButton .application-label {
@@ -692,12 +696,6 @@ require(['scriptaculous/effects'], function() {
     float: left;
     width: 33%;
   }
-
-  /* no responsive design for colibri */
-  .skin-colibri .panel-width-Small .applicationsPanel li {
-    float: none;
-    width: inherit;
-  }
 }
 
 @media (min-width: 768px) and (max-width: 992px) {
@@ -705,53 +703,17 @@ require(['scriptaculous/effects'], function() {
     float: left;
     width: 20%;
   }
-
-  /* no responsive design for colibri */
-  .skin-colibri .panel-width-Small .applicationsPanel li {
-    float: none;
-    width: inherit;
-  }
-}
-
-/* for colibri */
-
-.skin-colibri .panel-width-Small .applicationsPanel {
-  margin: 0;
-}
-
-.skin-colibri .panel-width-Small .applicationsPanel li {
-  padding: 15px 0;
-  -moz-border-radius: 7px;
-  -webkit-border-radius: 7px;
-  border-radius: 7px;
-  margin: 1px 0;
-}
-
-.skin-colibri .panel-width-Small .applicationsPanel li.active {
-  background-color: $theme.buttonPrimaryBackgroundColor;
-}
-
-.skin-colibri .panel-width-Small .applicationsPanel li.active a {
-  color: $theme.buttonPrimaryTextColor
-}
-
-.skin-colibri .panel-width-Small .applicationsPanel li:hover {
-  background-color: $theme.highlightColor;
-}
-
-.skin-colibri .panel-width-Small .applicationsPanel li:hover a {
-  color: $theme.textPrimaryColor;
 }
 </code>
     </property>
     <property>
-      <contentType/>
+      <contentType>LESS</contentType>
     </property>
     <property>
       <name>Applications Panel</name>
     </property>
     <property>
-      <parse>1</parse>
+      <parse>0</parse>
     </property>
     <property>
       <use>onDemand</use>