Ticket #25858: 25858.colors.3.diff

Gruntfile.js

@@ -76 +76 @@
                                 }
                         }
                 },
+                sass: {
+                        colors: {
+                                options: {
+                                        style: 'expanded',
+                                        sourcemap: true,
+                                        noCache: true
+                                },
+                                files : [{
+                                        expand: true,
+                                        cwd: SOURCE_DIR,
+                                        dest: BUILD_DIR,
+                                        ext: '.css',
+                                        src: ['wp-admin/css/color-schemes/*/colors.scss']
+                                }]
+                        }
+                },
                 cssmin: {
                         core: {
                                 expand: true,
@@ -98 +114 @@
                                         'wp-admin/css/*-rtl.css',
                                         'wp-includes/css/*-rtl.css'
                                 ]
+                        },
+                        colors: {
+                                expand: true,
+                                cwd: BUILD_DIR,
+                                dest: BUILD_DIR,
+                                ext: '.min.css',
+                                src: [
+                                        'wp-admin/css/color-schemes/**/*.css'
+                                ]
                         }
                 },
                 cssjanus: {
@@ -316 +341 @@
                         test: {
                                 files: ['tests/qunit/**'],
                                 tasks: ['qunit']
+                        },
+                        colors: {
+                                files: [SOURCE_DIR + 'wp-admin/css/color-schemes/**'],
+                                tasks: ['sass:colors']
                         }
                 }
         });
@@ -327 +356 @@
 
         // RTL task.
         grunt.registerTask('rtl', ['cssjanus:core']);
+        
+        grunt.registerTask('colors', ['sass:colors', 'cssmin:colors']);
 
         // Build task.
-        grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'cssmin:core', 'cssmin:rtl',
+        grunt.registerTask('build', ['clean:all', 'copy:all', 'rtl', 'colors', 'cssmin:core', 'cssmin:rtl',
                 'uglify:core', 'uglify:tinymce', 'concat:tinymce', 'compress:tinymce', 'clean:tinymce']);
 
         // Testing tasks.

package.json

@@ -13 +13 @@
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-copy": "~0.4.1",
     "grunt-contrib-cssmin": "~0.6.1",
+    "grunt-contrib-sass": "~0.5.0",
     "grunt-contrib-qunit": "~0.2.2",
     "grunt-contrib-uglify": "~0.2.2",
     "grunt-contrib-watch": "~0.5.1",

src/wp-admin/admin-ajax.php

@@ -58 +58 @@
         'wp-remove-post-lock', 'dismiss-wp-pointer', 'upload-attachment', 'get-attachment',
         'query-attachments', 'save-attachment', 'save-attachment-compat', 'send-link-to-editor',
         'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
+        'save-user-color-scheme',
 );
 
 // Register core Ajax calls.

src/wp-admin/css/color-schemes/_admin.scss

