customize darkster (not finished) + fixes on global theme, likes icons color, buttons...

dist/styles/bootstrap-default.css

@@ -6081,6 +6081,27 @@ h3 {
   background-color: white;
 }
 
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
+  color: #005a9a;
+}
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
+  color: inherit;
+}
+
+.main-topbar .nav-item > a .fa,
+.popup-container .card-footer .btn-primary {
+  color: #f8f9fa !important;
+}
+.main-topbar .nav-item > a .fa:before,
+.popup-container .card-footer .btn-primary:before {
+  color: #f8f9fa !important;
+}
+
+.table .thead-dark th {
+  background-color: #005a9a;
+  border-color: #003c67;
+}
+
 .b-fieldset {
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.125);
@@ -6429,6 +6450,10 @@ body {
   background-color: #fff;
 }
 
+.font-family-theme {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
 pre,
 code,
 kbd,
@@ -9294,6 +9319,14 @@ input[type=range]:-moz-focusring {
   margin-right: 8px;
 }
 
+.dropdown .dropdown-item {
+  padding-left: 1rem;
+}
+.dropdown .dropdown-item a span {
+  min-width: 24px;
+  text-align: center;
+}
+
 .graph-layout {
   position: relative;
   z-index: 0;

dist/styles/bootstrap-greyson.css

@@ -5836,6 +5836,27 @@ h3 {
   background-color: white;
 }
 
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
+  color: #2f3c48;
+}
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
+  color: inherit;
+}
+
+.main-topbar .nav-item > a .fa,
+.popup-container .card-footer .btn-primary {
+  color: #eceeec !important;
+}
+.main-topbar .nav-item > a .fa:before,
+.popup-container .card-footer .btn-primary:before {
+  color: #eceeec !important;
+}
+
+.table .thead-dark th {
+  background-color: #2f3c48;
+  border-color: #1b2229;
+}
+
 .b-fieldset {
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.125);
@@ -6185,6 +6206,10 @@ body {
   background-color: #fff;
 }
 
+.font-family-theme {
+  font-family: "Muli";
+}
+
 pre,
 code,
 kbd,
@@ -9054,6 +9079,14 @@ input[type=range]:-moz-focusring {
   margin-right: 8px;
 }
 
+.dropdown .dropdown-item {
+  padding-left: 1rem;
+}
+.dropdown .dropdown-item a span {
+  min-width: 24px;
+  text-align: center;
+}
+
 .graph-layout {
   position: relative;
   z-index: 0;

dist/styles/bootstrap-herbie.css

@@ -6084,6 +6084,27 @@ h3 {
   background-color: white;
 }
 
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
+  color: #083358;
+}
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
+  color: inherit;
+}
+
+.main-topbar .nav-item > a .fa,
+.popup-container .card-footer .btn-primary {
+  color: #F2F2F0 !important;
+}
+.main-topbar .nav-item > a .fa:before,
+.popup-container .card-footer .btn-primary:before {
+  color: #F2F2F0 !important;
+}
+
+.table .thead-dark th {
+  background-color: #083358;
+  border-color: #041829;
+}
+
 .b-fieldset {
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.125);
@@ -6433,6 +6454,10 @@ body {
   background-color: #fff;
 }
 
+.font-family-theme {
+  font-family: "Nunito";
+}
+
 pre,
 code,
 kbd,
@@ -9302,6 +9327,14 @@ input[type=range]:-moz-focusring {
   margin-right: 8px;
 }
 
