add experimental information for theme supported

app/assets/css/app.css

@@ -45,6 +45,7 @@
   --bg-panel-body-color: #212121;
   --bg-boxselector-wrapper-disabled-color: #194973;
   --bg-codemirror-selected-color: #383838;
+  --bg-information-color: #212121;
 
   --text-main-color: #fff;
   --text-body-color: #fff;
@@ -84,6 +85,7 @@
   --text-multiselect-button-color: #fff;
   --text-multiselect-item-color: #fff;
   --text-sidebar-list-color: #fff;
+  --text-information-color: #fff;
 
   --border-color: #383838;
   --border-widget-color: #212121;
@@ -111,6 +113,7 @@
   --border-multiselect-button-color: #383838;
   --border-searchbar-color: #212121;
   --border-panel-color: #181818;
+  --border-information-color: #212121;
 
   --hover-sidebar-color: #383838;
   --blue-color: #337ab7;
@@ -135,6 +138,7 @@
   --bg-boxselector-wrapper-disabled-color: #194973;
   --bg-dropdown-menu-color: #000;
   --bg-codemirror-selected-color: #383838;
+  --bg-information-color: #000;
 
   --text-main-color: #fff;
   --text-body-color: #fff;
@@ -147,6 +151,7 @@
   --text-blocklist-hover-color: #3ea5ff;
   --text-danger-color: #ff00e0;
   --text-dropdown-menu-color: #fff;
+  --text-information-color: #fff;
 
   --border-color: rgba(255, 255, 255, 0.8);
   --border-widget-color: #fff;
@@ -158,6 +163,7 @@
   --border-sidebar-high-contrast: 1px solid #3ea6ff;
   --border-code-high-contrast: 1px solid #fff;
   --border-panel-color: #fff;
+  --border-information-color: #fff;
 
   --hover-sidebar-color: #3ea6ff;
   --hover-sidebar-color: #000;
@@ -208,6 +214,7 @@
   --bg-panel-body-color: #fff;
   --bg-codemirror-color: #fff;
   --bg-codemirror-selected-color: #c3c3e4;
+  --bg-information-color: #fff;
 
   --text-main-color: #767676;
   --text-body-color: #333333;
@@ -247,9 +254,11 @@
   --text-multiselect-button-color: #555;
   --text-multiselect-item-color: #444;
   --text-sidebar-list-color: #b2bfdc;
+  --text-information-color: #777;
 
   --border-color: #d2d1d1;
   --border-widget-color: #e9e9e9;
+  --border-information-color: #e9e9e9;
   --border-sidebar-color: #ffffff;
   --border-form-control-color: #ccc;
   --border-table-color: #ddd;
@@ -561,6 +570,14 @@ json-tree .branch-preview {
   border: 1px solid var(--border-panel-color);
 }
 
+.theme-information {
+  border:1px solid var(--border-information-color);
+  padding: 15px;
+  margin-bottom: 15px;
+  background: var(--bg-information-color);
+  color: var(--text-information-color);
+}
+
 /* Overide Vendor CSS */
 
 html,

app/portainer/views/account/account.html

@@ -79,6 +79,12 @@
       </rd-widget-body>
     </rd-widget>
     <br />
+    <div class="theme-information">
+      <span class="small">
+          <i class="fa fa-flask orange-icon" aria-hidden="true" style="margin-right: 5px;"></i>
+          Dark and High-contrast themes are experimental. Some UI components might not display properly.
+      </span>
+    </div>
     <rd-widget>
       <rd-widget-header icon="fa-palette" title-text="Change user theme"></rd-widget-header>
       <rd-widget-body>