diff --git a/css/area_content.less b/css/area_content.less
index c104cb1..2b3fd9c 100755
--- a/css/area_content.less
+++ b/css/area_content.less
@@ -21,7 +21,7 @@
                 height: @page-header_height;
                 box-sizing: border-box;
                 width: 100%;
-                background-color: @background_page-header;
+                background-color: @ini_background_page-header;
                 border-bottom: 1px solid @ini_border_light;
             }
 
diff --git a/css/area_footer.less b/css/area_footer.less
index 28c07b7..369b690 100755
--- a/css/area_footer.less
+++ b/css/area_footer.less
@@ -11,7 +11,7 @@
 @media screen {
     .page-footer {
         min-height: @page-header_height;
-        background-color: @background_page-header;
+        background-color: @ini_background_page-header;
         border-top: 1px solid @ini_border_light;
         border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
         font-size: @font-size-default;
@@ -28,7 +28,7 @@
             position: relative;
             z-index: 2;
             box-sizing: border-box;
-            background-color: @color-site-bg;
+            background-color: @ini_background_site;
         }
 
         p {
diff --git a/css/area_forms.less b/css/area_forms.less
index b7ed8d2..89ee21b 100644
--- a/css/area_forms.less
+++ b/css/area_forms.less
@@ -181,10 +181,10 @@ button[type=submit],
     cursor: pointer;
     box-shadow: none;
     background-image: none;
-    background-color: @button_background;
-    border: 1px solid @button_background;
+    background-color: @ini_button_background;
+    border: 1px solid @ini_button_background;
     border-radius: @fix_border-radius;
-    color: @button_color;
+    color: @ini_button_color;
     vertical-align: top;
     padding: .3em @grid;
     transition: @transition background-color, @transition color;
@@ -192,8 +192,8 @@ button[type=submit],
     &:hover,
     &:active,
     &:focus {
-        background-color: @button_color;
-        color: @button_background;
+        background-color: @ini_button_color;
+        color: @ini_button_background;
     }
 }
 
@@ -216,9 +216,9 @@ button[type=submit] {
         &:focus {
             box-shadow: none;
             background-image: none;
-            background-color: @button_background;
-            color: @button_color;
-            border-color: @button_background;
+            background-color: @ini_button_background;
+            color: @ini_button_color;
+            border-color: @ini_button_background;
         }
     }
 
diff --git a/css/area_header.less b/css/area_header.less
index 76bca66..608fe41 100755
--- a/css/area_header.less
+++ b/css/area_header.less
@@ -83,7 +83,7 @@
 
 /* + + +  wiki title  + + + */
     p.title {
-        background-color: @color-site-bg;;
+        background-color: @ini_background_site;
         opacity: @header-font-opacity;
         line-height: @line-height-default;
         margin-bottom: .5rem;
diff --git a/css/area_main-content-secedit.less b/css/area_main-content-secedit.less
index 681e101..88955f7 100644
--- a/css/area_main-content-secedit.less
+++ b/css/area_main-content-secedit.less
@@ -47,9 +47,9 @@
             &:hover,
             &:active,
             &:focus {
-                background-color: @button_color;
-                color: @button_background;
-                border-color: @button_background;
+                background-color: @ini_button_color;
+                color: @ini_button_background;
+                border-color: @ini_button_background;
 
                 &::after {
                     background-image: url("svg.php?svg=pencil.svg&f=button_background");
diff --git a/css/area_main-content.less b/css/area_main-content.less
index 9355564..3ed2fd5 100755
--- a/css/area_main-content.less
+++ b/css/area_main-content.less
@@ -4,17 +4,19 @@
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-#dokuwiki__content.main-content {
 
+#dokuwiki__content.main-content {
     .level2 {
         p a.media {
             img {
-                border: 1px dotted @color-site-bg;
+                border: 1px dotted @ini_background_site;
 
             }
-            &:hover, &:focus, &:active {
+            &:hover,
+            &:focus,
+            &:active {
                 img {
-                    border: 1px solid @color-link;
+                    border: 1px solid @ini_existing;
                 }
             }
 
@@ -31,12 +33,14 @@
     }
 }
 
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
 
 @media @screen_min-xlg {
 }
 
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1199px */
 
diff --git a/css/area_main-sidebar-content.less b/css/area_main-sidebar-content.less
index bf29b2f..fb02fbe 100644
--- a/css/area_main-sidebar-content.less
+++ b/css/area_main-sidebar-content.less
@@ -52,8 +52,8 @@
                 width: 100%;
                 height: 100%;
                 background: @ini_background;
-                background: -webkit-linear-gradient(left, @ini_background, @color-content-bg);
-                background: linear-gradient(left, @ini_background, @color-content-bg);
+                background: -webkit-linear-gradient(left, @ini_background, @ini_background_content);
+                background: linear-gradient(left, @ini_background, @ini_background_content);
                 z-index: 0;
             }
         }
diff --git a/css/area_nav-breadcrumb.less b/css/area_nav-breadcrumb.less
index cc77685..07a93d0 100755
--- a/css/area_nav-breadcrumb.less
+++ b/css/area_nav-breadcrumb.less
@@ -13,7 +13,7 @@
     box-sizing: border-box;
 
     @media @screen_max-md {
-        background-color: @background_page-header;
+        background-color: @ini_background_page-header;
     }
 
     @media @screen_max-xs {
@@ -71,7 +71,7 @@
                 &:hover,
                 &:focus,
                 &:active {
-                    border-color: @color-link;
+                    border-color: @ini_existing;
                 }
             }
         }
@@ -127,7 +127,7 @@
                 position: relative;
 
                 strong {
-                    background-color: @color-site-bg;
+                    background-color: @ini_background_site;
                 }
 
                 .num {
@@ -170,9 +170,9 @@
             right: 0;
             width: auto;
             border: 0 none;
-            background: @background_page-header;
-            background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
-            background: linear-gradient(top, @background_page-header, @color-content-bg);
+            background: @ini_background_page-header;
+            background: -webkit-linear-gradient(top, @ini_background_page-header, @ini_background_content);
+            background: linear-gradient(top, @ini_background_page-header, @ini_background_content);
             box-shadow: @box-shadow-bottom;
             z-index: 2000;
 
diff --git a/css/area_nav-direct.less b/css/area_nav-direct.less
index 2519461..f1b5a4d 100755
--- a/css/area_nav-direct.less
+++ b/css/area_nav-direct.less
@@ -22,7 +22,7 @@
         a:visited {
             .sr-out();
 
-            box-shadow: __box_shadow__;
+            box-shadow: @box-shadow;
             display: block;
             width: 100%;
             background-color: @nav_direct_background;
diff --git a/css/area_nav-metabox.less b/css/area_nav-metabox.less
index 0e2eaf7..eff79f0 100755
--- a/css/area_nav-metabox.less
+++ b/css/area_nav-metabox.less
@@ -98,7 +98,7 @@
                 cursor: pointer;
                 position: relative;
                 display: block;
-                background-color: @color-site-bg;
+                background-color: @ini_background_site;
                 border: 1px solid @ini_border_light;
                 color: @ini_existing;
                 font-size: @font-size-small;
@@ -113,7 +113,7 @@
 
                 @media @screen_max-md {
                     top: -1px;
-                    background-color: @background_page-header;
+                    background-color: @ini_background_page-header;
                     border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
                     margin-left: 0;
                     padding: .2em .3rem .1em;
@@ -141,8 +141,8 @@
                 &:hover,
                 &:focus,
                 &:active {
-                    background-color: @color-content-bg;
-                    border-color: @color-link;
+                    background-color: @ini_background_content;
+                    border-color: @ini_existing;
                     text-decoration: none;
                 }
             }
@@ -152,19 +152,19 @@
 
                 > a {
                     cursor: default;
-                    background-color: @color-content-bg;
-                    border-color: @color-link;
-                    border-bottom-color: @color-content-bg;
-                    color: @color-link;
+                    background-color: @ini_background_content;
+                    border-color: @ini_existing;
+                    border-bottom-color: @ini_background_content;
+                    color: @ini_existing;
 
                     @media @screen_max-md {
                         border-radius: 0;
                     }
 
                     @media @screen_max-sm {
-                        background-color: @color-link;
-                        border-bottom-color: @color-link;
-                        color: @color-content-bg;
+                        background-color: @ini_existing;
+                        border-bottom-color: @ini_existing;
+                        color: @ini_background_content;
                     }
                 }
             }
@@ -192,7 +192,7 @@
             right: 0;
             display: none;
             width: 100%;
-            background-color: @color-content-bg;
+            background-color: @ini_background_content;
             border: 1px solid @ini_existing;
 
             @media @screen_min-xs {
diff --git a/css/area_nav-usertools.less b/css/area_nav-usertools.less
index 2e84422..13b67d6 100755
--- a/css/area_nav-usertools.less
+++ b/css/area_nav-usertools.less
@@ -213,7 +213,7 @@
 
             &.noopentasks {
                 strong {
-                    background-color: @color-site-bg;
+                    background-color: @ini_background_site;
                 }
 
                 .num {
diff --git a/css/area_sidebar-search.less b/css/area_sidebar-search.less
index 71a6428..c007ee4 100755
--- a/css/area_sidebar-search.less
+++ b/css/area_sidebar-search.less
@@ -30,12 +30,12 @@
         &:focus,
         &:active {
             min-height: @icon-size;
-            background-color: @button_color;
-            border: solid 1px @button_background;
-            color: @button_background;
+            background-color: @ini_button_color;
+            border: solid 1px @ini_button_background;
+            color: @ini_button_background;
 
             &::after {
-                background-color: @button_background;
+                background-color: @ini_button_background;
             }
         }
 
@@ -97,9 +97,9 @@
             top: 0;
             bottom: 0;
             min-height: @icon-size;
-            background-color: @button_color;
-            border: solid 1px @button_background;
-            color: @button_background;
+            background-color: @ini_button_color;
+            border: solid 1px @ini_button_background;
+            color: @ini_button_background;
         }
     }
 
diff --git a/css/area_togglelink.less b/css/area_togglelink.less
index ecfb97a..816799e 100755
--- a/css/area_togglelink.less
+++ b/css/area_togglelink.less
@@ -29,10 +29,10 @@
 
             width: @margin-default;
             height: 100%;
-            background-color: @button_background;
-            border: solid 1px @button_background;
+            background-color: @ini_button_background;
+            border: solid 1px @ini_button_background;
             border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-            color: @button_color;
+            color: @ini_button_color;
             text-decoration: none;
             transition: @transition color, @transition background-color, @transition border-color;
 
@@ -55,9 +55,9 @@
             &:hover,
             &:focus,
             &:active {
-                background-color: @button_color;
-                border-color: @button_background;
-                color: @button_background;
+                background-color: @ini_button_color;
+                border-color: @ini_button_background;
+                color: @ini_button_background;
                 text-decoration: none;
 
                 * {
@@ -76,8 +76,8 @@
             left: -1px;
 
             a {
-                background-color: @button_background;
-                border-color: @button_background;
+                background-color: @ini_button_background;
+                border-color: @ini_button_background;
                 border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius
 
                 &::before {
@@ -93,7 +93,7 @@
                 &:hover,
                 &:focus,
                 &:active {
-                    background-color: @button_color;
+                    background-color: @ini_button_color;
 
                     &::before {
                         opacity: 0;
diff --git a/css/base_design.less b/css/base_design.less
index feba57a..35fbe7b 100755
--- a/css/base_design.less
+++ b/css/base_design.less
@@ -7,7 +7,7 @@
 
 
 html, body {
-    background-color: @color-site-bg;
+    background-color: @ini_background_site;
 }
 
 
@@ -52,7 +52,7 @@ html, body {
     clear: both;
     overflow: hidden;
     word-wrap: break-word;
-    background: @color-content-bg;
+    background: @ini_background_content;
     color: inherit;
     padding: @page_padding-top @margin-default @margin-default;
 
@@ -415,7 +415,7 @@ kbd {
     font-size: @font-size-default;
     direction: ltr;
     text-align: left;
-    background-color: @color-site-bg;
+    background-color: @ini_background_site;
     color: @ini_text;
     box-shadow: inset 0 0 .3em @ini_border;
     border-radius: @fix_border-radius;
diff --git a/css/plugins/edit.less b/css/plugins/edit.less
index 321cb38..8e60c41 100644
--- a/css/plugins/edit.less
+++ b/css/plugins/edit.less
@@ -24,7 +24,7 @@
         form div.no {
             button,
             input.button {
-                border-top: solid 1px @button_background;
+                border-top: solid 1px @ini_button_background;
                 margin-top: 0;
             }
         }
diff --git a/css/plugins/edittable.less b/css/plugins/edittable.less
index 42731b2..0f8f1ac 100644
--- a/css/plugins/edittable.less
+++ b/css/plugins/edittable.less
@@ -12,7 +12,7 @@
             button,
             input.button {
                 min-height: 1rem;
-                // button - for inverted design: background-color: @button_color; color: @button_background;
+                // button - for inverted design: background-color: @ini_button_color; color: @ini_button_background;
                 font-size: @font-size-small;
                 margin-top: 0;
             }
diff --git a/css/plugins/magic-matcher.less b/css/plugins/magic-matcher.less
index 474d92d..0233a26 100755
--- a/css/plugins/magic-matcher.less
+++ b/css/plugins/magic-matcher.less
@@ -31,8 +31,8 @@
         &:hover,
         &:focus,
         &:active {
-            border-color: @button_background;
-            color: @button_background;
+            border-color: @ini_button_background;
+            color: @ini_button_background;
         }
     }
 
@@ -42,7 +42,7 @@
         width: 100%;
         min-height: @height-context-bar;
         box-sizing: border-box;
-        box-shadow: __box_shadow__;
+        box-shadow: @box-shadow;
         background-color: @ini_background_content;
         border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
         font-size: @font-size-default;
diff --git a/css/plugins/tabinclude.less b/css/plugins/tabinclude.less
index 6fc0296..86a1a43 100644
--- a/css/plugins/tabinclude.less
+++ b/css/plugins/tabinclude.less
@@ -11,17 +11,17 @@ div#dwpl-ti-container {
 /* + + +  tabnav  + + + */
     li.dwpl-ti-tab {
         box-shadow: none;
-        border-color: @color-site-bg;
+        border-color: @ini_background_site;
         border-radius: @fix_border-radius @fix_border-radius 0 0;
         padding: 0;
 
         div {
-            background-color: @background_page-header;
+            background-color: @ini_background_page-header;
             border-radius: inherit;
             padding: .1em .35em;
 
             &.selected {
-                background-color: @color-site-bg;
+                background-color: @ini_background_site;
             }
         }
     }
@@ -31,8 +31,8 @@ div#dwpl-ti-container {
     div.dwpl-ti-content-box {
         overflow: auto;
         box-shadow: none;
-        background-color: @color-site-bg;
-        border: solid 1px @color-site-bg;
+        background-color: @ini_background_site;
+        border: solid 1px @ini_background_site;
         border-radius: 0;
     }
 }