+.dropdown .dropdown-item {
+  padding-left: 1rem;
+}
+.dropdown .dropdown-item a span {
+  min-width: 24px;
+  text-align: center;
+}
+
 .graph-layout {
   position: relative;
   z-index: 0;

dist/styles/bootstrap-monotony.css

@@ -6085,6 +6085,27 @@ h3 {
   background-color: white;
 }
 
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before {
+  color: #222222;
+}
+.b-icon:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before, .fa:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before {
+  color: inherit;
+}
+
+.main-topbar .nav-item > a .fa,
+.popup-container .card-footer .btn-primary {
+  color: #eceeec !important;
+}
+.main-topbar .nav-item > a .fa:before,
+.popup-container .card-footer .btn-primary:before {
+  color: #eceeec !important;
+}
+
+.table .thead-dark th {
+  background-color: #222222;
+  border-color: #090909;
+}
+
 .b-fieldset {
   position: relative;
   border: 1px solid rgba(0, 0, 0, 0.125);
@@ -6434,6 +6455,10 @@ body {
   background-color: #fff;
 }
 
+.font-family-theme {
+  font-family: "Montserrat";
+}
+
 pre,
 code,
 kbd,
@@ -9303,6 +9328,14 @@ input[type=range]:-moz-focusring {
   margin-right: 8px;
 }
 
+.dropdown .dropdown-item {
+  padding-left: 1rem;
+}
+.dropdown .dropdown-item a span {
+  min-width: 24px;
+  text-align: center;
+}
+
 .graph-layout {
   position: relative;
   z-index: 0;

src/Gargantext/Components/DocsTable.purs

@@ -319,7 +319,7 @@ searchBarCpt = here.component "searchBar" cpt
         pure unit
 
     searchButton query queryText' =
-      H.button { className: "btn btn-primary"
+      H.button { className: "btn btn-light"
                , on: { click: \_ -> T.write_ queryText' query }
                , type: "submit" }
         [ H.span {className: "fa fa-search"} [] ]

src/Gargantext/Components/Forest/Tree/Node/Action/Documentation.purs

@@ -30,7 +30,10 @@ actionDocCpt = here.component "actionDoc" cpt where
       infoTitle :: NodeType -> R.Element
       infoTitle nt = H.div { style: {margin: "10px"}}
                         [ H.h3 {} [H.text "Documentation about " ]
-                        , H.h3 {className: GT.fldr nt true} [ H.text $ show nt ]
+                        , H.h3 {className: GT.fldr nt true} 
+                          [ H.span {className: "font-family-theme mx-1"} 
+                            [ H.text $ show nt ] 
+                          ]
                         ]
 
 -- | TODO add documentation of all NodeType

src/Gargantext/Components/Forest/Tree/Node/Tools.purs

@@ -257,13 +257,14 @@ submitButton action dispatch =
            , title: show action
            , on: {click: \_ -> launchAff $ dispatch action}
            }
-           [ H.text $ " " <> text action]
+  [ H.span {className: "font-family-theme mx-1"} [ H.text $ " " <> text action] ]
 
 type Href  = String
 
 submitButtonHref :: Action -> Href -> R.Element
 submitButtonHref action href =
-  H.a { className, href, target: "_blank" } [ H.text $ " " <> text action ]
+  H.a { className, href, target: "_blank" } 
+  [ H.span {className: "font-family-theme mx-1"} [ H.text $ " " <> text action ] ]
   where
     className = "btn btn-primary fa fa-" <> icon action
 

src/sass/_legacy/_menu.sass

@@ -101,3 +101,12 @@
 
     .fa
       margin-right: space-x(1)
+
+.dropdown
+  .dropdown-item
+    padding-left: 1rem
+    a
+      span
+        min-width: 24px
+        text-align: center
+

src/sass/base/_typography.scss

@@ -15,6 +15,10 @@ body {
   background-color: $body-bg;
 }
 
+.font-family-theme {
+  font-family: $font-family-base;
+}
+
 /// from "_reboot.scss"
 pre,
 code,

src/sass/components/_grouped.scss

@@ -88,7 +88,6 @@
 /// Button
 ///-----------------------------------------------------------------------------
 
-
 .b-button {
   $spinner-size: 20px;
   $self: &;
@@ -237,6 +236,38 @@
   }
 }
 
+/// Simple icons (in Forest action buttons or not clickable or in modal, etc.)
+/// ----------------------------------------------------------------------------
+
+.b-icon, .fa {
+  &:not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times) {
+    &:before {
+        color: $primary;
+    }
+    &:hover:before {
+      color: inherit;
+    }
+  }
+}
+
+.main-topbar .nav-item > a .fa,
+.popup-container .card-footer .btn-primary {
+  color: $light !important;
+  &:before {
+    color: $light !important;
+  }
+}
+
+
+/// Table headings with bg color
+/// ----------------------------------------------------------------------------
+
+.table .thead-dark th {
+  background-color: $primary;
+  border-color: darken($primary, 10%);
+}
+
+
 /// Fieldset
 ///-----------------------------------------------------------------------------
 

src/sass/themes/darkster.scss

@@ -10,18 +10,165 @@
 @import "./abstract";
 
 // Fonts
-@import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700);
+// @import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700);
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4ToFqPfE.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QoFqPfE.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 300;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4ToFqPfE.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QoFqPfE.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QIFqPfE.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4SYFqPfE.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4ToFqPfE.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4QoFqPfE.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4Q4FqPfE.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Comfortaa';
+  font-style: normal;
+  font-weight: 700;
+  src: url(/fonts/comfortaa/1Ptsg8LJRfWJmhDAuUs4TYFq.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
 $headings-font-family: "Comfortaa";
 
 // Colors
-$primary    :#FF550B;
-$secondary  :#303030;
+$primary    :#33A2FF;
+$secondary  :#52B0FF;
 $success    :#015668;
 $danger     :#FF304F;
 $info       :#0F81C7;
 $warning    :#0DE2EA;
-$light      :#e8e8e8;
-$dark       :#000000;
+$light      :#D1CDC7;
+$dark       :#2C2F31;
+
+$light-secondary: #B5AFA6;
+$dark-secondary: #383D3F;
 
 $gray-50 : #121212; // (+)
 $gray-100: #212529;
@@ -85,7 +232,7 @@ $annotation-field-base-alpha: 15%;
 
 // (overriding bootstrap "_variable.scss")
 $enable-shadows:true;
-$body-bg:$black;
+$body-bg:#181A1B;
 $body-color:#cccccc;
 $link-color:#f0f0f0;
 $font-size-base:1.1rem;
@@ -158,22 +305,73 @@ $input-disabled-bg: $gray-100;
 
 @import './_base';
 
+.dropdown-menu {
+  a {
+    color: $light;
+  }
+  background-color: $body-bg;
+  .dropdown-item:hover, .dropdown-item:focus {
+    background-color: $dark-secondary;
+  }
+  .dropdown-divider {
+    border-top: 1px solid $dark-secondary;
+  }
+}
+
+.forest-layout {
+  border-right: 2px solid $dark-secondary !important;
+}
+
+.forest-layout__action {
+  .btn-light {
+    color: $light;
+    background-color: $dark;
+    border-color: $dark-secondary;
+  }
+}
 
-.navbar-dark.bg-primary {background-color:#111111 !important;}
-.table.able {color:#ccccc5}
+.navbar-dark.bg-primary {
+  background-color:#111111 !important;
+}
 
-.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
-  background-color: $gray-300;
-  color: $gray-700
+.table {
+  &.able {
+    color:#ccccc5;
+  }
+  th, td {
+    border-top: 1px solid $dark-secondary;
+  }
+  thead th {
+    border-bottom: 2px solid $dark-secondary;
+  }
+}
+
+.nav-tabs {
+  border-bottom: 1px solid $dark-secondary;
+  & .nav-link.active, 
+  & .nav-item.show .nav-link {
+    background-color: $dark;
+    color: $light-secondary;
+    border-color: $dark-secondary;
+  }
 }
 .nav.nav-tabs li a.nav-link.active:hover {
-  color: $gray-900;
+  color: $dark;
 }
 .form-control,
 .form-control:focus{
-  background-color: $gray-300;
+  background-color: $body-bg;
   color: $gray-700;
+  border-color: $dark-secondary;
+}
+.card-header,
+.card-footer {
+  background-color: $dark;
 }
-.card-header {
-  background-color: $gray-400;
+.mainleaf {
+  &__version-badge {
+    background-color: $dark;
+    border: 1px solid $dark-secondary;
+  }
 }
+

src/sass/themes/default-dark.scss

+/*! Bootstrap `Default` https://getbootstrap.com/docs/4.6 */
+
+@use 'sass:map';
+
+
+///==========================================
+///   Theme variable overrides
+///==========================================
+
+@import "./abstract";
+
+// Colors
+$primary: #005a9a;
+$secondary: $blue;
+
+// Palettes
+$theme-colors: map.merge(
+  $theme-colors,
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+  )
+);
+$palette-semantic: $theme-colors;
+
+$palette-gray: (
+  '0':    $white,
+  '50':   $gray-50,
+  '100':  $gray-100,
+  '150':  $gray-150,
+  '175':  $gray-175,
+  '200':  $gray-200,
+  '300':  $gray-300,
+  '400':  $gray-400,
+  '500':  $gray-500,
+  '600':  $gray-600,
+  '700':  $gray-700,
+  '800':  $gray-800,
+  '900':  $gray-900,
+  '1000': $black
+);
+
+$palette-pastel: (
+  'green':  $pastel-green,
+  'blue':   $pastel-blue,
+  'yellow': $pastel-yellow,
+  'red':    $pastel-red,
+  'orange': $pastel-orange,
+  'purple': $pastel-purple
+);
+
+
+///==========================================
+///   Custom styles specific to the theme
+///==========================================
+
+@import './_base';
+
+// Rectify "secondary" button tonal contrast
+.btn-secondary,
+.btn-secondary:hover,
+.btn-outline-secondary:not(:disabled):not(.disabled):hover,
+.btn-outline-secondary:not(:disabled):not(.disabled):active,
+.btn-outline-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-outline-secondary.dropdown-toggle {
+  color: $white;
+}
+
+// Alter <b-alert> light variant for better contrast
+.alert.alert-light {
+  border-color: $gray-150;
+  color: $gray-600;
+}