Any themes where the source/editing view and reading/preview view differ substantially?

Custom CSS & Theme Design
1

I am interested in trying a theme where the editing view (source mode) is significantly different from the reading view. Something like the UI and edit view are in dark mode, but the reading view is in light mode.

Have any themes tackled this already that I might learn from, or is this a “build it from the ground up” situation?

2

If a little self promotion is alowed, I can tell you that the theme I designed (Olivier’s Theme) does exactly what you’re asking for — among other things — because I wanted this feature, and for many reasons.

The features

You can set separately, for Reading/Preview mode and Editing mode :

  • the fonts
  • the sizes
  • the line lengths
  • the line spacings
  • the font colors
  • the background colors

You can even have a paper background in reading mode and a plain background in editing mode.

The logic behind this

  • Easier to know in wich mode your pannel currently is.
  • Good typographical practice and style demands shorter lines and generally wider line spacing for reading than for editing.
  • A font very comfortable for reading is not necessarily appropriate for editing and vice versa.
  • Different fonts commands different typographical settings — in particular line length and line spacing.

Hence the versatility of my theme, with witch you can set all these parameters in a straightforward way.