@@ +1 @@
+
+@import 'variables';
+@import 'mixins';
+
+
+html {
+        background: $body-background;
+}
+
+
+/* Links */
+
+a {
+        color: $link;
+
+        &:hover,
+        &:active,
+        &:focus {
+                color: $link-focus;
+        }
+}
+
+#rightnow a:hover,
+#media-upload a.del-link:hover,
+div.dashboard-widget-submit input:hover,
+.subsubsub a:hover,
+.subsubsub a.current:hover,
+.ui-tabs-nav a:hover {
+        color: $link-focus;
+}
+
+
+/* Forms */
+
+input[type=checkbox]:checked:before {
+    color: $form-checked;
+}
+
+input[type=radio]:checked:before {
+    background: $form-checked;
+}
+
+.wp-core-ui input[type="reset"]:hover,
+.wp-core-ui input[type="reset"]:active {
+        color: $link-focus;
+}
+
+
+/* Core UI */
+
+.wp-core-ui {
+        .button-primary {
+                @include button( $button-color );
+        }
+
+        .mp6-primary {
+                color: $text-color;
+                background-color: $base-color;
+        }
+        .mp6-text-primary {
+                color: $base-color;
+        }
+
+        .mp6-highlight {
+                color: $menu-highlight-text;
+                background-color: $menu-highlight-background;
+        }
+        .mp6-text-highlight {
+                color: $menu-highlight-background;
+        }
+
+        .mp6-notification {
+                color: $menu-bubble-text;
+                background-color: $menu-bubble-background;
+        }
+        .mp6-text-notification {
+                color: $menu-bubble-background;
+        }
+
+        .mp6-text-icon {
+                color: $menu-icon;
+        }
+}
+
+
+/* List tables */
+
+.wrap .add-new-h2:hover,
+#add-new-comment a:hover,
+.tablenav .tablenav-pages a:hover,
+.tablenav .tablenav-pages a:focus {
+        color: $menu-text;
+        background-color: $menu-background;
+}
+
+.view-switch a.current:before {
+        color: $menu-background;
+}
+
+.view-switch a:hover:before {
+        color: $menu-bubble-background;
+}
+
+.post-com-count:hover:after {
+        border-top-color: $menu-background;
+}
+.post-com-count:hover span {
+        color: $menu-text;
+        background-color: $menu-background;
+}
+
+strong .post-com-count:after {
+        border-top-color: $menu-bubble-background;
+}
+strong .post-com-count span {
+        background-color: $menu-bubble-background;
+}
+
+
+/* Admin Menu */
+
+#adminmenuback,
+#adminmenuwrap {
+        background: $menu-background;
+}
+
+#adminmenu a {
+        color: $menu-text;
+}
+
+#adminmenu div.wp-menu-image:before {
+        color: $menu-icon;
+}
+
+#adminmenu a:hover,
+#adminmenu li.menu-top:hover,
+#adminmenu li.opensub > a.menu-top,
+#adminmenu li > a.menu-top:focus {
+        color: $menu-highlight-text;
+        background-color: $menu-highlight-background;
+}
+
+#adminmenu li.menu-top:hover div.wp-menu-image:before,
+#adminmenu li.opensub > a.menu-top div.wp-menu-image:before {
+        color: $menu-highlight-icon;
+}
+
+
+/* Admin Menu: submenu */
+
+#adminmenu .wp-submenu,
+#adminmenu .wp-has-current-submenu .wp-submenu,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
+        background: $menu-submenu-background;
+}
+
+#adminmenu li.wp-has-submenu.wp-not-current-submenu.opensub:hover:after {
+        border-right-color: $menu-submenu-background;
+}
+
+#adminmenu .wp-submenu .wp-submenu-head {
+        color: $menu-submenu-text;
+}
+
+#adminmenu .wp-submenu a,
+#adminmenu .wp-has-current-submenu .wp-submenu a,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu a,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu a {
+        color: $menu-submenu-text;
+
+        &:focus, &:hover {
+                color: $menu-submenu-focus-text;
+        }
+}
+
+
+/* Admin Menu: current */
+
+#adminmenu .wp-submenu li.current a,
+#adminmenu a.wp-has-current-submenu:focus + .wp-submenu li.current a,
+#adminmenu .wp-has-current-submenu.opensub .wp-submenu li.current a {
+        color: $menu-submenu-current-text;
+
+        &:hover, &:focus {
+                color: $menu-submenu-focus-text;
+        }
+}
+
+ul#adminmenu a.wp-has-current-submenu:after,
+ul#adminmenu > li.current > a.current:after {
+    border-right-color: $body-background;
+}
+
+#adminmenu li.current a.menu-top,
+#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
+#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head,
+.folded #adminmenu li.current.menu-top {
+        color: $menu-current-text;
+        background: $menu-current-background;
+}
+
+#adminmenu li.wp-has-current-submenu div.wp-menu-image:before {
+        color: $menu-current-icon;
+}
+
+
+/* Admin Menu: bubble */
+
+#adminmenu .awaiting-mod,
+#adminmenu .update-plugins {
+        color: $menu-bubble-text;
+        background: $menu-bubble-background;
+}
+
+#adminmenu li.current a .awaiting-mod,
+#adminmenu li a.wp-has-current-submenu .update-plugins,
+#adminmenu li:hover a .awaiting-mod,
+#adminmenu li.menu-top:hover > a .update-plugins {
+        color: $menu-bubble-current-text;
+        background: $menu-bubble-current-background;
+}
+
+
+/* Admin Menu: collapse button */
+
+#collapse-menu {
+    color: $menu-collapse-text;
+}
+
+#collapse-menu:hover {
+    color: $menu-collapse-focus-text;
+}
+
+#collapse-button div:after {
+    color: $menu-collapse-icon;
+}
+
+#collapse-menu:hover #collapse-button div:after {
+    color: $menu-collapse-focus-icon;
+}
+
+
+/* Admin Bar */
+
+#wpadminbar {
+        color: $menu-text;
+        background: $menu-background;
+}
+
+#wpadminbar .ab-item,
+#wpadminbar a.ab-item,
+#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default span.ab-label,
+#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.ab-label,
+#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary span.noticon {
+        color: $menu-text;
+}
+
+#wpadminbar .ab-icon,
+#wpadminbar .ab-item:before {
+        color: $menu-icon;
+}
+
+#wpadminbar .ab-top-menu > li:hover > .ab-item,
+#wpadminbar .ab-top-menu > li.hover > .ab-item,
+#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label,
+#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label,
+#wpadminbar .ab-top-menu > li > .ab-item:focus,
+#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
+#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
+#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
+        color: $menu-highlight-text;
+        background: $menu-submenu-background;
+}
+
+#wpadminbar li:hover .ab-icon,
+#wpadminbar li:hover > .ab-item:before {
+        color: $menu-highlight-icon;
+}
+
+
+/* Admin Bar: submenu */
+
+#wpadminbar .menupop .ab-sub-wrapper {
+        background: $menu-submenu-background;
+}
+
+#wpadminbar .quicklinks .menupop ul.ab-sub-secondary {
+        background: $menu-submenu-background-alt;
+}
+
+#wpadminbar .ab-submenu .ab-item,
+#wpadminbar .quicklinks .menupop ul li a,
+#wpadminbar .quicklinks .menupop.hover ul li a,
+#wpadminbar-nojs .quicklinks .menupop:hover ul li a {
+        color: $menu-submenu-text;
+}
+
+#wpadminbar .quicklinks li .blavatar,
+#wpadminbar .menupop .menupop > .ab-item:before {
+        color: $menu-icon;
+}
+
+#wpadminbar .quicklinks .menupop ul li a:hover,
+#wpadminbar .quicklinks .menupop.hover ul li a:hover,
+#wpadminbar .quicklinks .menupop .ab-sub-secondary > li:hover > a,
+#wpadminbar .quicklinks .menupop .ab-sub-secondary > li.hover > a,
+#wpadminbar.nojs .quicklinks .menupop:hover ul li a:hover {
+        color: $menu-submenu-focus-text;
+}
+
+#wpadminbar .quicklinks li a:hover .blavatar,
+#wpadminbar .menupop .menupop > .ab-item:hover:before {
+        color: $menu-submenu-focus-text;
+}
+
+
+/* Admin Bar: search */
+
+#wpadminbar #adminbarsearch:before {
+        color: $menu-icon;
+}
+
+#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary > #wp-admin-bar-search #adminbarsearch input.adminbar-input:focus {
+        color: $menu-text;
+        background: $adminbar-input-background;
+}
+
+#wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder { color: $menu-text; opacity: .7; }
+#wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder { color: $menu-text; opacity: .7; }
+#wpadminbar #adminbarsearch .adminbar-input::-moz-placeholder { color: $menu-text; opacity: .7; }
+#wpadminbar #adminbarsearch .adminbar-input:-ms-input-placeholder { color: $menu-text; opacity: .7; }
+
+
+/* Admin Bar: my account */
+
+#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+        border-color: $adminbar-avatar-frame;
+        background-color: $adminbar-avatar-frame;
+}
+
+#wpadminbar #wp-admin-bar-user-info .display-name {
+        color: $menu-text;
+}
+
+#wpadminbar #wp-admin-bar-user-info .username {
+        color: $menu-submenu-text;
+}
+
+
+/* Pointers */
+
+.wp-pointer .wp-pointer-content h3 {
+        background-color: $highlight-color;
+}
+
+.wp-pointer.wp-pointer-top .wp-pointer-arrow,
+.wp-pointer.wp-pointer-undefined .wp-pointer-arrow {
+        border-bottom-color: $highlight-color;
+}
+
+
+/* Responsive Component */
+
+div#moby6-toggle a:before {
+        color: $menu-icon;
+}
+
+.moby6-open div#moby6-toggle a {
+        // ToDo: make inset border
+        border-color: transparent;
+        background: $menu-highlight-background;
+}
+ No newline at end of file

