Add pages for future theming work.

src/SUMMARY.md

@@ -25,7 +25,9 @@
   - [Parent terms](./usage/parent-terms.md)
   - [Bulk mapping parent terms](./usage/parent-terms-bulk-mapping.md)
   - [Bulk term import](./usage/bulk-term-import.md)
-- [Custom styles](./settings/custom-styles.md)
+- [Themes](./usage/themes/themes.md)
+  - [Toggling highlights](./usage/themes/toggling-highlights.md)
+  - [Custom styles](./usage/themes/custom-styles.md)
 - [Backup](./backup/backup.md)
   - [Restoring backups](./backup/restore.md)
 - [Command line jobs](./usage/command-line-jobs.md)

src/usage/themes/custom-styles.md

@@ -0,0 +1,75 @@
+# Custom styles
+
+You can tailor the existing Lute themes by using your own custom styles in the Settings menu.  These overrides are applied _after_ the theme selected.
+
+Open Settings, and in the "Custom styles" text box in the settings, enter valid CSS.  For example, this:
+
+```
+span.textitem { font-size: 16px; }
+span.status1 { background-color: pink; }               /* status2-5 for the rest */
+span.status98 { background-color: lightgrey; }         /* Ignored terms */
+span.status99 { background-color: none; color: red; }  /* Well-known terms */
+```
+
+yields this:
+
+<img width="194" alt="image" src="https://github.com/jzohrab/lute/assets/1637133/8b088df2-35fd-486c-8694-8bd580afe974">
+
+## Styling examples for your inspiration
+
+### Change colors
+
+fyi the CSS selectors for the statuses are `span.status1` through `span.status5`, with `.status98` for ignored and `.status99` for well-known.
+
+```
+ span.status0  { background-color: #ADD8E6; }  /* Unknown. */
+ span.status1  { background-color: red; }
+ span.status2  { background-color: red; }
+ span.status3  { background-color: orange; }
+ span.status4  { background-color: orange; }
+ span.status5  { background-color: green; }
+ span.status98 { background-color: white; }    /* Ignored. */
+ span.status99 { background-color: white; }    /* Well known. */
+```
+
+### Language-specific styles
+
+You might want different colors or font sizes for different languages.  You can get the language ID by clicking on it in the language listing (Settings > Languages), it's at the end of the URL; e.g., `http://localhost:5000/language/edit/9`, "9" is the ID.
+
+```
+span.status0[lid="8"] { background-color: red; }
+span.status0[lid="4"] { background-color: blue; }
+```
+
+### Larger text with more space between each line
+
+```
+div#thetext p { line-height: 2; }
+span.textitem { font-size: 18px; }
+```
+
+### Hide the green checkmarks at the bottom of the reading pane
+
+Clicking the green checks sets unknown to well-known, which you might not like.
+
+
+```
+#footerMarkRestAsKnown { display: none; }
+#footerMarkRestAsKnownNextPage { display: none; }
+```
+
+### Why would you ever do this?
+
+```
+body { font-family: "Comic Sans MS"; }
+```
+
+Yuck.
+
+## Notes:
+
+* The styles used by Lute out-of-the-box are in [the GitHub repo](https://github.com/jzohrab/lute-v3/blob/master/lute/static/css/styles.css), hack away!
+* The data you put in the text box must be valid CSS, as it is picked up verbatim and inserted into the HTML.
+* Some of the current css class names are bad (e.g. "status98" means "ignored", but that's pretty hard to follow).  If those class names get changed in a future release, I'll add a note in the release notes.
+* Using css is pretty tricky, but it works for now!
+

src/usage/themes/themes.md

@@ -0,0 +1,27 @@
+# Themes
+
+> To be added in Lute 3.0.2
+
+You can apply one of the predefined themes in the Settings.  Select the theme from the dropdown.
+
+## The currently available themes
+
+### Default
+
+<img width="741" alt="image" src="https://github.com/jzohrab/lute-manual/assets/1637133/41a7b950-8cc1-4e74-a7a5-879a47077785">
+
+### Apple Books
+
+<img width="807" alt="image" src="https://github.com/jzohrab/lute-manual/assets/1637133/6660139a-5760-48ca-999c-6d00f0a2ee74">
+
+### Dark slate
+
+<img width="798" alt="image" src="https://github.com/jzohrab/lute-manual/assets/1637133/1c5349a9-c8a9-436d-a427-32b44a814df2">
+
+### Night
+
+<img width="785" alt="image" src="https://github.com/jzohrab/lute-manual/assets/1637133/189e250a-66d3-44d6-8738-38bd52e8fa95">
+
+## "Change theme" hotkey - "m"
+
+You can quickly cycle through the themes while reading by hitting the "m" hotkey.  Find what feels best.

src/usage/themes/toggling-highlights.md

@@ -0,0 +1,17 @@
+# Toggling highlights
+
+On the Settings page is a "Highlight terms by status" checkbox.  If you uncheck that, the term status highlights are removed, except for when you mouseover the term.
+
+Here is the default theme with term highlights:
+
+<img width="753" alt="image" src="https://github.com/jzohrab/lute-manual/assets/1637133/e25c531e-c21d-4546-93f9-70e42e25b9d1">
+
+Here is the same, without highlights:
+
+<img width="745" alt="image" src="https://github.com/jzohrab/lute-manual/assets/1637133/6a32128d-74bd-4d78-9c51-f8a9973bcf6d">
+
+If you hover over a term, or cursor through it, the highlight for that term is shown.
+
+## Toggling highlight hotkey "h"
+
+While reading, you can toggle term highlighting by pressing "h".