[theme] Node graph darkster colors

* add Theme to global box container
* UI/UX refactoring: select cursor
* #333

dist/styles/sass.css

@@ -938,6 +938,10 @@ ul li {
   padding-top: 100px;
 }
 
+select.form-control {
+  cursor: pointer;
+}
+
 #app {
   width: 100%;
 }

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/abstract/_members.scss","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AAME;EACE;;;AC9DN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1GF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAGR;EACE;;AAEA;EACE;EACA;;ACrJO;EDwJP;;;ACjKO;EDoKP;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;EAGA;EACA,eAvPkB;;AAyPlB;EACE;EACA;;ACxNO;EDqOP;EACA,MAFW;EAGX;;;AChPO;EDoPP;EACA,OAFW;EAGX;;;AAGA;EACE;;AAEA;EACE;;AAGJ;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;;AAEA;EAGE;EACA,WAzSa;EA4Sb;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEN;EACE;EACA;EACA;EACA;;AAEJ;EAEE;EACA;;;AAEJ;EAEE;EACA;;;AAEF;EAGE;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EAGE;;ACpUS;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;ACuBO;EDuUP;;AAEA;EACE;;;ACnVK;EDsVP;;AAEA;EACE;;;AAON;EAIE;EAEA;EACA;EACA;EACA,QApYmC;EAqYnC;;ACjWS;EDqWP;;;AC9WO;EDiXP;;;AAEJ;EAGE;EAEA;EACA;EACA;EACA,QAvZgC;EAwZhC;;ACnXS;EDuXP;;;AChYO;EDmYP;;;AAKF;EAIE;EACA;;ACpYO;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;AA6ZA;EACE,eA3a+B;;;AAibjC;EACE;;AAEE;EACE;;;AE/ZN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEV;EACE;;AAEA;EACE;;;AC9FN;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;AAGJ;EAKE;;AAEA;EACE;;AAIE;EACE;;AACF;EACE;;AAEJ;EAGE;;AAGJ;EACE,SAtBa;EAuBb;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAKN;EACE;;AFhIO;EEmIL;;;AF5IK;EE+IL;;;AAEJ;EACE,SAZa;;;ACpKjB;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACNxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/abstract/_members.scss","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass","../../src/sass/_annotation.sass","../../src/sass/_folder_view.sass"],"names":[],"mappings":"AAEA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACE;EACA;EACA;EACA;EAEA;;;AAEF;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AAME;EACE;;;AC9DN;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;EACA;EACA;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAZA;EACA;EAEA;EAWE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EApCA;EACA;EAEA;EAmCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EAEE;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACjFJ;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AC1GF;EACE;;;AAGA;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGA;EACE;;AACF;EACE;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKJ;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;;;AAMN;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEA;EACE;EACA;;AAEJ;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAIF;EACE;EACA;;AAEF;EACE;;AAEF;EACE;;;AAGR;EACE;;AAEA;EACE;EACA;;ACrJO;EDwJP;;;ACjKO;EDoKP;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAEN;EAWE;EAGA;EACA,eAvPkB;;AAyPlB;EACE;EACA;;ACxNO;EDqOP;EACA,MAFW;EAGX;;;AChPO;EDoPP;EACA,OAFW;EAGX;;;AAGA;EACE;;AAEA;EACE;;AAGJ;EACE;;AACF;EACE;;AACF;EACE;;AAGJ;EACE;EACA;;AAEA;EAGE;EACA,WAzSa;EA4Sb;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AACA;EACE;;AAEN;EACE;EACA;EACA;EACA;;AAEJ;EAEE;EACA;;;AAEJ;EAEE;EACA;;;AAEF;EAGE;EAKA;EACA;EACA;EACA;EAGA;EACA;EACA;EAKA;;AAHA;EACE;;;AAKJ;EAGE;;ACpUS;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;ACuBO;EDuUP;;AAEA;EACE;;;ACnVK;EDsVP;;AAEA;EACE;;;AAON;EAIE;EAEA;EACA;EACA;EACA,QApYmC;EAqYnC;;ACjWS;EDqWP;;;AC9WO;EDiXP;;;AAEJ;EAGE;EAEA;EACA;EACA;EACA,QAvZgC;EAwZhC;;ACnXS;EDuXP;;;AChYO;EDmYP;;;AAKF;EAIE;EACA;;ACpYO;ED5BP;EACA;;;ACkBO;EDfP;EACA;;;AA6ZA;EACE,eA3a+B;;;AAibjC;EACE;;AAEE;EACE;;;AE/ZN;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EApCR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0CM;EACE;EACA;EACA;EACA;EACA;EA5CR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAkDE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;AAEV;EACE;;AAEA;EACE;;;AC9FN;EACE;;;AAEA;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAER;EAEE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;;AACF;EACE;EACA;EACA;;;AAIA;EACE;;AACA;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAGI;EACE;;AACF;EACE;;;AAEN;EACE;EACA;EACA;;;AAIA;EACE;;AACF;EACE;;;AAEJ;EACE;;AACA;EACE;;;AAEJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAEF;EACE;;AAEA;EACE;;AAEF;EACE;;;AAGJ;EAKE;;AAEA;EACE;;AAIE;EACE;;AACF;EACE;;AAEJ;EAGE;;AAGJ;EACE,SAtBa;EAuBb;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKE;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;AADF;EACE;;;AAKN;EACE;;AFpIO;EEuIL;;;AFhJK;EEmJL;;;AAEJ;EACE,SAZa;;;ACxKjB;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE;;;ACxBJ;EACE;;AAEA;EANE;EACA;;AAQF;EAbE;EACA;;AAeF;EAhBE;EACA;;AAkBF;EAnBE;EACA;;AAqBF;EA1BE;EACA,kBANyB;;AAkC3B;EA7BE;EACA,kBAPqB;;AAsCvB;EAhCE;EACA,kBAJoB;;;AAuCtB;EApCE;EACA,kBANyB;;AA4C3B;EAvCE;EACA,kBAPqB;;AAgDvB;EA1CE;EACA,kBAJoB;;;ACNxB;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/App/Data.purs

 module Gargantext.Components.App.Data (App, Boxes, emptyApp) where
 