src/wp-admin/css/color-schemes/_mixins.scss

@@ +1 @@
+/*
+ * Button mixin- creates 3d-ish button effect with correct 
+ * highlights/shadows, based on a base color.
+ */
+@mixin button( $button-color, $text-color: white ) {
+        background: $button-color;
+        border-color: darken( $button-color, 10% );
+        color: $text-color;
+        -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
+        box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
+
+        &:hover,
+        &:focus {
+                background: darken( $button-color, 8% );
+                border-color: darken( $button-color, 15% );
+                color: $text-color;
+                -webkit-box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
+                box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 1px 0 rgba(0,0,0,.15);
+        }
+
+        &:active {
+                background: darken( $button-color, 8% );
+                border-color: darken( $button-color, 15% );
+                color: $text-color;
+                -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+                box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+        }
+
+        &[disabled],
+        &:disabled,
+        &.button-primary-disabled {
+                color: hsl( hue( $button-color ), 10%, 80% ) !important;
+                background: darken( $button-color, 8% ) !important;
+                border-color: darken( $button-color, 15% ) !important;
+                text-shadow: none !important;
+        }
+}
+ No newline at end of file

src/wp-admin/css/color-schemes/_variables.scss

@@ +1 @@
+// assign default value to all undefined variables
+
+
+// core variables
+
+$text-color: #fff !default;
+$base-color: #222 !default;
+$icon-color: hsl( hue( $base-color ), 7%, 95% ) !default;
+$highlight-color: #0074a2 !default;
+$notification-color: #d54e21 !default;
+
+
+// global
+
+$body-background: #eee !default;
+
+$link: #0074a2 !default;
+$link-focus: lighten( $link, 10% ) !default;
+
+$button-color: $highlight-color !default;
+$form-checked: $highlight-color !default;
+
+
+// admin menu & admin-bar
+
+$menu-text: $text-color !default;
+$menu-icon: $icon-color !default;
+$menu-background: $base-color !default;
+
+$menu-highlight-text: $text-color !default;
+$menu-highlight-icon: $text-color !default;
+$menu-highlight-background: $highlight-color !default;
+
+$menu-current-text: $menu-highlight-text !default;
+$menu-current-icon: $menu-highlight-icon !default;
+$menu-current-background: $menu-highlight-background !default;
+
+$menu-submenu-text: mix( $base-color, $text-color, 30% ) !default;
+$menu-submenu-background: darken( $base-color, 7% ) !default;
+$menu-submenu-background-alt: desaturate( lighten( $menu-background, 7% ), 7% ) !default;
+
+$menu-submenu-focus-text: $highlight-color !default;
+$menu-submenu-current-text: $text-color !default;
+
+$menu-bubble-text: $text-color !default;
+$menu-bubble-background: $notification-color !default;
+$menu-bubble-current-text: $text-color !default;
+$menu-bubble-current-background: $menu-submenu-background !default;
+
+$menu-collapse-text: $menu-icon !default;
+$menu-collapse-icon: $menu-icon !default;
+$menu-collapse-focus-text: $text-color !default;
+$menu-collapse-focus-icon: $menu-highlight-icon !default;
+
+$adminbar-avatar-frame: lighten( $menu-background, 7% ) !default;
+$adminbar-input-background: lighten( $menu-background, 7% ) !default;
+
+$menu-customizer-text: mix( $base-color, $text-color, 40% ) !default;

