Issue #740 allow to configure color scheme via config

.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;

src/components/ConceptListWrapper.vue

@@ -353,7 +353,7 @@ export default {
   padding: 4px 5px;
 }
 .conceptListWrapper-listSelectionPopover-choice:hover {
-  background-color: @color-background-secondary;
+  background-color: var(--color-background-secondary);
   cursor: pointer;
 }
 

src/components/ConceptSearch.vue

@@ -488,6 +488,7 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .conceptSearch {
   position: relative;
@@ -529,8 +530,8 @@ export default {
   width: 100%;
   padding: 0;
   margin: 3px 0;
-  background-color: @color-background;
-  box-shadow: 0 2px 4px 0 @color-shadow;
+  background-color: var(--color-background);
+  box-shadow: 0 2px 4px 0 var(--color-shadow);
   z-index: @zIndex-10;
 }
 
@@ -548,16 +549,16 @@ export default {
 }
 
 .conceptSearch-selected {
-  background-color: @color--conceptSearch-result-selected-background;
-  color: @color--conceptSearch-result-selected;
+  background-color: var(--color--conceptSearch-result-selected-background);
+  color: var(--color--conceptSearch-result-selected);
 }
 
 .conceptSearch-loading {
   width: 100%;
   height: 50px;
   padding: 0px 0px 0px 12px;
   z-index: @zIndex-3;
-  background-color: @color-loading-overlay-background;
+  background-color: var(--color-loading-overlay-background);
   display: flex;
   justify-content: left;
   align-items: center;
@@ -568,13 +569,13 @@ export default {
 </style>
 
 <style lang="less">
-@import "@/style/colors.less";
+@import "../style/colors.css";
 
 // Has to be global to work
 .conceptSearch-searchHighlight {
-  color: @color--conceptSearch-searchHighlight;
+  color: var(--color--conceptSearch-searchHighlight);
 }
 .conceptSearch-selected .conceptSearch-searchHighlight {
-  color: @color--conceptSearch-searchHighlight-selected;
+  color: var(--color--conceptSearch-searchHighlight-selected);
 }
 </style>

src/components/ItemName.vue

@@ -246,21 +246,22 @@ export default {
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .itemName {
   display: inline;
   user-select: text;
 }
 .itemName-inner, .itemName-inner > * {
-  color: @color-text-dark !important;
+  color: var(--color-text-dark) !important;
   display: inline;
 }
 .itemName-hovered, .itemName-hoverable:hover {
   cursor: pointer;
   text-decoration: underline;
 }
 .itemName-highlighted {
-  color: @color--itemName-highlighted !important;
+  color: var(--color--itemName-highlighted) !important;
 }
 .itemName-icon {
   margin-right: 3px;
@@ -289,6 +290,6 @@ export default {
   width: 1em;
   height: 1em;
   margin-top: 0.2em;
-  background: @color-background;
+  background: var(--color-background);
 }
 </style>

src/components/ItemSuggest.vue

@@ -306,6 +306,7 @@ export default defineComponent({
 
 <style lang="less" scoped>
 @import "@/style/main.less";
+@import "../style/colors.css";
 
 .jskos-vue-itemSuggest {
   position: relative;
@@ -323,8 +324,8 @@ export default defineComponent({
   width: 100%;
   padding: 0;
   margin: 1px 0;
-  background-color: @color-background;
-  box-shadow: 0 2px 4px 0 @color-shadow;
+  background-color: var(--color-background);
+  box-shadow: 0 2px 4px 0 var(--color-shadow);
   z-index: @zIndex-10;
 }
 
@@ -341,8 +342,8 @@ export default defineComponent({
 }
 
 .jskos-vue-itemSuggest-selected {
-  color: @color--conceptSearch-result-selected;
-  background-color: @color--conceptSearch-result-selected-background;
+  color: var(--color--conceptSearch-result-selected);
+  background-color: var(--color--conceptSearch-result-selected-background);
 }
 
 .jskos-vue-itemSuggest-loading {

src/components/LoadingIndicator.vue

@@ -30,8 +30,8 @@ export default {
 
 .loader {
   .m-borderRadius(50%);
-  border: 4px solid @color--loadingIndicator-border;
-  border-top: 4px solid @color--loadingIndicator-border-top;
+  border: 4px solid var(--color--loadingIndicator-border);
+  border-top: 4px solid var(--color--loadingIndicator-border-top);
   width: 24px;
   height: 24px;
   animation: spin 2s linear infinite;