How to change background color of ckeditor

This has been discussed a few times and you should be able to find the (now closed) issues by searching for at least "background" and selecting Any issue, not just open ones.

The problem you are encountering, and its solution, isn't specific to CKEditor but applies to all editors under Wysiwyg. Though exactly how to solve it depends slightly on which editor and theme is used.

If you've set the editor profile to use the stylesheets from the theme (default under "CSS" on the profile configuration), that's where the changes need to happen.
The thing is that the editor's can't know exactly which elements will wrap the contents you enter when they are finall rendered, so your stylesheets may target the wrong elements - or completely miss some - when used in the editing area (usually an iframe).
Editors usually wrap the contents with the minimum markup needed to make things work. This means the stylesheets should now expect to find the contents just below the body tag, and it's applied style determines what the background and "default" styling will look like.

So, to make the editing area use the same background, font etc as your rendered "content area" does, style the body tag to match the styling of the "content area" (ie, the element where the content will finally end up on the page).
Now you might be thinking "WTF, that will mess up my layout!". Yes, it would, had it not been for the fact that the developers of most editors have foreseen this. Editors often add a specific class or id to the body tag in the editing area iframe, which of course your pages won't have. That makes it possible to write CSS selectors that will only match elements in your contents - or part of the minimal wrapping markup used by the editor - when they are being edited. Nice, isn't it?

One slight problem though; not all editors set a class or id on their body tag, and what to do if I'm using multiple editors? Well, one option is to reverse the same solution: Add a class or id to your theme's body tag, target the body tag (without this class/id) with some CSS selectors and style it as if it was used in the editing area, then add more selectors targeting the body tag having the class/id and override the previous styles with what you're using now. Basically, style for the editor, override for the final look. Not ideal but it works. It would be worth checking out if the editor(s) support changing the class or id set on the body using some setting. If so, that setting can be set via hook_wysiwyg_editor_settings_alter() - and later via the profile settings when we have a custom profile GUI for each editor.

Another solution could be to create a new stylesheet just for the editors and load that one instead of the theme's stylesheets by changing the settings under "CSS" on the editor profiles. This will probably take a bit more time than the previous solution, and you'l get more files to maintain. It might be preferable if you'd have to override a lot of style rules in your main files to make things look nice though.

thank you very much TwoD, your answer was REALLY helpful. Helped me a lot to understand how I am supposed to design the Editor and how to change the background-color in particular.

And Firebug was a good hint as well. I usually use Opera and Dragonfly, but for some reason that didnt help me to find the iframe, which Firebug easily did.

So thanks again :)

(yup - i edited this)
for themes with a dark background and white text

.cke_show_borders {
background: white;
color: black;
}

for themes with a dark body background and a white background with black text

.cke_show_borders {
background: white;
}

hope that helps someone else
PS - in theory you shouldn't have to change your text color since the background on your page is white with the body color being the dark background.