src/wp-admin/css/color-schemes/blue/colors.scss

@@ +1 @@
+$base-color: #52accc;
+$icon-color: #e5f8ff;
+$highlight-color: #096484;
+$notification-color: #e1a948;
+$button-color: #e1a948;
+
+$menu-submenu-text: #e2ecf1;
+$menu-submenu-focus-text: #fff;
+$menu-submenu-background: #4796b3;
+
+@import "../../colors-fresh.css";
+@import "../_admin.scss";

src/wp-admin/css/color-schemes/light/colors.scss

@@ +1 @@
+$base-color: #e5e5e5;
+$icon-color: #999;
+$text-color: #333;
+$highlight-color: #04a4cc;
+$notification-color: #d64e07;
+
+$body-background: #f5f5f5;
+
+$menu-highlight-text: #fff;
+$menu-highlight-icon: #ccc;
+$menu-highlight-background: #888;
+
+$menu-bubble-text: #fff;
+$menu-avatar-frame: #aaa;
+$menu-submenu-background: #fff;
+
+$menu-collapse-text: #777;
+$menu-collapse-focus-icon: #555;
+
+@import "../../colors-fresh.css";
+@import "../_admin.scss";
+
+/* temporary fix for admin-bar hover color */
+#wpadminbar .ab-top-menu > li:hover > .ab-item,
+#wpadminbar .ab-top-menu > li.hover > .ab-item,
+#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default li:hover span.ab-label,
+#wpadminbar > #wp-toolbar > #wp-admin-bar-top-secondary li.hover span.ab-label,
+#wpadminbar .ab-top-menu > li > .ab-item:focus,
+#wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus,
+#wpadminbar-nojs .ab-top-menu > li.menupop:hover > .ab-item,
+#wpadminbar .ab-top-menu > li.menupop.hover > .ab-item {
+        color: $text-color;
+}

