change color to gruvbox theme #1023

EmileTrotignon · 2023-10-19T14:52:08Z

This PR changes the color theme in odoc to match the gruvbox color set ( https://github.com/morhetz/gruvbox )
The dark theme looks like that :

And the light theme like that :

It was inspired by issue #1020 , but does more than what was asked there.

dbuenzli · 2023-10-19T15:09:03Z

I suspect it will become time so solve #826 :-) Note that odig had gruvbox dark and light themes for a few years now.

panglesd · 2023-10-20T06:48:18Z

Thanks!

(The PR needs dune build @support-files.)

I do like the dark mode!

However, the light mode seems a little yellow to me. Those colors might work well for an editor, but I don't think they work well for a website (but maybe after looking at it for sufficiently long my opinion would change).

In any case, I think the "code block theme" part is a clear improvement!

So I'm hesitating between several scenarios:

Merging only the "code block" part, solving Dark mode for code snippets #1020
Merging code blocks (for all mode) and dark mode
Merging the PR with everything.

The problem with 2. is that the light and dark version do not correspond anymore... (do they correspond currently?)

We could also do 1., followed by #826, followed by the addition of a gruvbox theme?

EmileTrotignon · 2023-10-20T13:57:58Z

I have done a bit of cleanup, I remove unused variables, and picked a color from the palette for almost everything.
I personnaly, the scenario I favor is to merge everything, but I am not opposed to changing the light-theme color palette to something that pleases everyone. This may sounds like option 2 if we go back to the previous colors for everything but code, but the way I organized the code is better and should be merged even if the colors are the same in the end.

panglesd

[...] I am not opposed to changing the light-theme color palette to something that pleases everyone. [...], but the way I organized the code is better and should be merged even if the colors are the same in the end.

I agree that the code is much better organized your way! For sure, this part should be merged.

Let's wait a little bit to see if someone else likes or complains about the light color theme.

panglesd · 2023-10-20T14:16:31Z

src/html_support_files/odoc.css

  transform: scaleX(-1);
  position: absolute;
-  top: calc(50% - 5px);
+  top: calc(50% - 5px);include


Typo? Or CSS4?

Suggested change

top: calc(50% - 5px);include

top: calc(50% - 5px);

no its a typo, thanks

panglesd · 2023-10-20T14:27:01Z

src/html_support_files/odoc.css

@@ -386,7 +422,7 @@ a.anchor {
 }

 .xref-unresolved {
-  color: #2C94BD;
+  color: var(--blue-dim);


Could this be a semantic variable? Such as --xref-unresolved?

panglesd · 2023-10-20T14:47:39Z

src/html_support_files/odoc.css

 }

 .WITH, .WHILE, .WHEN, .VIRTUAL, .TRY, .TO, .THEN, .PRIVATE, .OF, .NEW, .MUTABLE, .MATCH, .LAZY, .IF, .FUNCTION, .FUN, .FOR, .EXCEPTION, .ELSE, .TO, .DOWNTO, .DO, .DONE, .BEGIN, .AS {
-  color: #cb4b16;
+  color: var(--orange-dim);


There are modifications to the highlight color for render source code, which sometimes include "color variable" and sometimes various "semantic variable".

I think it would be nice to have only semantic variable, when applicable specific to render source code

I understand. Its still a bit weird because hljs does have exactly the same categories as this, and my semantic variable are hljs oriented. I should probably change this and have semantic variable adapted for this, and try to do wahts best with hljs
In the future it would probably be nice to highlight ocaml snippet the same way as ocaml source code.

EmileTrotignon · 2023-11-08T11:25:25Z

I have taken into accounts comments that say that changing the whole theme might be too big of a change, so i propose the following :

This changes the color theme to gruvbox but only for code snippets, and in the case of the light theme, does not use the yellow gruvbox backgrounds, but keeps the old one. It should feel much more familiar, but still include the very nice refactoring I did. This refactoring is a bit impaired by the necessity to have two color palette, but it is still nicer than the previous situation.

Julow

The new colors are a lot more pleasing to me!

Thanks for only changing the code blocks as I think the gruvbox colors don't fit with documentation (contrasts are too low).

Julow · 2024-01-22T14:57:58Z

src/html_support_files/odoc.css

+    --odoc-blue: #5c9cf5;
+    --odoc-bg: #202020;
+    --odoc-bg1: #252525;
+    --odoc-fg: #bebebe;
+    --odoc-fg1: #777;


What is the intent behind these vars ?
The --bg* and --fg* vars are used a lot in the documentation styles except for the most important elements, which use these special colors.

These color are the odoc blue and odoc background. --bg is the gruvbox background and --blue is the gruvbox blue.
I could have used --gruvbox-blue and --blue instead, but it seemed unpractical to me.

Julow · 2024-01-22T15:01:31Z

I would be happy to merge once this is rebased.

Julow · 2024-01-23T10:36:51Z

Let's merge!

@jonludlam

CHANGES: ### Highlight - Hierarchical documentation (@jonludlam, @panglesd, @Julow) Pages can now be organized in a directory tree structure. Relative and absolute references are added: `{!./other_page.label}`, `{!//other_page}`. - Improved sidebar and breadcrumbs navigation (@panglesd, @gpetiot) The documentation pages and the libraries of the entire package are shown on the left sidebar. - Added support for images, videos, audio and other assets The syntax is `{image!/reference/to/asset}` or `{image:URL}` for images. The syntax for `{video...}` and `{audio...}` is the same. (@panglesd, @EmileTrotignon, ocaml/odoc#1170, ocaml/odoc#1171, ocaml/odoc#1184, ocaml/odoc#1185) - Search using Sherlodoc (@panglesd, @EmileTrotignon, @Julow) A new search bar that supports full-text and type-based search. ### Added - Experimental driver (@jonludlam, @panglesd) The driver builds the documentation for a collection of Opam packages using the newer Odoc features. It supports linking external packages to ocaml.org and markdown files. This is experimental and will break in the future. - Cross-package references (@panglesd, @Julow) Pages and modules from other packages can be referenced: `{!/otherpackage/page}`, `{!/otherpackage/Module.t}`. - Option to remap links to other packages to ocaml.org or other site. See the `--remap` option of the driver or the `--remap-file` option of `odoc html-generate`. (@jonludlam, ocaml/odoc#1189, ocaml/odoc#1248) - Option to compute occurrences of use of each identifiers The commands `aggregate-occurrences` and `count-occurrences` are added. (@panglesd, ocaml/odoc#976, ocaml/odoc#1076, ocaml/odoc#1206) - Added the `odoc classify` command (@jonludlam, ocaml/odoc#1121) Helps driver detecting which modules belong to which libraries. - Added `--suppress-warnings` to the CLI to remove warnings from a unit, even if they end up being raised in another unit through expansion (@jonludlam, ocaml/odoc#1260) - Add clock emoji before `@since` tag (@yawaramin, ocaml/odoc#1089) - Navigation for the search bar : use '/' to enter search, up and down arrows to select a result, and enter to follow the selected link. (@EmileTrotignon, ocaml/odoc#1088) - Fix a big gap between the preamble and the content of a page (@EmileTrotignon, ocaml/odoc#1147) - Add a marshalled search index consumable by sherlodoc (@EmileTrotignon, @panglesd, ocaml/odoc#1084) - Allow referencing of polymorphic constructors in polymorphic variant type aliases (@panglesd, ocaml/odoc#1115) - Added a home icon in the breacrumbs (@panglesd, ocaml/odoc#1251) It can be disabled with a CLI option. - Add a frontmatter syntax for mld pages (@panglesd, ocaml/odoc#1187, ocaml/odoc#1193, ocaml/odoc#1243, ocaml/odoc#1246, ocaml/odoc#1251) Allows to specify the title of a page, the order of sub-pages and other behaviors in the sidebar. - Added `odoc-md` to process standalone Markdown pages (@jonludlam, ocaml/odoc#1234) ### Changed - The command line interface changed to support the new features. + Packages and libraries: `odoc link` must now be aware of packages and libraries with the `-L libname:path` and `-P pkgname:path` options. The module search path should still be passed with the `-I` option. The current package should be specified with `--current-package=pkgname`. + Hierarchy: `odoc compile` now outputs `.odoc` in the directory tree specified with `--output-dir=DIR` and the parent identifier must be specified with `--parent-id=PARENT`. The option `--source-parent-file` is removed. + Source code: Implementations are compiled with `compile-impl` instead of with `compile`. The options `--cmt=..` and `--source-name=..` are removed. Source code pages are generated with `html-generate-source`. + Assets: The commands `compile-asset`, `html-generate-asset` are added. The option `html-generate --asset` is removed. + Sidebar: The index is built using `compile-index`. The sidebar data is extracted from the index with `sidebar-generate` and passed to `html-generate --sidebar=..`. - The syntax for `@tag` is now delimited (@panglesd, ocaml/odoc#1239) A `@tag` can now be followed by a paragraph or other elements. - Updated colors for code fragments (@EmileTrotignon, ocaml/odoc#1023) - Fixed complexity of looking up `.odoc` files (@panglesd, ocaml/odoc#1075) - Normalize whitespaces in codespans (@gpetiot, ocaml/odoc#1085) A newline followed by any whitespaces is normalized as one space character. - Reduce size of `Odoc_html_frontend` when compiled to javascript (@EmileTrotignon, ocaml/odoc#1072) - Overhaul of module-type-of expansions and shadowing code (@jonludlam, ocaml/odoc#1081) - Output file paths and labels in the man and latex backends changed to avoid name clashes (@Julow, ocaml/odoc#1191) ### Fixed - Fix variant constructors being hidden if they contain hidden types (@jonludlam, ocaml/odoc#1105) - Fix rare assertion failure due to optional parameters (@jonludlam, ocaml/odoc#1272, issue ocaml/odoc#1001) - Fix resolution of module synopses in {!modules} lists that require --open (@jonludlam, ocaml/odoc#1104} - Fix top comment not being taken from includes often enough (@panglesd, ocaml/odoc#1117) - Fixed 404 links from search results (@panglesd, ocaml/odoc#1108) - Fixed title content not being picked up across pages when rendering references (ocaml/odoc#1116, @panglesd) - Fix wrong links to standalone comments in search results (ocaml/odoc#1118, @panglesd) - Remove duplicated or unwanted comments with inline includes (@Julow, ocaml/odoc#1133) - Fix bug where source rendering would cause odoc to fail completely if it encounters invalid syntax (@jonludlam ocaml/odoc#1208) - Add missing parentheses in 'val (let*) : ...' (@Julow, ocaml/odoc#1268) - Fix syntax highlighting not working for very large files (@jonludlam, @Julow, ocaml/odoc#1277)

@jonludlam

CHANGES: - Hierarchical documentation (@jonludlam, @panglesd, @Julow) Pages can now be organized in a directory tree structure. Relative and absolute references are added: `{!./other_page.label}`, `{!//other_page}`. - Improved sidebar and breadcrumbs navigation (@panglesd, @gpetiot) The documentation pages and the libraries of the entire package are shown on the left sidebar. - Added support for images, videos, audio and other assets The syntax is `{image!/reference/to/asset}` or `{image:URL}` for images. The syntax for `{video...}` and `{audio...}` is the same. (@panglesd, @EmileTrotignon, ocaml/odoc#1170, ocaml/odoc#1171, ocaml/odoc#1184, ocaml/odoc#1185) - Search using Sherlodoc (@panglesd, @EmileTrotignon, @Julow) A new search bar that supports full-text and type-based search. - Experimental driver (@jonludlam, @panglesd) The driver builds the documentation for a collection of Opam packages using the newer Odoc features. It supports linking external packages to ocaml.org and markdown files. This is experimental and will break in the future. - Cross-package references (@panglesd, @Julow) Pages and modules from other packages can be referenced: `{!/otherpackage/page}`, `{!/otherpackage/Module.t}`. - Option to remap links to other packages to ocaml.org or other site. See the `--remap` option of the driver or the `--remap-file` option of `odoc html-generate`. (@jonludlam, ocaml/odoc#1189, ocaml/odoc#1248) - Option to compute occurrences of use of each identifiers The commands `aggregate-occurrences` and `count-occurrences` are added. (@panglesd, ocaml/odoc#976, ocaml/odoc#1076, ocaml/odoc#1206) - Added the `odoc classify` command (@jonludlam, ocaml/odoc#1121) Helps driver detecting which modules belong to which libraries. - Added `--suppress-warnings` to the CLI to remove warnings from a unit, even if they end up being raised in another unit through expansion (@jonludlam, ocaml/odoc#1260) - Add clock emoji before `@since` tag (@yawaramin, ocaml/odoc#1089) - Navigation for the search bar : use '/' to enter search, up and down arrows to select a result, and enter to follow the selected link. (@EmileTrotignon, ocaml/odoc#1088) - Fix a big gap between the preamble and the content of a page (@EmileTrotignon, ocaml/odoc#1147) - Add a marshalled search index consumable by sherlodoc (@EmileTrotignon, @panglesd, ocaml/odoc#1084) - Allow referencing of polymorphic constructors in polymorphic variant type aliases (@panglesd, ocaml/odoc#1115) - Added a home icon in the breacrumbs (@panglesd, ocaml/odoc#1251) It can be disabled with a CLI option. - Add a frontmatter syntax for mld pages (@panglesd, ocaml/odoc#1187, ocaml/odoc#1193, ocaml/odoc#1243, ocaml/odoc#1246, ocaml/odoc#1251) Allows to specify the title of a page, the order of sub-pages and other behaviors in the sidebar. - Added `odoc-md` to process standalone Markdown pages (@jonludlam, ocaml/odoc#1234) - The command line interface changed to support the new features. + Packages and libraries: `odoc link` must now be aware of packages and libraries with the `-L libname:path` and `-P pkgname:path` options. The module search path should still be passed with the `-I` option. The current package should be specified with `--current-package=pkgname`. + Hierarchy: `odoc compile` now outputs `.odoc` in the directory tree specified with `--output-dir=DIR` and the parent identifier must be specified with `--parent-id=PARENT`. The option `--source-parent-file` is removed. + Source code: Implementations are compiled with `compile-impl` instead of with `compile`. The options `--cmt=..` and `--source-name=..` are removed. Source code pages are generated with `html-generate-source`. + Assets: The commands `compile-asset`, `html-generate-asset` are added. The option `html-generate --asset` is removed. + Sidebar: The index is built using `compile-index`. The sidebar data is extracted from the index with `sidebar-generate` and passed to `html-generate --sidebar=..`. - The syntax for `@tag` is now delimited (@panglesd, ocaml/odoc#1239) A `@tag` can now be followed by a paragraph or other elements. - Updated colors for code fragments (@EmileTrotignon, ocaml/odoc#1023) - Fixed complexity of looking up `.odoc` files (@panglesd, ocaml/odoc#1075) - Normalize whitespaces in codespans (@gpetiot, ocaml/odoc#1085) A newline followed by any whitespaces is normalized as one space character. - Reduce size of `Odoc_html_frontend` when compiled to javascript (@EmileTrotignon, ocaml/odoc#1072) - Overhaul of module-type-of expansions and shadowing code (@jonludlam, ocaml/odoc#1081) - Output file paths and labels in the man and latex backends changed to avoid name clashes (@Julow, ocaml/odoc#1191) - Fix variant constructors being hidden if they contain hidden types (@jonludlam, ocaml/odoc#1105) - Fix rare assertion failure due to optional parameters (@jonludlam, ocaml/odoc#1272, issue ocaml/odoc#1001) - Fix resolution of module synopses in {!modules} lists that require --open (@jonludlam, ocaml/odoc#1104} - Fix top comment not being taken from includes often enough (@panglesd, ocaml/odoc#1117) - Fixed 404 links from search results (@panglesd, ocaml/odoc#1108) - Fixed title content not being picked up across pages when rendering references (ocaml/odoc#1116, @panglesd) - Fix wrong links to standalone comments in search results (ocaml/odoc#1118, @panglesd) - Remove duplicated or unwanted comments with inline includes (@Julow, ocaml/odoc#1133) - Fix bug where source rendering would cause odoc to fail completely if it encounters invalid syntax (@jonludlam ocaml/odoc#1208) - Add missing parentheses in 'val (let*) : ...' (@Julow, ocaml/odoc#1268) - Fix syntax highlighting not working for very large files (@jonludlam, @Julow, ocaml/odoc#1277)

panglesd reviewed Oct 20, 2023

View reviewed changes

EmileTrotignon force-pushed the gruvbox-colors branch from ccba454 to 06c022a Compare November 7, 2023 15:08

EmileTrotignon added the after-2.4 label Dec 5, 2023

Julow mentioned this pull request Jan 22, 2024

Dark mode for code snippets #1020

Closed

Julow approved these changes Jan 22, 2024

View reviewed changes

EmileTrotignon force-pushed the gruvbox-colors branch from 18747ab to bfb0b06 Compare January 22, 2024 15:41

EmileTrotignon added 3 commits January 23, 2024 11:21

change color to gruvbox theme

c9ffff6

partial return to old theme

723437c

changes.md

f74e758

EmileTrotignon force-pushed the gruvbox-colors branch from 3ae32e2 to f74e758 Compare January 23, 2024 10:21

Julow merged commit 0bbf974 into ocaml:master Jan 23, 2024
9 of 10 checks passed

jonludlam mentioned this pull request Jan 23, 2025

[new release] odoc (5 packages) (3.0.0~beta1) ocaml/opam-repository#27309

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

change color to gruvbox theme #1023

change color to gruvbox theme #1023

EmileTrotignon commented Oct 19, 2023

dbuenzli commented Oct 19, 2023

panglesd commented Oct 20, 2023

EmileTrotignon commented Oct 20, 2023

panglesd left a comment

panglesd Oct 20, 2023

EmileTrotignon Oct 20, 2023

panglesd Oct 20, 2023

panglesd Oct 20, 2023

EmileTrotignon Oct 20, 2023

EmileTrotignon commented Nov 8, 2023

Julow left a comment

Julow Jan 22, 2024

EmileTrotignon Jan 22, 2024

Julow commented Jan 22, 2024

Julow commented Jan 23, 2024

change color to gruvbox theme #1023

change color to gruvbox theme #1023

Conversation

EmileTrotignon commented Oct 19, 2023

dbuenzli commented Oct 19, 2023

panglesd commented Oct 20, 2023

EmileTrotignon commented Oct 20, 2023

panglesd left a comment

Choose a reason for hiding this comment

panglesd Oct 20, 2023

Choose a reason for hiding this comment

EmileTrotignon Oct 20, 2023

Choose a reason for hiding this comment

panglesd Oct 20, 2023

Choose a reason for hiding this comment

panglesd Oct 20, 2023

Choose a reason for hiding this comment

EmileTrotignon Oct 20, 2023

Choose a reason for hiding this comment

EmileTrotignon commented Nov 8, 2023

Julow left a comment

Choose a reason for hiding this comment

Julow Jan 22, 2024

Choose a reason for hiding this comment

EmileTrotignon Jan 22, 2024

Choose a reason for hiding this comment

Julow commented Jan 22, 2024

Julow commented Jan 23, 2024