[CSS] Themes added: darkster + herbie

dist/styles/bootstrap-dark.css

+body {
+  background-color: #303030;
+  color: #fff;
+}
+
+a {
+  color: #007bff;
+}
+
+.bg-dark {
+  background-color: #212121 !important;
+}
+
+.text-dark {
+  color: #fff !important;
+}
+
+.text-muted {
+  color: #9e9e9e !important;
+}
+
+.dropdown-menu {
+  background-color: #343a40;
+  color: #fff;
+}
+
+.dropdown-item {
+  color: inherit;
+}
+
+.dropdown-item:hover, .dropdown-item.active {
+  color: inherit;
+  background-color: #4b545c;
+}
+
+.breadcrumb {
+  background-color: #343a40;
+}
+
+.breadcrumb-item.active {
+  color: #fff;
+}
+
+.nav-tabs {
+  border-bottom-color: #454d55;
+}
+
+.nav-tabs .nav-link {
+  color: #fff;
+  background-color: #343a40;
+}
+
+.nav-tabs .nav-link:hover, .nav-tabs .nav-link.active {
+  color: inherit;
+  background-color: #43494E;
+  border-color: #454d55;
+}
+
+.card {
+  background-color: #424242;
+}
+
+.card.bg-light {
+  color: #383d41;
+}
+
+.modal-content {
+  background-color: #424242;
+}
+
+.close {
+  color: #fff;
+}
+
+.close:hover {
+  color: #fff;
+}
+
+.jumbotron {
+  background-color: #212121;
+}
+
+.form-control,
+.form-control:active,
+.form-control:focus {
+  border-color: #454d55;
+  background-color: #343a40;
+  color: #fff;
+  /*Change text in autofill textbox */
+}
+
+.form-control:-webkit-autofill,
+.form-control:active:-webkit-autofill,
+.form-control:focus:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 50px #343a40 inset;
+  /* Change the color to your own background color */
+  -webkit-text-fill-color: #fff;
+}
+
+.form-control::-webkit-input-placeholder,
+.form-control:active::-webkit-input-placeholder,
+.form-control:focus::-webkit-input-placeholder {
+  color: #888;
+}
+
+.form-control:-ms-input-placeholder,
+.form-control:active:-ms-input-placeholder,
+.form-control:focus:-ms-input-placeholder {
+  color: #888;
+}
+
+.form-control::-ms-input-placeholder,
+.form-control:active::-ms-input-placeholder,
+.form-control:focus::-ms-input-placeholder {
+  color: #888;
+}
+
+.form-control::placeholder,
+.form-control:active::placeholder,
+.form-control:focus::placeholder {
+  color: #888;
+}
+
+.custom-select {
+  border-color: #454d55;
+  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23fff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+  background-color: #343a40;
+  color: #fff;
+}
+
+.custom-control-label::before {
+  background-color: #343a40;
+}
+
+.input-group-text {
+  border-color: #454d55;
+  background-color: #4b545c;
+  color: #fff;
+}
+
+.list-group-item {
+  background-color: #343a40;
+}
+
+.list-group-item-action {
+  color: inherit;
+}
+
+.list-group-item-action:not(.active):hover {
+  color: inherit;
+  background-color: #43494E;
+}
+
+.list-group-item-action.disabled {
+  background-color: #343a40;
+}
+
+.page-link {
+  background-color: #343a40;
+  border-color: #454d55;
+}
+
+.page-link:hover {
+  border-color: #454d55;
+  background-color: #43494E;
+}
+
+.page-item.disabled .page-link {
+  background-color: #343a40;
+  border-color: #454d55;
+}
+
+.progress {
+  background-color: #343a40;
+}
+/*# sourceMappingURL=bootstrap-dark.css.map */
\ No newline at end of file

package.json

@@ -7,7 +7,7 @@
         "install-ps": "psc-package install",
         "compile": "pulp build",
         "build": "pulp browserify -t dist/bundle.js",
-        "css": "sass src/sass/sass.sass:dist/styles/sass.css && sass src/sass/bootstrap/default.sass:dist/styles/bootstrap-default.css && cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css && sass src/sass/bootstrap/greyson.scss:dist/styles/bootstrap-greyson.css && sass src/sass/bootstrap/monotony.scss:dist/styles/bootstrap-monotony.css",
+        "css": "sass src/sass/sass.sass:dist/styles/sass.css && sass src/sass/bootstrap/default.sass:dist/styles/bootstrap-default.css && cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css && sass src/sass/bootstrap/greyson.scss:dist/styles/bootstrap-greyson.css && sass src/sass/bootstrap/monotony.scss:dist/styles/bootstrap-monotony.css && sass src/sass/bootstrap/darkster.scss:dist/styles/bootstrap-darkster.css  && sass src/sass/bootstrap/herbie.scss:dist/styles/bootstrap-herbie.css",
         "docs": "pulp docs -- --format html",
         "repl": "pulp repl",
         "clean": "rm -Rf output node_modules",