src/wp-admin/css/color-schemes/midnight/colors.scss

@@ +1 @@
+$base-color: #363b3f;
+$highlight-color: #e14d43;
+$notification-color: #69a8bb;
+
+@import "../../colors-fresh.css";
+@import "../_admin.scss";

src/wp-admin/css/color-schemes/seaweed/colors.scss

@@ +1 @@
+$base-color: #15757a;
+$icon-color: #e1f9fa;
+$highlight-color: #a8c274;
+$notification-color: #e78229;
+
+$form-checked: $base-color;
+
+@import "../../colors-fresh.css";
+@import "../_admin.scss";

src/wp-admin/css/wp-admin.css

@@ -5640 +5640 @@
         width: auto;
 }
 
-.form-table div.color-option {
-        display: block;
-        clear: both;
-        margin-top: 12px;
-}
-
 .form-table input.tog {
         margin-top: 2px;
         margin-right: 2px;
@@ -5657 +5651 @@
         margin-bottom: 0;
 }
 
-.form-table table.color-palette {
-        vertical-align: bottom;
-        float: left;
-        margin: -12px 3px 11px;
-}
-
-.form-table .color-palette td {
-        border-width: 1px 1px 0;
-        border-style: solid solid none;
-        height: 10px;
-        line-height: 20px;
-        width: 10px;
-}
-
-
 .form-table td fieldset label {
         margin: 0.25em 0 0.5em !important;
         display: inline-block;
@@ -6334 +6313 @@
         width: 25em;
 }
 
