## Fixed.

- Reduce the amount of CSS description as much as possible
- Write the description of include in apply-colors.scss

src/client/styles/scss/_mixins.scss

@@ -253,11 +253,8 @@
     }
   }
 }
-@mixin highlighted($color, $alpha) {
+@mixin highlighted($color) {
   @keyframes vanishing {
-    0% {
-      opacity: 1;
-    }
     100% {
       opacity: 0;
     }
@@ -273,8 +270,8 @@
     width: 100%;
     height: 70%;
     content: '';
-    background-color: rgba($color, $alpha);
+    background-color: $color;
     border-radius: 2px;
-    animation: vanishing 1s ease-in 1.5s 1 normal forwards running;
+    animation: vanishing 1s ease-in 1.5s forwards;
   }
 }

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -366,9 +366,6 @@ ul.pagination {
   h2 {
     border-color: $border-color-theme;
   }
-  .highlighted {
-    @include highlighted($primary, 0.4);
-  }
 }
 
 /*

src/client/styles/scss/theme/_apply-colors-light.scss

@@ -272,9 +272,6 @@ $border-color: $border-color-global;
   h2 {
     border-color: $border-color-theme;
   }
-  .highlighted {
-    @include highlighted($primary, 0.1);
-  }
 }
 
 /*

src/client/styles/scss/theme/_apply-colors.scss

@@ -389,6 +389,10 @@ ul.pagination {
  * GROWI wiki
  */
 .wiki {
+  .highlighted {
+    @include highlighted($bgcolor-highlighted);
+  }
+
   a {
     color: $color-link-wiki;
 

src/client/styles/scss/theme/antarctic.scss

@@ -51,6 +51,7 @@ html[dark] {
   $bgcolor-global: $themelight;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
+  $bgcolor-highlighted: rgba($primary, 0.15);
 
   // Font colors
   $color-global: black;
@@ -113,13 +114,6 @@ html[dark] {
   @import 'apply-colors';
   @import 'apply-colors-light';
 
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.15);
-    }
-  }
-
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {

src/client/styles/scss/theme/christmas.scss

@@ -43,6 +43,7 @@ html[dark] {
   // Background colors
   $bgcolor-card: $gray-50;
   $bgcolor-inline-code: $gray-100; //optional
+  $bgcolor-highlighted: rgba($primary, 0.5);
 
   // Font colors
   $color-global: #112744;
@@ -106,11 +107,6 @@ html[dark] {
   @import 'apply-colors-light';
 
   // change color of highlighted header in wiki (default: orange)
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.5);
-    }
-  }
 
   .sidebar {
     background: $themecolor;

src/client/styles/scss/theme/default.scss

@@ -22,6 +22,7 @@ html[light] {
   $bgcolor-global: white;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
+  $bgcolor-highlighted: rgba($primary, 0.1);
 
   // Font colors
   $color-global: #112744;
@@ -122,6 +123,7 @@ html[dark] {
   $bgcolor-global: #131418;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($bgcolor-global, 5%);
+  $bgcolor-highlighted: rgba($primary, 0.4);
 
   // Font colors
   $color-global: $gray-400;

src/client/styles/scss/theme/future.scss

@@ -11,6 +11,7 @@ html[dark] {
   $bgcolor-global: $themecolor;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themecolor, 5%);
+  $bgcolor-highlighted: rgba($primary, 0.4);
 
   // Font colors
   $color-global: #95abba;
@@ -88,12 +89,7 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-dark';
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.4);
-    }
-  }
+
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {

src/client/styles/scss/theme/halloween.scss

@@ -39,6 +39,7 @@ html[dark] {
   $bgcolor-global: #050000;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: $bgcolor-global;
+  $bgcolor-highlighted: rgba($primary, 0.4);
 
   // Font colors
   $color-global: #e9af2b;
@@ -106,12 +107,7 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-dark';
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.4);
-    }
-  }
+
   //Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {

src/client/styles/scss/theme/island.scss

@@ -11,6 +11,7 @@ html[dark] {
   $bgcolor-card: $gray-50;
   $bgcolor-global: lighten($color-themelight, 10%);
   $bgcolor-inline-code: $gray-100; //optional
+  $bgcolor-highlighted: rgba($primary, 0.3);
 
   // Font colors
   $color-global: #112744;
@@ -84,13 +85,6 @@ html[dark] {
   @import 'apply-colors';
   @import 'apply-colors-light';
 
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.5);
-    }
-  }
-
   .rbt-menu {
     background: lighten($color-themelight, 5%);
   }