+
 import Gargantext.Prelude
 
 import Data.Maybe (Maybe(..))
 import Data.Set as Set
-import Toestand as T
-
 import Gargantext.AsyncTasks as GAT
 import Gargantext.Components.GraphExplorer.Sidebar.Types as GEST
 import Gargantext.Components.Nodes.Lists.Types as ListsT
 import Gargantext.Components.Nodes.Texts.Types as TextsT
+import Gargantext.Components.Themes as Themes
 import Gargantext.Ends (Backend)
 import Gargantext.Routes (AppRoute(Home), Tile)
 import Gargantext.Sessions (Session, Sessions)
@@ -17,6 +17,7 @@ import Gargantext.Sessions as Sessions
 import Gargantext.Sessions.Types (OpenNodes(..))
 import Gargantext.Types (FrontendError, Handed(RightHanded), SidePanelState(..))
 import Gargantext.Utils.Toestand as T2
+import Toestand as T
 
 type App =
   { backend             :: Maybe Backend
@@ -38,6 +39,7 @@ type App =
   , sidePanelTexts      :: Maybe (Record TextsT.SidePanel)
   , sidePanelState      :: SidePanelState
   , tasks               :: GAT.Storage
+  , theme               :: Themes.Theme
   , tileAxisXList       :: Array (Record Tile)
   , tileAxisYList       :: Array (Record Tile)
   }
@@ -63,6 +65,7 @@ emptyApp =
   , sidePanelTexts      : TextsT.initialSidePanel
   , sidePanelState      : InitialClosed
   , tasks               : GAT.empty
+  , theme               : Themes.defaultTheme
   , tileAxisXList       : mempty
   , tileAxisYList       : mempty
   }
@@ -87,6 +90,7 @@ type Boxes =
   , sidePanelTexts      :: T.Box (Maybe (Record TextsT.SidePanel))
   , sidePanelState      :: T.Box SidePanelState
   , tasks               :: T.Box GAT.Storage
+  , theme               :: T.Box Themes.Theme
   , tileAxisXList       :: T.Box (Array (Record Tile))
   , tileAxisYList       :: T.Box (Array (Record Tile))
   }

src/Gargantext/Components/Graph.purs

@@ -5,23 +5,27 @@ module Gargantext.Components.Graph
   -- )
   where
 
+import Gargantext.Prelude
+
+import DOM.Simple (window)
+import DOM.Simple.Types (Element)
 import Data.Either (Either(..))
 import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (Nullable)
