Browser as a Design Tool - Change Colors, Save Them

Browser as a Design Tool - Change colors, Save Them?

How to use Chrome to play with CSS and Save it

• Determine which Stylesheet you will make changes to. Be sure to only affect rules associated with this stylesheet.
• Navigate to this stylesheet in the Sources panel of the Developer Tools, Right-click it, and Save-As this file to your computer. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
• Freely make changes to CSS Rules associated with your chosen-and-saved stylesheet. Chrome will automatically save each change to the stylesheet you saved on your computer.

Keep in mind, however, that you must do things in this order. If you save the stylesheet, then make your CSS changes, then save again, Chrome will oddly write the original unmodified source to file (until you make one more change, which causes Chrome to auto-save all changes to file).

How to use this with your clients and friends

• Set up a theme stylesheet with blank (or default-ish) CSS rules (that have top precedence) for every element you intend to let them play with.
• Over the phone, guide them to Save-As this theme stylesheet from within the Sources panel.
• Guide them in inspecting elements, and using the the Chrome inspector's GUI color-picker to meddle around and find the exact colors they want.
• Have them send you the saved stylesheet :)
  
  It's a good idea for you to verify that the modifications are in the file they sent you, before they close their browser window :P

Browser as a Design Tool - Change colors, Save Them?

How to use Chrome to play with CSS and Save it

• Determine which Stylesheet you will make changes to. Be sure to only affect rules associated with this stylesheet.
• Navigate to this stylesheet in the Sources panel of the Developer Tools, Right-click it, and Save-As this file to your computer. You can get to a stylesheet in the Sources panel quickly by clicking the stylesheet at the top-right of each CSS rule for a selected element in the Elements panel.
• Freely make changes to CSS Rules associated with your chosen-and-saved stylesheet. Chrome will automatically save each change to the stylesheet you saved on your computer.

Keep in mind, however, that you must do things in this order. If you save the stylesheet, then make your CSS changes, then save again, Chrome will oddly write the original unmodified source to file (until you make one more change, which causes Chrome to auto-save all changes to file).

How to use this with your clients and friends

• Set up a theme stylesheet with blank (or default-ish) CSS rules (that have top precedence) for every element you intend to let them play with.
• Over the phone, guide them to Save-As this theme stylesheet from within the Sources panel.
• Guide them in inspecting elements, and using the the Chrome inspector's GUI color-picker to meddle around and find the exact colors they want.
• Have them send you the saved stylesheet :)
  
  It's a good idea for you to verify that the modifications are in the file they sent you, before they close their browser window :P

Javascript: change color of the entire page

if you really want to change the colour of the whole page, you can just target body in your CSS, like

body{
  background-color: red;
}

You can make this change in your index.css and add this line in your body selector.

body {
  margin: 0;
  background-color: red;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

---

IMPORTANT NOTE

There may be a case where you have elements with their own background colour, and they will continue to have that until to specifically change each element CSS. Changing body or html background colour won't impact individual elements.

Colors in JavaScript console

In Chrome & Firefox (+31) you can add CSS in console.log messages:

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

How to change the browser persistant blue select all highlight color?

There isn't a way to change how the browser hightlights your website. This issue is very browser specific, since different browsers hightlight in a different way. You can however set via CSS which parts of the website can or can't be highlighted via the user-select property.

Edit:
I thought you knew how to change the color of the selection, but now I see you meant the color of the text highlighted. The answer below might cover that ;)

---

Related Topics