diff --git a/templates/html/Default.html b/templates/html/Default.html
index ea60571..3ec7cdc 100644
--- a/templates/html/Default.html
+++ b/templates/html/Default.html
@@ -4,6 +4,8 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<title>[% title %]</title>
 	<meta name='Generator' content='[% generator.name %]'>
+	<link rel="stylesheet"
+        href="[% resource('common/zim-variables.css') %]" >
     <link rel="stylesheet"
       href="[% resource('common/zim-style.css') %]" >
     <link rel="stylesheet"
diff --git a/templates/html/Default_with_index.html b/templates/html/Default_with_index.html
index d4c243e..9749b3f 100644
--- a/templates/html/Default_with_index.html
+++ b/templates/html/Default_with_index.html
@@ -4,6 +4,8 @@
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>[% title %]</title>
     <meta name='Generator' content='[% generator.name %]'>
+    <link rel="stylesheet"
+        href="[% resource('common/zim-variables.css') %]" >
     <link rel="stylesheet"
         href="[% resource('common/zim-style.css') %]" >
     <link rel="stylesheet"
diff --git a/templates/html/Print.html b/templates/html/Print.html
index af07bd8..03c2691 100644
--- a/templates/html/Print.html
+++ b/templates/html/Print.html
@@ -6,6 +6,8 @@
 	<meta name='Generator' content='[% generator.name %]'>
     <!-- ATTENTION Le template Print ne supporte pas les ressources,
 	     Il faut mettre des chemins absolus sur les fichiers :( -->
+    <link rel="stylesheet"
+      href="file:////home/daniau/.local/share/zim/templates/html/common/zim-variables.css" >	     
     <link rel="stylesheet"
       href="file:////home/daniau/.local/share/zim/templates/html/common/zim-style.css" >
     <link rel="stylesheet"
diff --git a/templates/html/common/zim-style.css b/templates/html/common/zim-style.css
index 8201945..61b38a8 100644
--- a/templates/html/common/zim-style.css
+++ b/templates/html/common/zim-style.css
@@ -1,26 +1,26 @@
 /* Common zim definitions */
 
         a          { text-decoration: none;
-                     color: blue;}
+                     color: var(--main-link-color);}
         a:link     { text-decoration: none;
-                     color: blue;}
+                     color: var(--main-link-color);}
         a:hover    { text-decoration: none;
-                     color: blue;}
+                     color: var(--main-link-color);}
         a:active   { text-decoration: none;
-                     color: blue;}
+                     color: var(--main-link-color);}
         a:visited  { text-decoration: none;
-                     color: blue;}
+                     color: var(--main-link-color);}
                      
-        strike     { color: grey                }
+        strike     { color: var(--main-strike-color);}
         
         u          { text-decoration: underline;
-                     background-color: white   }
+                     /*background-color: white*/   }
                      
-        tt         { color: darkmagenta;
+        tt         { color: var(--main-tt-color);
                      font-family: monospace;
                      font-size: large}
                      
-        pre        { color: darkmagenta;
+        pre        { color: var(--main-pre-color);
                      margin-left: 20px;
                      margin-right: 5px;
                      margin-bottom: 5px;
@@ -28,30 +28,30 @@
                      font-family: monospace;
                      font-size: large }
                      
-        code       { font-size: large; font-family: monospace; color: saddlebrown}
+        code       { font-size: large; font-family: monospace; color: var(--main-code-color)}
         
         h1         { text-decoration: underline;
-                     color: #4e9a06;
+                     color: var(--main-header-color);
                      margin-bottom: 0;
                      margin-top: 1em; }
                      
-        h2         { color: #4e9a06;
+        h2         { color: var(--main-header-color);
                      margin-bottom: 0; 
                      margin-left: 20px; 
                      margin-top: 1em;}
                      
-        h3         { color: #4e9a06;
+        h3         { color: var(--main-header-color);
                      margin-bottom: 0; 
                      margin-left: 40px;  
                      margin-top: 1em; 
                      font-style: italic; }
                      
-        h4         { color: #4e9a06; 
+        h4         { color: var(--main-header-color); 
                      margin-bottom: 0; 
                      margin-left: 60px; 
                      margin-top: 1em;}
                      
-        h5         { color: #4e9a06;
+        h5         { color: var(--main-header-color);
                      margin-bottom: 0; 
                      margin-left: 80px; 
                      margin-top: 1em;}
diff --git a/templates/html/common/zim-table-style.css b/templates/html/common/zim-table-style.css
index 45d3e02..11b3980 100644
--- a/templates/html/common/zim-table-style.css
+++ b/templates/html/common/zim-table-style.css
@@ -8,14 +8,15 @@
         }
 
         td,th  {
-            border: 1px solid #ddd;
+            border: 1px solid var(--main-td-th-border-color);
             padding: 4px;
         }
                 
+        tr:nth-child(odd){background-color: var(--main-tr-odd-background-color);}
+                
+        tr:nth-child(even){background-color: var(--main-tr-even-background-color);}
 
-        tr:nth-child(even){background-color: #f2f2f2;}
-
-        tr:hover {background-color: #ddd;}
+        tr:hover {background-color: var(--main-tr-hover-background-color);}
 
         th {
             padding-top: 6px;
@@ -28,10 +29,11 @@
             /*color: white;*/  
             
             /*background-color: #d1e1c1;*/
-            background-color: #bbb;
-            color: black;              
+            background-color: var(--main-th-background-color);
+            color: var(--main-th-color);              
         }
 
+        /* Overriding for the navigation table in header */
         table.navigation {
             border-collapse: collapse;
             width: auto;
@@ -44,6 +46,10 @@
             padding: 0;            
         }
         
+        tr.navigation {
+            background-color: white;
+        }
+        
         tr.navigation:hover {
             background-color: white;
         }
diff --git a/templates/html/common/zim-variables.css b/templates/html/common/zim-variables.css
new file mode 100644
index 0000000..eb0f15e
--- /dev/null
+++ b/templates/html/common/zim-variables.css
@@ -0,0 +1,23 @@
+
+    /* Variables */
+    
+    :root {
+        /* General */
+        --main-header-color: #4e9a06;               /* Headers color                    */
+        --main-link-color: blue;                    /* Links color                      */
+        --main-strike-color: grey;                  /* Strike color                     */
+        --main-pre-color: darkmagenta;              /* Verbatim bloc color              */
+        --main-tt-color: darkmagenta;               /* Inline verbatim                  */
+        --main-code-color: saddlebrown;             /* Code color (if hljs not used)    */
+        --main-body-color: lightslategrey;          /* Color of the background body     */
+        
+        /* Tables */
+        /* Table headers */
+        --main-th-color: black;                     /* Table header text color          */
+        --main-th-background-color: #bbb;           /* Table header background          */
+        /* Table Row and Data */
+        --main-tr-even-background-color: #f2f2f2;   /* Even row background color        */
+        --main-tr-odd-background-color: white;      /* Odd row background color         */
+        --main-tr-hover-background-color: #ddd;     /* Row background color when hover  */
+        --main-td-th-border-color: #ddd;            /* Cell's Border color              */
+    }