diff --git a/webapp/packages/core-theming/src/styles/_mixins.scss b/webapp/packages/core-theming/src/styles/_mixins.scss
index 74f33bbe04..e6055bb20b 100644
--- a/webapp/packages/core-theming/src/styles/_mixins.scss
+++ b/webapp/packages/core-theming/src/styles/_mixins.scss
@@ -17,6 +17,7 @@
 @import 'theme-ripple';
 @import 'ripple';
 @import 'color';
+@import 'tag';
 @import 'button';
 @import 'radio';
 @import 'tabs';
diff --git a/webapp/packages/core-theming/src/styles/_tag.scss b/webapp/packages/core-theming/src/styles/_tag.scss
new file mode 100644
index 0000000000..1ef776dbf9
--- /dev/null
+++ b/webapp/packages/core-theming/src/styles/_tag.scss
@@ -0,0 +1,27 @@
+/*
+ * cloudbeaver - Cloud Database Manager
+ * Copyright (C) 2020 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+ @mixin tag($query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
+
+  tag {
+    padding: 2px 6px;
+    border-radius: 5px;
+    display: inline-block;
+  }
+
+  // CSS rules for using primary and secondary (plus light/dark variants) as background colors.
+  @each $style in ("primary", "secondary", "positive") {
+    tag[use|mod=#{$style}] {
+      @include mdc-feature-targets($feat-color) {
+        @include mdc-theme-prop(background-color, $style);
+        @include mdc-theme-prop(color, on-#{$style});
+      }
+    }
+  }
+}
diff --git a/webapp/packages/core-theming/src/styles/_theme-dark.scss b/webapp/packages/core-theming/src/styles/_theme-dark.scss
index fc64b8adf0..5d7b3b4fb2 100644
--- a/webapp/packages/core-theming/src/styles/_theme-dark.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-dark.scss
@@ -16,6 +16,7 @@ $mdc-theme-background: #474551;
 $mdc-theme-error: #e94948;
 
 $color-positive: #01cca3;
+$color-on-positive: #fff;
 $color-negative: #fd1d48;
 $input-border-color: #585958;
 
diff --git a/webapp/packages/core-theming/src/styles/_theme-light.scss b/webapp/packages/core-theming/src/styles/_theme-light.scss
index 9e402d6ba6..dd39387046 100644
--- a/webapp/packages/core-theming/src/styles/_theme-light.scss
+++ b/webapp/packages/core-theming/src/styles/_theme-light.scss
@@ -15,6 +15,7 @@ $mdc-theme-on-surface: #6d6d6d;
 $mdc-theme-background: #dedede;
 
 $color-positive: #01cca3;
+$color-on-positive: #fff;
 $color-negative: #fd1d48;
 $input-border-color: #dedede;
 
diff --git a/webapp/packages/core-theming/src/styles/_variables.scss b/webapp/packages/core-theming/src/styles/_variables.scss
index f7fcd56a05..1260ee72e9 100644
--- a/webapp/packages/core-theming/src/styles/_variables.scss
+++ b/webapp/packages/core-theming/src/styles/_variables.scss
@@ -7,8 +7,9 @@
  */
 
 $mdc-theme-extra-property-values: (
-  color-positive: $color-positive,
-  color-negative: $color-negative,
+  positive: $color-positive,
+  on-positive: $color-on-positive,
+  negative: $color-negative,
   input-border-color: $input-border-color,
 );
 
diff --git a/webapp/packages/core-theming/src/styles/theme-dark.module.scss b/webapp/packages/core-theming/src/styles/theme-dark.module.scss
index f821bd3235..b27cc09a7c 100644
--- a/webapp/packages/core-theming/src/styles/theme-dark.module.scss
+++ b/webapp/packages/core-theming/src/styles/theme-dark.module.scss
@@ -9,6 +9,7 @@
 @import 'theme-dark';
 
 @include colors;
+@include tag;
 @include ripple-core-styles;
 @include theme-ripple;
 @include theme-tabs;
diff --git a/webapp/packages/core-theming/src/styles/theme-light.module.scss b/webapp/packages/core-theming/src/styles/theme-light.module.scss
index 202771c171..697d1093c8 100644
--- a/webapp/packages/core-theming/src/styles/theme-light.module.scss
+++ b/webapp/packages/core-theming/src/styles/theme-light.module.scss
@@ -9,6 +9,7 @@
 @import 'theme-light';
 
 @include colors;
+@include tag;
 @include ripple-core-styles;
 @include theme-ripple;
 @include theme-tabs;
diff --git a/webapp/packages/core-theming/src/useStyles.ts b/webapp/packages/core-theming/src/useStyles.ts
index e4e34793ed..c08de54bcb 100644
--- a/webapp/packages/core-theming/src/useStyles.ts
+++ b/webapp/packages/core-theming/src/useStyles.ts
@@ -26,7 +26,7 @@ export type Style = BaseStyles | ThemeSelector
  * @param componentStyles styles array
  */
 export function useStyles(
-  ...componentStyles: Style[]
+  ...componentStyles: Array<Style | boolean>
 ) {
 
   // todo do you understand that we store ALL STYLES in each component that uses this hook?
@@ -38,8 +38,8 @@ export function useStyles(
   useMemo(() => {
     Promise
       .all(
-        componentStyles.map(
-          style => ((typeof style === 'object' || style instanceof Composes) ? style : style(currentThemeId))
+        componentStyles.filter(Boolean).map(
+          style => ((typeof style === 'object' || style instanceof Composes) ? style : (style as ThemeSelector)(currentThemeId))
         )
       )
       .then(styles => setLoadedStyles(flat(styles)));