+.picker-dropdown {
+        background: #fcfcfc;
+        border: 1px solid #dedede;
+        margin-right: 12%;
+        max-width: 270px;
+        position: relative;
+        width: auto;
+}
+
+.picker-dropdown.dropdown-current {
+        padding: 20px;
+        margin-bottom: 15px;
+        cursor: pointer;
+}
+
+.picker-dropdown.dropdown-container {
+        display: none;
+        position: absolute;
+        width: 340px;
+        border-top: none;
+        -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+        z-index: 1;
+}
+
+.picker-expanded .picker-dropdown.dropdown-container {
+        display: block;
+}
+
+.picker-dropdown.dropdown-container:before, 
+.picker-dropdown.dropdown-container:after {
+        content: "\0020";
+        display: block;
+        position: absolute;
+        top: -10px;
+        left: 150px;
+        z-index: 2;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        border: solid 11px transparent;
+        border-top: 0;
+        border-bottom-color: #fefefe;
+}
+
+.picker-dropdown.dropdown-container:before {
+        top: -11px;
+        z-index: 1;
+        border-bottom-color: #dedede;
+}
+
+.picker-dropdown-arrow {
+        position: absolute;
+        top: -1px;
+        right: -42px;
+        display: block;
+        width: 40px;
+        height: 100%;
+        background: white;
+        text-align: center;
+        border: 1px solid #dedede;
+        border-left-width: 0;
+        cursor: pointer;
+}
+
+.picker-dropdown-arrow:before {
+        font: 20px/91px dashicons;
+        content: '\f140';
+}
+
+.picker-expanded .picker-dropdown-arrow:before {
+        content: '\f142';
+}
+
+.color-option {
+        display: block;
+        padding: 20px;
+        border-top: 1px solid #dedede;
+}
+
+.color-option:hover,
+.color-option.selected {
+        background: #f2f8fa;
+}
+
+.color-palette {
+        width: 100%;
+        border-spacing: 0;
+        border-collapse: collapse;
+}
+.color-palette td {
+        height: 20px;
+        padding: 0;
+        border: none;
+}
+
+.color-option {
+        cursor: pointer;
+}
+
+.no-js .dropdown-current {
+        display: none;
+}
+
+.no-js .dropdown-container {
+        display: block;
+        position: static;
+}
+
+.no-js .dropdown-container:before, 
+.no-js .dropdown-container:after {
+        display: none;
+}
+
 /*------------------------------------------------------------------------------
   19.0 - Tools
 ------------------------------------------------------------------------------*/

src/wp-admin/includes/ajax-actions.php

@@ -2244 +2244 @@
         }
         wp_send_json_success( $return );
 }
+
+/**
+ * Auto-save the selected color scheme for a user
+ */
+function wp_ajax_save_user_color_scheme() {
+        global $_wp_admin_css_colors;
+
+        $user_id = intval( $_POST[ 'user_id' ] ); // can be replaced by `get_current_user_id` if setting is only save for own profile
+        $color_scheme = $_POST[ 'color_scheme' ];
+
+        if ( ! get_user_by( 'id', $user_id ) )
+                wp_die( -1 );
+
+        if ( ! isset( $_wp_admin_css_colors[ $color_scheme ] ) )
+                wp_die( -1 );
+
+        update_user_option( $user_id, 'admin_color', $color_scheme, true );
+        wp_die( 0 );
+}
+ No newline at end of file

src/wp-admin/includes/misc.php