-import DOM.Simple.Types (Element)
-import Reactix as R
-import Reactix.DOM.HTML as RH
-import Record as Record
-import Toestand as T
-
-import Gargantext.Prelude
-
+import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.GraphExplorer.Types as GET
+import Gargantext.Components.Themes (darksterTheme)
+import Gargantext.Components.Themes as Themes
 import Gargantext.Hooks.Sigmax as Sigmax
-import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Hooks.Sigmax.Sigma as Sigma
+import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as RH
+import Record (merge)
+import Record as Record
+import Toestand as T
 
 here :: R2.Here
 here = R2.here "Gargantext.Components.Graph"
@@ -34,7 +38,8 @@ derive instance Eq Stage
 
 
 type Props sigma forceatlas2 =
-  ( elRef                 :: R.Ref (Nullable Element)
+  ( boxes                 :: Boxes
+  , elRef                 :: R.Ref (Nullable Element)
   , forceAtlas2Settings   :: forceatlas2
   , graph                 :: SigmaxTypes.SGraph
   , mCamera               :: Maybe GET.Camera
@@ -87,13 +92,16 @@ graphCpt = here.component "graph" cpt where
                , sigmaRef
                , stage
                , stage': Init
-               , startForceAtlas } = do
+               , startForceAtlas
+               , boxes
+               } = do
       R.useEffectOnce' $ do
         let rSigma = R.readRef sigmaRef
 
         case Sigmax.readSigma rSigma of
           Nothing -> do
-            eSigma <- Sigma.sigma {settings: sigmaSettings}
+            theme <- T.read boxes.theme
+            eSigma <- Sigma.sigma {settings: sigmaSettings theme}
             case eSigma of
               Left err -> here.log2 "[graphCpt] error creating sigma" err
               Right sig -> do
@@ -128,6 +136,11 @@ graphCpt = here.component "graph" cpt where
                   Just (GET.Camera { ratio, x, y }) -> do
                     Sigma.updateCamera sig { ratio, x, y }
 
+                -- Reload Sigma on Theme changes
+                _ <- flip T.listen boxes.theme \{ old, new } ->
+                  if (eq old new) then pure unit
+                  else Sigma.proxySetSettings window sig $ sigmaSettings new
+
                 pure unit
           Just _sig -> do
             pure unit
@@ -138,7 +151,8 @@ graphCpt = here.component "graph" cpt where
     stageHooks { showEdges'
                , sigmaRef
                , stage': Ready
-               , transformedGraph } = do
+               , transformedGraph
+               } = do
       let tEdgesMap = SigmaxTypes.edgesGraphMap transformedGraph
       let tNodesMap = SigmaxTypes.nodesGraphMap transformedGraph
 
@@ -152,6 +166,7 @@ graphCpt = here.component "graph" cpt where
           here.log2 "[graphCpt] edgesState" edgesState
           Sigmax.setEdges sigma edgesState
 
+
     stageHooks _ = pure unit
 
 
@@ -248,8 +263,8 @@ type SigmaSettings =
 
   -- not selected <=> (1-greyness)
   -- selected nodes <=> special label
-sigmaSettings :: {|SigmaSettings}
-sigmaSettings =
+sigmaSettings :: Themes.Theme -> {|SigmaSettings}
+sigmaSettings theme =
   { animationsTime : 30000.0
   , autoRescale : true
   , autoResize : true
@@ -257,9 +272,9 @@ sigmaSettings =
   , borderSize : 1.0                   -- for ex, bigger border when hover
   , defaultEdgeHoverColor : "#f00"
   , defaultEdgeType : "curve"          -- 'curve' or 'line' (curve iff ourRendering)
-  , defaultHoverLabelBGColor : "#fff"
-  , defaultHoverLabelColor : "#000"
-  , defaultLabelColor : "#000"         -- labels text color
+  -- , defaultHoverLabelBGColor : "#fff"
+  -- , defaultHoverLabelColor : "#000"
+  -- , defaultLabelColor : "#000"         -- labels text color
   , defaultLabelSize : 15.0                -- (old tina: showLabelsIfZoom)
   , defaultNodeBorderColor  : "#000"   -- <- if nodeBorderColor = 'default'
   , defaultNodeColor : "#FFF"
@@ -304,6 +319,18 @@ sigmaSettings =
   , zoomMax : 1.7
   , zoomMin : 0.0
   , zoomingRatio : 1.4
+  } `merge` themeSettings theme
+  where
+    themeSettings t
+      | eq t darksterTheme =
+          { defaultHoverLabelBGColor: "#FFF"
+          , defaultHoverLabelColor : "#000"
+          , defaultLabelColor: "#FFF"
+          }
+      | otherwise =
+          { defaultHoverLabelBGColor: "#FFF"
+          , defaultHoverLabelColor : "#000"
+          , defaultLabelColor: "#000"
           }
 
 type ForceAtlas2Settings =

