Issue #740 allow to configure color scheme via config

Author: rodolv-commons

.gitignore

@@ -14,7 +14,7 @@ config/cocoda*.json
 !config/cocoda.dev.json
 !config/cocoda.master.json
 # local colors file
-src/style/user-colors.less
+src/style/user-colors.css
 
 # Relases (when using bin/build-all.sh)
 releases/

CONTRIBUTING.md

@@ -113,14 +113,14 @@ Design of cards should roughly adhere to [material design cards](https://materia
 
 ### Colors
 
-For interface elements, there is a range of pre-defined colors available in `src/style/colors.less`. For non-linked text, please use one of the following colors:
+For interface elements, there is a range of pre-defined colors available in `src/style/colors.css`. For non-linked text, please use one of the following colors:
 
 * CSS class `text-dark`
 * CSS class `text-grey`
 * CSS class `text-lightGrey`
 * CSS class `text-veryLightGrey`
 
-Colors can be overridden using a custom user file in `src/style/user-colors.less`.
+Colors can be overridden using a custom user file in `src/style/user-colors.css`, it needs to be imported in `src/style/colors.css`.
 
 ### Tables
 

README.md

@@ -114,8 +114,8 @@ Using the pre-built version, the application only has to be reloaded after editi
 
 ## Maintainers
 
-- [@stefandesu](https://github.com/stefandesu)
 - [@nichtich](https://github.com/nichtich)
+- [@rodolv-commons](https://github.com/rodolv-commons)
 
 ## Contribute
 

src/App.vue

@@ -809,6 +809,7 @@ export default {
 
 <style lang="less">
 @import "./style/main.less";
+@import "./style/colors.css";
 
 html, body {
   height: 100%;
@@ -826,7 +827,7 @@ html, body {
 .main {
   flex: 1;
   position: relative;
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
 }
 .flexbox-row {
   display: flex;
@@ -902,7 +903,7 @@ html, body {
   width: 100%;
 }
 .configError {
-  background-color: @color-background;
+  background-color: var(--color-background);
   width: 100%;
   height: 100%;
 }
@@ -927,19 +928,19 @@ html, body {
   margin: 0 auto;
   cursor: pointer;
   user-select: none;
-  color: @color-button;
+  color: rgb(var(--color-button));
 }
 #swapSides:hover {
-  color: @color-button-hover;
+  color: var(--color-button-hover);
 }
 
 .tooltip {
   pointer-events: none !important;
 }
 // Override border color for all cocoda-vue-tabs
 .cocoda-vue-tabs-header-item.cocoda-vue-tabs-header-item-active {
-  border-bottom-color: @color-primary !important;
-  background-color: @color-background-heading !important;
+  border-bottom-color: var(--color-primary) !important;
+  background-color: var(--color-background-heading) !important;
 }
 // Override font-size for all cocoda-vue-tabs
 .cocoda-vue-tabs-sm {

src/ConcordanceApp.vue

@@ -328,6 +328,7 @@ export default {
 
 <style lang="less">
 @import "./style/main.less";
+@import "./style/colors.css";
 
 html, body {
   height: 100%;
@@ -345,7 +346,7 @@ html, body {
 .main {
   flex: 1;
   position: relative;
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
 }
 .flexbox-row {
   display: flex;
@@ -435,19 +436,19 @@ html, body {
   margin: 0 auto;
   cursor: pointer;
   user-select: none;
-  color: @color-button;
+  color: rgb(var(--color-button));
 }
 #swapSides:hover {
-  color: @color-button-hover;
+  color: var(--color-button-hover);
 }
 
 .tooltip {
   pointer-events: none !important;
 }
 // Override border color for all cocoda-vue-tabs
 .cocoda-vue-tabs-header-item.cocoda-vue-tabs-header-item-active {
-  border-bottom-color: @color-primary !important;
-  background-color: @color-background-heading !important;
+  border-bottom-color: var(--color-primary) !important;
+  background-color: var(--color-background-heading) !important;
 }
 // Override font-size for all cocoda-vue-tabs
 .cocoda-vue-tabs-sm {

src/components/AnnotationList.vue

@@ -181,6 +181,7 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .annotationList {
   max-height: 300px;
@@ -206,10 +207,10 @@ export default {
   flex-direction: column;
 }
 .annotationList > div:nth-child(odd) {
-  background-color: @color-background;
+  background-color: var(--color-background);
 }
 .annotationList > div:nth-child(even) {
-  background-color: fadeout(@color-text-veryLightGrey, 70%);
+  background-color: var(--color-text-veryLightGrey-opacity);
 }
 
 </style>

src/components/AnnotationPopover.vue

@@ -456,6 +456,7 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .annotationPopover {
   display: flex;
@@ -504,7 +505,7 @@ export default {
   flex: 1;
 }
 .annotationPopover-voting-button-current {
-  color: @color-primary;
+  color: var(--color-primary);
 }
 
 .bbutton-small {

src/components/ComponentSettings.vue

@@ -160,6 +160,7 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .componentSettings {
   position: absolute;
@@ -168,9 +169,9 @@ export default {
   z-index: @zIndex-2;
 }
 .componentSettings > .button {
-  color: @color-button-slightlyFaded;
+  color: var(--color-button-faded-40);
 }
 .componentSettings > .button:hover {
-  color: @color-button-hover;
+  color: var(--color-button-hover);
 }
 </style>

src/components/ConceptDetail.vue

@@ -536,13 +536,14 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .conceptDetail-scheme {
   margin-top: 5px;
 }
 
 .conceptDetail-name {
-  background-color: @color-secondary;
+  background-color: hsl(var(--color-secondary));
   position: relative;
   padding: 0 20px;
 }
@@ -556,7 +557,7 @@ export default {
   position: absolute;
   right: 3px;
   top: -2px;
-  color: @color-background;
+  color: var(--color-background);
 }
 
 .conceptDetail-identifier {
@@ -612,7 +613,7 @@ export default {
 .coli-ana > li > div:first-child {
   width: 8px;
   user-select: none;
-  color: @color-text-lightGrey;
+  color: var(--color-text-lightGrey);
   font-weight: normal;
 }
 .coli-ana > li > div:not(:last-child) {

src/components/ConceptListItem.vue

@@ -361,6 +361,7 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .conceptBox {
   display: flex;
@@ -397,7 +398,7 @@ export default {
 .addToMapping {
   .fontSize-large;
   position: absolute;
-  color: @color-background;
+  color: var(--color-background);
   top: 50%;
   transform: translateY(-50%);
   right: 8px;
@@ -408,7 +409,7 @@ export default {
 .selected.hovered,
 .arrowBox:hover,
 .conceptListItem:hover {
-  background-color: @color-secondary-light;
+  background-color: hsl(var(--color-secondary-light));
 }
 
 .conceptListItem-buttonBefore {
@@ -418,7 +419,7 @@ export default {
 /* For arrows, from https://www.w3schools.com/howto/howto_css_arrows.asp */
 // TODO: Use font awesome or move somewhere else
 .arrowBox > i {
-  border: solid @color-black;
+  border: solid var(--color-black);
   border-width: 0 2px 2px 0;
   display: inline-block;
   padding: 3px;