@@ -562 +562 @@
  * @since 3.0.0
  */
 function admin_color_scheme_picker() {
-        global $_wp_admin_css_colors, $user_id; ?>
-<fieldset><legend class="screen-reader-text"><span><?php _e('Admin Color Scheme')?></span></legend>
-<?php
-$current_color = get_user_option('admin_color', $user_id);
-if ( empty($current_color) )
-        $current_color = 'fresh';
-foreach ( $_wp_admin_css_colors as $color => $color_info ): ?>
-<div class="color-option"><input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked($color, $current_color); ?> />
-        <table class="color-palette">
-        <tr>
-        <?php foreach ( $color_info->colors as $html_color ): ?>
-        <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
-        <?php endforeach; ?>
-        </tr>
-        </table>
+        global $_wp_admin_css_colors, $user_id;
+        ksort($_wp_admin_css_colors);
 
-        <label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
-</div>
-        <?php endforeach; ?>
-</fieldset>
+        $current_color = get_user_option( 'admin_color', $user_id );
+
+        if ( empty( $current_color ) )
+                $current_color = 'mp6';
+
+        $color_info = $_wp_admin_css_colors[$current_color];
+?>
+
+        <fieldset id="color-picker">
+                <legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
+
+                <div class="picker-dropdown dropdown-current">
+                        <div class="picker-dropdown-arrow"></div>
+                        <label for="admin_color_<?php echo esc_attr( $current_color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
+                        <table class="color-palette">
+                                <tr>
+                                <?php foreach ( $color_info->colors as $html_color ): ?>
+                                        <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $current_color ); ?>">&nbsp;</td>
+                                <?php endforeach; ?>
+                                </tr>
+                        </table>
+                </div>
+
+                <div class="picker-dropdown dropdown-container">
+
+                <?php foreach ( $_wp_admin_css_colors as $color => $color_info ) : ?>
+
+                        <div class="color-option <?php echo ( $color == $current_color ) ? 'selected' : ''; ?>">
+                                <input name="admin_color" id="admin_color_<?php echo esc_attr( $color ); ?>" type="radio" value="<?php echo esc_attr( $color ); ?>" class="tog" <?php checked( $color, $current_color ); ?> />
+                                <input type="hidden" class="css_url" value="<?php echo esc_url( $color_info->url ); ?>" />
+                                <input type="hidden" class="icon_colors" value="<?php echo esc_attr( json_encode( array( 'icons' => $color_info->icon_colors ) ) ); ?>" />
+                                <label for="admin_color_<?php echo esc_attr( $color ); ?>"><?php echo esc_html( $color_info->name ); ?></label>
+                                <table class="color-palette">
+                                        <tr>
+                                        <?php foreach ( $color_info->colors as $html_color ): ?>
+                                                <td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
+                                        <?php endforeach; ?>
+                                        </tr>
+                                </table>
+                        </div>
+
+                <?php endforeach; ?>
+
+                </div>
+
+        </fieldset>
+
 <?php
 }
 
+function set_color_scheme_json() {
+        global $_wp_admin_css_colors;
+
+        $color_scheme = get_user_option( 'admin_color' );
+
+        if ( isset( $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) {
+                echo '<script type="text/javascript">var mp6_color_scheme = ' . json_encode( array( 'icons' => $_wp_admin_css_colors[ $color_scheme ]->icon_colors ) ) . ";</script>\n";
+        }
+}
+add_action( 'admin_head', 'set_color_scheme_json' );
+
 function _ipad_meta() {
         if ( wp_is_mobile() ) {
                 ?>

src/wp-admin/js/user-profile.js

@@ -73 +73 @@
                                 });
                         });
                 }
