I have been working on a much more opinionated, but far simpler version of the color editor that also renders all the common components of the theme for preview.
I still have some final tweaks and tests to make but wanted to get this beta version out there for everyone to play with and get some feedback.
Things to know
This is not just changing the colors. I completely rewrote the entire colours.css file from scratch in scss.
- Its more organized
- Has a far more versatile color scheme using https://material.io/tools/color/#!/?vie ... lor=2196F3 as a framework
- Far less colors required
- The changes I have made deviate from prosilver design to vastly improve consistency across the theme in order to make editing things much simpler and are very opinionated.
- All buttons are rendered the same (reply, pagination, submit) and the look has changed.
- All gradients are gone, gradients should only be used as backgrounds and not for ui elements.
- All tabs and navs are rendered similar for better consistency
- All headers are the same damn color changing the color should be done via class, not the html element itself
- Currently it pretty much works with 3.2.x. Depending on the feedback we can work on 3.3 support and perhaps even integration.
- How it works has also changed since the variables are all different. You just edit the variable in the section that looks like this (Lines 25-66) but still convert to css the same way as before and remove the bottom section as well.
See original for instructions viewtopic.php?f=591&t=2413816
Code: Select all
//== BEGIN EDITING HERE +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ // The primary UI Color and an accent version, This is usually the color of your links $primary: hsl(200, 85%, 50%) !default; $primary-on: $white !default; $primary-alt: hsl(210, 65%, 50%) !default; $primary-alt-on: $white !default; // The secondary UI Color and an accent version, This is usually the color of your UI // elements like buttons/toggles/checks/etc $secondary: hsl(345, 85%, 50%) !default; $secondary-on: $white !default; $secondary-alt: hsl(55, 100%, 90%) !default; $secondary-alt-on: #29303d !default; // The surfaces Color and an accent version, This is the primary color of any components // background that is within a container with another background $surface: hsl(200, 38%, 75%) !default; $surface-on: #29303d !default; $surface-alt: hsl(200, 38%, 90%) !default; $surface-alt-on: #29303d !default; // These are the default background colors used for containers, or to simulate the // abssecence of a background in a section of a surface $background-light: $white !default; $background: $gray-50 !default; $background-dark: $gray-100 !default; $background-on: #29303d !default; // NONE UI COLORS - These colors are not part of the Color Scheme. They are single use only and can be edited // CODE COLOR $code: hsl(125, 40%, 50%) !default; // PM COLORS $pm-reported: hsl(200, 38%, 75%) !default; $pm-marked: hsl(35, 100%, 50%) !default; $pm-reply: hsl(200, 38%, 80%) !default; $pm-friend: $code !default; $pm-foe: $black !default; // POLL COLOR $polls: $secondary !default; //== STOP EDITING HERE ++++ VARS BEYOND HERE ARE BASED ON THE VARS ABOVE DO NOT CHANGE UNLESS YOU KNOW WHAT YOU ARE DOING ==//