Forms colortheme

customize.dist/src/less2/include/colortheme-dark.less

@@ -68,6 +68,16 @@
 @cryptpad_color_yellow_fader: fade(#FFE69C, 15%); // not in light theme
 @cryptpad_color_lighter_blue: #d2e1f2;
 
+@cp_palette:
+    #FFD4D4,
+    #FFDECA,
+    #FFE69C,
+    #DBFFB7,
+    #AFFDC2,
+    #C9FFFE,
+    #C8D6FF,
+    #E4CAFF;
+
 @cryptpad_color_link:@cryptpad_color_brand_300;
 
 // Premium plans colors
@@ -354,14 +364,14 @@
 @cp_kanban-trash-bg: @cryptpad_color_warn_red;
 @cp_kanban-color0: @cryptpad_color_grey_600;
 @cp_kanban-colors:
-    darken(desaturate(#FFD4D4,60%), 60%),
+    darken(desaturate(extract(@cp_palette, 1),60%), 60%),
-    darken(desaturate(#FFDECA,60%), 60%),
+    darken(desaturate(extract(@cp_palette, 2),60%), 60%),
-    darken(desaturate(#FFE69C,55%), 60%),
+    darken(desaturate(extract(@cp_palette, 3),55%), 60%),
-    darken(desaturate(#DBFFB7,55%), 70%),
+    darken(desaturate(extract(@cp_palette, 4),55%), 70%),
-    darken(desaturate(#AFFDC2,60%), 65%),
+    darken(desaturate(extract(@cp_palette, 5),60%), 65%),
-    darken(desaturate(#C9FFFE,60%), 70%),
+    darken(desaturate(extract(@cp_palette, 6),60%), 70%),
-    darken(desaturate(#C8D6FF,60%), 60%),
+    darken(desaturate(extract(@cp_palette, 7),60%), 60%),
-    darken(desaturate(#E4CAFF,70%), 60%);
+    darken(desaturate(extract(@cp_palette, 8),70%), 60%);
 
 // Notifications
 @cp_notif-hover: fade(@cryptpad_color_black, 10%);

customize.dist/src/less2/include/colortheme.less

@@ -67,6 +67,16 @@
 @cryptpad_color_yellow_fade: fade(#FFE69C, 50%); // different from dark
 @cryptpad_color_lighter_blue: #d2e1f2;
 
+@cp_palette:
+    #FFD4D4,
+    #FFDECA,
+    #FFE69C,
+    #DBFFB7,
+    #AFFDC2,
+    #C9FFFE,
+    #C8D6FF,
+    #E4CAFF;
+
 @cryptpad_color_link: @cryptpad_color_brand;
 
 // Premium plans colors
@@ -352,15 +362,7 @@
 @cp_kanban-add-hover: fade(@cryptpad_color_black, 10%);
 @cp_kanban-trash-bg: @cryptpad_color_warn_red;
 @cp_kanban-color0: @cryptpad_color_grey_400;
-@cp_kanban-colors:
+@cp_kanban-colors: @cp_palette;
-    #FFD4D4,
-    #FFDECA,
-    #FFE69C,
-    #DBFFB7,
-    #AFFDC2,
-    #C9FFFE,
-    #C8D6FF,
-    #E4CAFF;
 
 // Notifications
 @cp_notif-hover: fade(@cryptpad_color_black, 10%);

www/form/app-form.less

@@ -29,19 +29,24 @@
             &.cp-form-palette {
                 background-color: @color !important;
             }
-            .cp-form-block { // XXX
+        }
-                background-color: fade(@color, 50%) !important;
+        &.cp-form-palette-color@{index}{
+            #cp-app-form-editor {
+                background-color: fade(@color, 50%);
             }
         }
     }
     // call the loop
     .kanban-colors(@kanban-colors; length(@kanban-colors));
 
-    .cp-form-palette-nocolor {
+    .cp-form-palette {
-        &.cp-form-palette {
+        &.cp-form-palette-nocolor {
             background-color: @palette0 !important;
         }
     }
+    &.cp-form-palette-nocolor {
+        background-color: @cp_app-bg !important;
+    }
 
     div.alert.cp-burn-after-reading {
         margin: 10px !important;

www/form/inner.js

@@ -3243,9 +3243,16 @@ define([
 
         APP.formBlocks = [];
 
-        $container.attr('class', 'cp-form-creator-content');
         var color = content.answers.color || 'nocolor';
-        $container.addClass('cp-form-palette-'+color);
+        var $body = $('body');
+        $body[0].classList.forEach(function (cls) {
+            if (/^cp-form-palette/.test(cls)) {
+                $body.removeClass(cls);
+            }
+        });
+        $body.addClass('cp-form-palette-'+color);
+
+        $container.attr('class', 'cp-form-creator-content');
 
         if (APP.isClosed && content.answers.privateKey && !APP.isEditor && !APP.hasAnswered) {
             var sframeChan = framework._.sfCommon.getSframeChannel();
@@ -4249,9 +4256,13 @@ define([
                             $colors.find('.cp-form-palette').removeClass('fa-check');
                             $color.addClass('fa-check');
 
-                            var $container = $('div.cp-form-creator-content');
+                            var $body = $('body');
-                            $container.attr('class', 'cp-form-creator-content');
+                            $body[0].classList.forEach(function (cls) {
-                            $container.addClass('cp-form-palette-'+_color);
+                                if (/^cp-form-palette/.test(cls)) {
+                                    $body.removeClass(cls);
+                                }
+                            });
+                            $body.addClass('cp-form-palette-'+_color);
                         });
                     }).appendTo($colors);
                 });