+        
+                var $colorpicker = $( '#color-picker' );
+                var $stylesheet = $( '#colors-css' );
+                var user_id = $( 'input#user_id' ).val();
+                var current_user_id = $( 'input[name="checkuser_id"]' ).val();
+
+                // dropdown toggle
+                $colorpicker.on( 'click', '.dropdown-current', function() {
+                        $colorpicker.toggleClass( 'picker-expanded' );
+                });
+
+                $colorpicker.on( 'click', '.color-option', function() {
+
+                        var color_scheme = $( this ).children( 'input[name="admin_color"]' ).val();
+
+                        // update selected
+                        $( this ).siblings( '.selected' ).removeClass( 'selected' )
+                        $( this ).addClass( 'selected' );
+                        $( this ).find( 'input' ).prop( 'checked', true );
+
+                        // update current
+                        $colorpicker.find( '.dropdown-current label' ).html( $( this ).children( 'label' ).html() );
+                        $colorpicker.find( '.dropdown-current table' ).html( $( this ).children( 'table' ).html() );
+                        $colorpicker.toggleClass( 'picker-expanded' );
+
+                        // preview/save color scheme
+                        if ( user_id == current_user_id ) {
+
+                                // repaint icons
+                                $stylesheet.attr( 'href', $( this ).children( '.css_url' ).val() );
+                                svgPainter.setColors( $.parseJSON( $( this ).children( '.icon_colors' ).val() ) );
+                                svgPainter.paint();
+
+                                // update user option
+                                $.post( ajaxurl, {
+                                        action: 'save-user-color-scheme',
+                                        color_scheme: color_scheme,
+                                        user_id: user_id
+                                });
+
+                        }
+
+                });
+
         });
 
 })(jQuery);

src/wp-includes/general-template.php

@@ -2085 +2085 @@
  * @param string $name The name of the theme.
  * @param string $url The url of the css file containing the colour scheme.
  * @param array $colors Optional An array of CSS color definitions which are used to give the user a feel for the theme.
+ * @param array $icons Optional An array of CSS color definitions used to color any SVG icons
  */
-function wp_admin_css_color($key, $name, $url, $colors = array()) {
+function wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ) {
         global $_wp_admin_css_colors;
 
         if ( !isset($_wp_admin_css_colors) )
                 $_wp_admin_css_colors = array();
 
-        $_wp_admin_css_colors[$key] = (object) array('name' => $name, 'url' => $url, 'colors' => $colors);
+        $_wp_admin_css_colors[$key] = (object) array(
+                'name' => $name,
+                'url' => $url,
+                'colors' => $colors,
+                'icon_colors' => $icons,
+        );
 }
 
 /**
@@ -2101 +2107 @@
  * @since 3.0.0
  */
 function register_admin_color_schemes() {
-        wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ), admin_url( 'css/colors-fresh.min.css' ),
-                array( '#222', '#333', '#0074a2', '#2ea2cc' ) );
+        wp_admin_css_color( 'light', _x( 'Light', 'admin color scheme' ),
+                admin_url( 'css/color-schemes/light/colors.min.css' ),
+                array( '#e5e5e5', '#999', '#d64e07', '#04a4cc' ),
+                array( 'base' => '#999', 'focus' => '#ccc', 'current' => '#ccc' )
+        );
+
+        wp_admin_css_color( 'blue', _x( 'Blue', 'admin color scheme' ),
+                admin_url( 'css/color-schemes/blue/colors.min.css' ),
+                array( '#096484', '#4796b3', '#52accc', '#74B6CE' ),
+                array( 'base' => '#e5f8ff', 'focus' => '#fff', 'current' => '#fff' )
+        );
+
+        wp_admin_css_color( 'midnight', _x( 'Midnight', 'admin color scheme' ),
+                admin_url( 'css/color-schemes/midnight/colors.min.css' ),
+                array( '#25282b', '#363b3f', '#69a8bb', '#e14d43' ),
+                array( 'base' => '#f1f2f3', 'focus' => '#fff', 'current' => '#fff' )
+        );
+
+        wp_admin_css_color( 'seaweed', _x( 'Seaweed', 'admin color scheme' ),
+                admin_url( 'css/color-schemes/seaweed/colors.min.css' ),
+                array( '#10585C', '#15757a', '#a8c274', '#e78229' ),
+                array( 'base' => '#e1f9fa', 'focus' => '#fff', 'current' => '#fff' )
+        );
+
+        wp_admin_css_color( 'fresh', _x( 'Default', 'admin color scheme' ), 
+                admin_url( 'css/colors-fresh.min.css' ),
+                array( '#222', '#333', '#0074a2', '#2ea2cc' ) 
+        );
 }
 
 /**