theming tracim_lib

src/component/Delimiter/Delimiter.styl

@@ -4,4 +4,4 @@
   border-radius 10px
   width 50%
   height 5px
-  background-color blue
+  background-color thirdColor

src/component/Input/BtnSwitch/BtnSwitch.jsx

@@ -9,7 +9,7 @@ export const BtnSwitch = props =>
       <span className='slider round' />
     </label>
     <div className='btnswitch__text'>
-      { props.checked ? 'Actif' : 'Inactif'}
+      { props.checked ? 'actif' : 'inactif'}
     </div>
   </div>
 

src/component/Input/BtnSwitch/BtnSwitch.styl

@@ -39,10 +39,10 @@
   transition .4s
 
 input:checked + .slider
-  background-color blue
+  background-color thirdColor
 
 input:focus + .slider
-  box-shadow 0 0 1px blue
+  box-shadow 0 0 1px thirdColor
 
 input:checked + .slider:before
   -webkit-transform translateX(26px)

src/css/Variable.styl

@@ -1,7 +1,11 @@
 mainColor = #fdfdfd // Bg header
-secondColor = #215e8e // bg sidebar
-thirdColor = #2571fe // bg workspace name
-fourthColor = #82b2cc // bg filter sidebar
+secondColor = #7d4e24 // #7d4e24 bg sidebar
+thirdColor = lighten(secondColor, 25%) // #2571fe bg workspace name
+fourthColor = lighten(secondColor, 55%) // #82b2cc bg filter sidebar
+fifthColor = lighten(secondColor, 10%)
+
+hover-theme = lighten(secondColor, 75%)
+hover-button = lighten(secondColor, 10%)
 
 fontColor = #252525