Add the document preview.css

[ralf3u]

I think it would be good to offer preview.css in the folder "preview", so users don't need to look around how to change the background-color or color of different themes.

This could be the content of preview.css after the installation:

/* the theme "light", "dark" or "system " can be selected in preview.conf in the key theme_mode */
/* light theme: */
body {
  background-color: #ffffff;
  color: #222222;
}

/* dark theme: */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eeeeee;
  }
}

Even better would be to add more in a comment, so users are informed about the possibilities, for example like this:

/* the theme "light", "dark" or "system " can be selected in preview.conf in the key theme_mode */
/* light theme: */
body {
  background-color: #ffffff;
  color: #222222;
}

/* dark theme: */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eeeeee;
  }

/*
examples for more changes:

::selection { /* area that is marked with the mouse */
  color: white;
  background: black;
}
::-webkit-scrollbar { /* the entire scrollbar */
    background-color: transparent;
}
::-webkit-scrollbar:horizontal { /* horizontal scrollbar */
    height: 23px;
}
::-webkit-scrollbar:vertical { /* vertical scrollbar */
    width: 19px;
}
::-webkit-scrollbar-thumb { /* the draggable scrolling handle */
    background-color: #cbcdce;
    border-top: 8px solid transparent;
    border-bottom: 7px solid white;
    border-left: 7px solid white;
    border-right: 4px solid transparent;
    background-clip: padding-box;
}
*/

Version
Preview 0.2.4+r31.ge5ee234

[ralf3u]

You can add even more CSS in the comment. The more CSS the better it is for the users. For example I remember that you used a CSS to colorize the border of the tab, and I think also the frame of the tab.

[xiota]

used a CSS to colorize the border of the tab

That's done in geany.css. Added to the guide in e5ee234

I think also the frame of the tab

Maybe also geany.css, don't remember how.

[ralf3u]

Maybe this could be added to preview.css like this:

/*
The following code has to be implemented not in preview.css, but in geany.css that is located at .config/geany/ – if geany.css does not exist there, then first copy geany.css that is located at /usr/share/geany/ and paste the document in .config/geany/:
#geany-preview-sidebar-page { /* borders of Preview-tab */
  border: 10px solid green;
}
*/

[ralf3u]

From now on I will update the next comment. If you have interesting CSS to add, please leave a comment.

[ralf3u]

/* the theme "light", "dark" or "system " can be selected in preview.conf in the key theme_mode */
/* light theme for the Preview-tab: */
body {
  background-color: #ffffff;
  color: #222222;
}

/* dark theme for the Preview-tab: */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eeeeee;
  }

/*
examples for more changes:

::selection { /* area that is marked with the mouse within the Preview-tab */
  color: white;
  background: black;
}
::-webkit-scrollbar { /* scrollbars of the Preview-tab */
    background-color: transparent;
}
::-webkit-scrollbar:horizontal { /* horizontal scrollbar of the Preview-tab */
    height: 23px;
}
::-webkit-scrollbar:vertical { /* vertical scrollbar of the Preview-tab */
    width: 19px;
}
::-webkit-scrollbar-thumb { /* scrollbar slider of the Preview-tab */
    background-color: #cbcdce;
    border-top: 8px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid white;
    border-right: 4px solid transparent;
    background-clip: padding-box;
}
*/

/*
The following examples have to be implemented not in preview.css, but in geany.css that is located at .config/geany/ – if geany.css does not exist there, then first copy geany.css that is located at /usr/share/geany/ and paste the document in .config/geany/:

/* design of the tab-titles */
tab {
	padding-top: 25px;
	padding-bottom: 10px;
	padding-left: 35px;
}

/* design of the tab-title of active tabs (so, one tab of the editor, one tab of the sidebar and one tab of the message window) */
tab:checked {
	font-weight: bold;
}

tooltip { /* text will appear when hovering with the mouse over a key in the preferences of Preview or over a link of the Preview-tab (if there is content in href) */
	background-color: black;
	border-radius: 0;
	font-size: 20px;
}

/* border around the tab-switcher (Shift+F10) and border in the menu-list of each item of the menu bar; that makes particular sense when using an eink-display: */
menu {border: 1px solid black}

scrollbar slider { /* scrollbar slider of the editor */
    min-width: 7px;
    border-top: 8px solid transparent;
    border-bottom: 7px solid transparent;
}

#geany-preview-sidebar-page { /* borders of the Preview-tab */
  border: 10px solid green;
}
*/