src/Gargantext/Components/Themes.purs

@@ -36,8 +36,16 @@ monotonyTheme :: Theme
 monotonyTheme = Theme { name: "monotony"
                       , location: "styles/bootstrap-monotony.css" }
 
+herbieTheme :: Theme
+herbieTheme = Theme { name: "herbie"
+                      , location: "styles/bootstrap-herbie.css" }
+
+darksterTheme :: Theme
+darksterTheme = Theme { name: "darkster (bêta)"
+                      , location: "styles/bootstrap-darkster.css" }
+
 allThemes :: Array Theme
-allThemes = [ defaultTheme, greysonTheme, monotonyTheme ]
+allThemes = [ defaultTheme, greysonTheme, monotonyTheme, herbieTheme, darksterTheme]
 
 switchTheme :: Theme -> Effect Unit
 switchTheme (Theme { location }) = do

src/sass/bootstrap/darkster.scss

+/*! Themestr.app `Darkster` Bootstrap 4.3.1 theme */
+@import url(https://fonts.googleapis.com/css?family=Comfortaa:200,300,400,700);
+$headings-font-family:Comfortaa;
+
+$enable-grid-classes:false;
+$primary:#FF550B;
+$secondary:#303030;
+$success:#015668;
+$danger:#FF304F;
+$info:#0F81C7;
+$warning:#0DE2EA;
+$light:#e8e8e8;
+$dark:#000000;
+
+/*! Import Bootstrap 4 variables */
+@import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/variables";
+
+$enable-shadows:true;
+$gray-300:#000000;
+$gray-800:#555555;
+$body-bg:$black;
+$body-color:#cccccc;
+$link-color:#f0f0f0;
+$link-hover-color:darken($link-color,20%);
+$font-size-base:1.1rem;
+$table-accent-bg: rgba($white,.05);
+$table-hover-bg:rgba($white,.075);
+$table-border-color:rgba($white, 0.3);
+$table-dark-border-color: $table-border-color;
+$table-dark-color:$white;
+$input-bg:$gray-300;
+$input-disabled-bg: #ccc;
+$dropdown-bg:$gray-800;
+$dropdown-divider-bg:rgba($black,.15);
+$dropdown-link-color:$body-color;
+$dropdown-link-hover-color:$white;
+$dropdown-link-hover-bg:$body-bg;
+$nav-tabs-border-color:rgba($white, 0.3);
+$nav-tabs-link-hover-border-color:$nav-tabs-border-color;
+$nav-tabs-link-active-bg:transparent;
+$nav-tabs-link-active-border-color:$nav-tabs-border-color;
+$navbar-dark-hover-color:$white;
+$navbar-light-hover-color:$gray-800;
+$navbar-light-active-color:$gray-800;
+$pagination-color:$white;
+$pagination-bg:transparent;
+$pagination-border-color:rgba($black, 0.6);
+$pagination-hover-color:$white;
+$pagination-hover-bg:transparent;
+$pagination-hover-border-color:rgba($black, 0.6);
+$pagination-active-bg:transparent;
+$pagination-active-border-color:rgba($black, 0.6);
+$pagination-disabled-bg:transparent;
+$pagination-disabled-border-color:rgba($black, 0.6);
+$jumbotron-bg:darken($gray-900, 5%);
+$card-border-color:rgba($black, 0.6);
+$card-cap-bg:lighten($gray-800, 10%);
+$card-bg:lighten($body-bg, 5%);
+$modal-content-bg:lighten($body-bg,5%);
+$modal-header-border-color:rgba(0,0,0,.2);
+$progress-bg:darken($gray-900,5%);
+$progress-bar-color:$gray-600;
+$list-group-bg:lighten($body-bg,5%);
+$list-group-border-color:rgba($black,0.6);
+$list-group-hover-bg:lighten($body-bg,10%);
+$list-group-active-color:$white;
+$list-group-active-bg:$list-group-hover-bg;
+$list-group-active-border-color:$list-group-border-color;
+$list-group-disabled-color:$gray-800;
+$list-group-disabled-bg:$black;
+$list-group-action-color:$white;
+$breadcrumb-active-color:$gray-500;
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+
+// Add SASS theme customizations here..
+.navbar-dark.bg-primary {background-color:#111111 !important;}

src/sass/bootstrap/herbie.scss

+/*! Themestr.app `Herbie` Bootstrap 4.3.1 theme */
+@import url(https://fonts.googleapis.com/css?family=Nunito:200,300,400,700);
+$font-family-base:Nunito;
+@import url(https://fonts.googleapis.com/css?family=Crete+Round:200,300,400,700);
+$headings-font-family:Crete Round;
+
+$enable-grid-classes:false;
+$primary:#083358;
+$secondary:#F67280;
+$success:#0074E4;
+$danger:#FF4057;
+$info:#74DBEF;
+$warning:#FC3C3C;
+$light:#F2F2F0;
+$dark:#072247;
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+
+// Add SASS theme customizations here..