src/Gargantext/Components/GraphExplorer.purs

@@ -104,7 +104,7 @@ explorer = R.createElement explorerCpt
 explorerCpt :: R.Component Props
 explorerCpt = here.component "explorer" cpt
   where
-    cpt { boxes: { graphVersion, handed, reloadForest, showTree, sidePanelGraph, sidePanelState }
+    cpt props@{ boxes: { graphVersion, handed, reloadForest, showTree, sidePanelGraph, sidePanelState }
         , graph
         , graphId
         , hyperdataGraph
@@ -160,7 +160,8 @@ explorerCpt = here.component "explorer" cpt
             [ RH.div { id: "controls-container" } [ Controls.controls controls [] ]
             , RH.div { className: "row graph-row" }
               [ RH.div { ref: graphRef, id: "graph-view", className: "col-md-12" } []
-              , graphView { controls
+              , graphView { boxes: props.boxes
+                          , controls
                           , elRef: graphRef
                           , graph
                           , hyperdataGraph
@@ -175,8 +176,9 @@ explorerCpt = here.component "explorer" cpt
       Types.LeftHanded  -> "lefthanded"
       Types.RightHanded -> "righthanded"
 
-type GraphProps = (
-    controls       :: Record Controls.Controls
+type GraphProps =
+  ( boxes          :: Boxes
+  , controls       :: Record Controls.Controls
   , elRef          :: R.Ref (Nullable Element)
   , graph          :: SigmaxT.SGraph
   , hyperdataGraph :: GET.HyperdataGraph
@@ -188,7 +190,8 @@ graphView = R.createElement graphViewCpt
 graphViewCpt :: R.Component GraphProps
 graphViewCpt = here.component "graphView" cpt
   where
-    cpt { controls
+    cpt { boxes
+        , controls
         , elRef
         , graph
         , hyperdataGraph: GET.HyperdataGraph { mCamera }
@@ -224,7 +227,8 @@ graphViewCpt = here.component "graphView" cpt
       R.useEffect1' multiSelectEnabled' $ do
         R.setRef multiSelectEnabledRef multiSelectEnabled'
 
-      pure $ Graph.graph { elRef
+      pure $ Graph.graph { boxes
+                         , elRef
                          , forceAtlas2Settings: Graph.forceAtlas2Settings
                          , graph
                          , mCamera

src/Gargantext/Components/Themes.purs

@@ -86,7 +86,7 @@ markThemeToDOMTree (Theme { name }) = do
 
 
 type ThemeSwitcherProps = (
-    theme  :: Theme
+    theme  :: T.Box Theme
   , themes :: Array Theme
   )
 
@@ -97,19 +97,18 @@ themeSwitcherCpt :: R.Component ThemeSwitcherProps
 themeSwitcherCpt = here.component "themeSwitcher" cpt
   where
     cpt { theme, themes } _ = do
-      currentTheme <- T.useBox theme
-      currentTheme' <- T.useLive T.unequal currentTheme
+      currentTheme <- T.useLive T.unequal theme
 
       let option (Theme { name }) = H.option { value: name } [ H.text name ]
       let options = map option themes
 
-      R.useEffectOnce' $ markThemeToDOMTree currentTheme'
+      R.useEffectOnce' $ markThemeToDOMTree currentTheme
 
       pure $ R2.select { className: "form-control"
-                       , defaultValue: themeName currentTheme'
-                       , on: { change: onChange currentTheme } } options
+                       , defaultValue: themeName currentTheme
+                       , on: { change: onChange theme } } options
       where
-        onChange currentTheme e = do
+        onChange box e = do
           let value = R.unsafeEventValue e
           let mTheme = A.head $ A.filter (\(Theme { name }) -> value == name) themes
 
@@ -118,4 +117,4 @@ themeSwitcherCpt = here.component "themeSwitcher" cpt
             Just t  -> do
               switchTheme t
               markThemeToDOMTree t
-              T.write_ t currentTheme
+              T.write_ t box

src/Gargantext/Components/TopBar.purs

@@ -5,7 +5,7 @@ import Gargantext.Prelude
 import Data.Foldable (intercalate)
 import Gargantext.Components.App.Data (Boxes)
 import Gargantext.Components.GraphExplorer.ToggleButton as Toggle
-import Gargantext.Components.Themes (themeSwitcher, defaultTheme, allThemes)
+import Gargantext.Components.Themes (themeSwitcher, allThemes)
 import Gargantext.Types (Handed(..), reverseHanded)
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -23,7 +23,7 @@ topBar = R.createElement topBarCpt
 topBarCpt :: R.Component TopBarProps
 topBarCpt = here.component "topBar" cpt
   where
-    cpt { boxes: { handed, showTree } } children = do
+    cpt { boxes: { handed, showTree, theme } } children = do
       handed' <- T.useLive T.unequal handed
 
       pure $ H.div { className: "navbar navbar-expand-lg navbar-dark bg-dark"
@@ -41,7 +41,7 @@ topBarCpt = here.component "topBar" cpt
               ([ divDropdownLeft {} []
                , handButton
                , smiley
-               , H.li { className: "nav-item" } [ themeSwitcher { theme: defaultTheme
+               , H.li { className: "nav-item" } [ themeSwitcher { theme
                                                                 , themes: allThemes } [] ]
                , Toggle.treeToggleButton { state: showTree } []
                ] <> children)

src/Gargantext/Hooks/Sigmax/Sigma.js

@@ -212,6 +212,13 @@ function getNodes(sigma) {
   return sigma.graph.nodes();
 }
 
+function proxySetSettings(window, sigma, settings) {
+  var id = sigma.id;
+
+  window.sigma.instances(id).settings(settings);
+  window.sigma.instances(id).refresh();
+}
+
 exports._sigma = _sigma;
 exports._addRenderer = addRenderer;
 exports._bindMouseSelectorPlugin = bindMouseSelectorPlugin;
@@ -219,3 +226,4 @@ exports._bind = bind;
 exports._takeScreenshot = takeScreenshot;
 exports._getEdges = getEdges;
 exports._getNodes = getNodes;
+exports._proxySetSettings = proxySetSettings;

src/Gargantext/Hooks/Sigmax/Sigma.purs

@@ -2,7 +2,7 @@ module Gargantext.Hooks.Sigmax.Sigma where
 
 import Prelude
 
-import DOM.Simple.Types (Element)
+import DOM.Simple.Types (Element, Window)
 import Data.Array as A
 import Data.Either (Either(..))
 import Data.Maybe (Maybe)
@@ -15,9 +15,8 @@ import Effect.Timer (setTimeout)
 import Effect.Uncurried (EffectFn1, EffectFn3, EffectFn4, mkEffectFn1, runEffectFn1, runEffectFn3, runEffectFn4)
 import FFI.Simple ((..), (...), (.=))
 import Foreign.Object as Object
-import Type.Row (class Union)
-
 import Gargantext.Hooks.Sigmax.Types as Types
+import Type.Row (class Union)
 
 -- | Type representing a sigmajs instance
 foreign import data Sigma :: Type
@@ -216,6 +215,11 @@ setSettings s settings = do
   _ <- pure $ s ... "settings" $ [ settings ]
   refresh s
 
+-- | Call `settins(s)` on the the main proxy `window.sigma`
+proxySetSettings :: forall settings.
+  Window -> Sigma -> settings -> Effect Unit
+proxySetSettings = runEffectFn3 _proxySetSettings
+
 -- | Start forceAtlas2 on a sigmajs instance.
 startForceAtlas2 :: forall settings. Sigma -> settings -> Effect Unit
 startForceAtlas2 s settings = pure $ s ... "startForceAtlas2" $ [ settings ]
@@ -344,3 +348,9 @@ foreign import _bind :: forall e. EffectFn3 Sigma String (EffectFn1 e Unit) Unit
 foreign import _takeScreenshot :: EffectFn1 Sigma String
 foreign import _getEdges :: EffectFn1 Sigma (Array (Record Types.Edge))
 foreign import _getNodes :: EffectFn1 Sigma (Array (Record Types.Node))
+foreign import _proxySetSettings
+  :: forall settings.
+  EffectFn3 Window
+            Sigma
+            settings
+            Unit

src/sass/_styles.sass

@@ -104,6 +104,10 @@ ul
   padding-bottom: 100px
   padding-top: 100px
 
+// Add pointer to Bootstrap Select
+select.form-control
+  cursor: pointer
+
 
 #app
   width: 100%