src/client/styles/scss/theme/kibela.scss

@@ -45,6 +45,8 @@ html[dark] {
   $primary: $bgcolor-theme;
   $info: lighten($bgcolor-theme, 20%);
 
+  $bgcolor-highlighted: rgba($primary, 0.2);
+
   // List Group colors
   $color-list: $color-global;
   $bgcolor-list: $bgcolor-global;
@@ -98,12 +100,7 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.2);
-    }
-  }
+
   //Button
   .grw-page-editor-mode-manager {
     .btn.btn-outline-primary {

src/client/styles/scss/theme/mono-blue.scss

@@ -14,6 +14,7 @@ html[light] {
   $bgcolor-global: $themelight;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: darken($themelight, 5%);
+  $bgcolor-highlighted: rgba($primary, 0.1);
 
   // Font colors
   $color-global: $themecolor;
@@ -75,12 +76,6 @@ html[light] {
   @import 'apply-colors';
   @import 'apply-colors-light';
 
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.1);
-    }
-  }
   // Navs {
   .nav-tabs {
     border-bottom: $border-color-theme 1px solid;
@@ -117,6 +112,7 @@ html[dark] {
   $bgcolor-navbar: #27343b;
   $bgcolor-inline-code: #1f1f22; //optional
   $bgcolor-card: darken($themedark, 5%);
+  $bgcolor-highlighted: rgba($primary, 0.5);
 
   // Font colors
   $color-global: #d3d4d4;
@@ -208,10 +204,4 @@ html[dark] {
       @include btn-page-editor-mode-manager(lighten($primary, 30%), $primary, darken($primary, 10%), darken($primary, 20%));
     }
   }
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.5);
-    }
-  }
 }

src/client/styles/scss/theme/nature.scss

@@ -45,6 +45,7 @@ html[dark] {
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: #f1ffe4;
   $bgcolor-subnav: #fafafa;
+  $bgcolor-highlighted: rgba($primary, 0.1);
 
   // Font colors
   $color-global: #460039;
@@ -96,13 +97,6 @@ html[dark] {
   @import 'apply-colors';
   @import 'apply-colors-light';
 
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.1);
-    }
-  }
-
   // Search Top
   .grw-global-search {
     .btn-secondary.dropdown-toggle {

src/client/styles/scss/theme/spring.scss

@@ -34,6 +34,7 @@ html[dark] {
   $bgcolor-global: white;
   $bgcolor-inline-code: $gray-100; //optional
   $bgcolor-card: $gray-50;
+  $bgcolor-highlighted: rgba($primary, 0.5);
 
   // Font colors
   $color-global: black;
@@ -92,12 +93,7 @@ html[dark] {
 
   @import 'apply-colors';
   @import 'apply-colors-light';
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.5);
-    }
-  }
+
   //Button
   // Outline buttons are applyed the accent color to this spring theme cuz the primary is too light and it looks like unable to click them.
   .btn.btn-outline-primary {

src/client/styles/scss/theme/wood.scss

@@ -43,6 +43,7 @@ html[dark] {
   // Background colors
   $bgcolor-global: white;
   $bgcolor-card: #ece8de;
+  $bgcolor-highlighted: rgba($primary, 0.3);
 
   // Font colors
   // $color-global: black;
@@ -124,13 +125,6 @@ html[dark] {
     background-image: url('/images/themes/wood/wood-navbar.jpg');
   }
 
-  // article
-  .wiki {
-    .highlighted {
-      @include highlighted($primary, 0.3);
-    }
-  }
-
   // Sidebar
   .grw-sidebar {
     div[data-testid='GlobalNavigation'] {