From 060d049dee02049168316f501dcf1cf7b227f1bd Mon Sep 17 00:00:00 2001 From: Earlopain <14981592+Earlopain@users.noreply.github.com> Date: Thu, 5 Dec 2024 09:28:28 +0100 Subject: [PATCH 1/2] Import rails guides color theme for dark mode * The current background is _very_ dark * Hovered links appear white * Better contrast on code blocks --- .../generator/template/rails/resources/css/main.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/rdoc/generator/template/rails/resources/css/main.css b/lib/rdoc/generator/template/rails/resources/css/main.css index 06563f21..cb838a8f 100644 --- a/lib/rdoc/generator/template/rails/resources/css/main.css +++ b/lib/rdoc/generator/template/rails/resources/css/main.css @@ -76,12 +76,13 @@ body { @media (prefers-color-scheme: dark) { :root { - --text-color: #dddddd; - --link-color: #ee3f3f; + --text-color: #e5e5e5; + --link-color: #f06b6e; + --link-hover-color: #ec3d41; - --body-bg: #0c0c0c; - --code-bg: #1b1b1b; - --source-code-bg: #000000; + --body-bg: #181818; + --code-bg: #292929; + --source-code-bg: #292929; } } From a86c27f10140e52b4a70ef6e61aaab8209e1b207 Mon Sep 17 00:00:00 2001 From: Earlopain <14981592+Earlopain@users.noreply.github.com> Date: Thu, 5 Dec 2024 14:45:42 +0100 Subject: [PATCH 2/2] Import rails guides color theme for highlight.js Rails guides always have codeblocks themed dark. Might make sense here as well, but this just uses the same colors. Mostly colors are more softer. Comments have better contrast. --- .../rails/resources/css/highlight.css | 101 +++++++++--------- 1 file changed, 53 insertions(+), 48 deletions(-) diff --git a/lib/rdoc/generator/template/rails/resources/css/highlight.css b/lib/rdoc/generator/template/rails/resources/css/highlight.css index 936ced4c..eb3d7e84 100644 --- a/lib/rdoc/generator/template/rails/resources/css/highlight.css +++ b/lib/rdoc/generator/template/rails/resources/css/highlight.css @@ -209,70 +209,75 @@ background-color: transparent; } +/* From https://github.com/rails/rails/blob/44673c80bde08f17659a709279972827ffa0ae64/guides/assets/stylesrc/highlight.scss */ + @media (prefers-color-scheme: dark) { .highlight pre { background-color: #272822; } .highlight .hll { background-color: #272822; } - .highlight .c { color: #75715e } /* Comment */ - .highlight .err { color: #960050; background-color: #1e0010 } /* Error */ - .highlight .k { color: #66d9ef } /* Keyword */ - .highlight .l { color: #ae81ff } /* Literal */ + .highlight .c { color: #b4b4b3 } /* Comment */ + .highlight .err { color: #ff0088; background-color: #1e0010 } /* Error */ + .highlight .k { color: #9decfc } /* Keyword */ + .highlight .l { color: #cfb7fd } /* Literal */ .highlight .n { color: #f8f8f2 } /* Name */ - .highlight .o { color: #f92672 } /* Operator */ + .highlight .o { color: #ff699b } /* Operator */ .highlight .p { color: #f8f8f2 } /* Punctuation */ - .highlight .cm { color: #75715e } /* Comment.Multiline */ - .highlight .cp { color: #75715e } /* Comment.Preproc */ - .highlight .c1 { color: #75715e } /* Comment.Single */ - .highlight .cs { color: #75715e } /* Comment.Special */ + .highlight .pi { color: #c74646; } /* Punctuation.Indicator */ + .highlight .cm { color: #b4b4b3 } /* Comment.Multiline */ + .highlight .cp { color: #b4b4b3 } /* Comment.Preproc */ + .highlight .c1 { color: #b4b4b3 } /* Comment.Single */ + .highlight .cs { color: #b4b4b3 } /* Comment.Special */ .highlight .ge { font-style: italic } /* Generic.Emph */ .highlight .gs { font-weight: bold } /* Generic.Strong */ - .highlight .kc { color: #66d9ef } /* Keyword.Constant */ - .highlight .kd { color: #66d9ef } /* Keyword.Declaration */ - .highlight .kn { color: #f92672 } /* Keyword.Namespace */ - .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */ - .highlight .kr { color: #66d9ef } /* Keyword.Reserved */ - .highlight .kt { color: #66d9ef } /* Keyword.Type */ - .highlight .ld { color: #e6db74 } /* Literal.Date */ - .highlight .m { color: #ae81ff } /* Literal.Number */ - .highlight .s { color: #e6db74 } /* Literal.String */ - .highlight .na { color: #a6e22e } /* Name.Attribute */ + .highlight .kc { color: #9decfc } /* Keyword.Constant */ + .highlight .kd { color: #9decfc } /* Keyword.Declaration */ + .highlight .kn { color: #ff699b } /* Keyword.Namespace */ + .highlight .kp { color: #9decfc } /* Keyword.Pseudo */ + .highlight .kr { color: #9decfc } /* Keyword.Reserved */ + .highlight .kt { color: #9decfc } /* Keyword.Type */ + .highlight .ld { color: #fff5ab } /* Literal.Date */ + .highlight .m { color: #cfb7fd } /* Literal.Number */ + .highlight .s { color: #fff5ab } /* Literal.String */ + .highlight .na { color: #d0ff71 } /* Name.Attribute */ .highlight .nb { color: #f8f8f2 } /* Name.Builtin */ - .highlight .nc { color: #a6e22e } /* Name.Class */ - .highlight .no { color: #66d9ef } /* Name.Constant */ - .highlight .nd { color: #a6e22e } /* Name.Decorator */ + .highlight .nc { color: #d0ff71 } /* Name.Class */ + .highlight .no { color: #9decfc } /* Name.Constant */ + .highlight .nd { color: #d0ff71 } /* Name.Decorator */ .highlight .ni { color: #f8f8f2 } /* Name.Entity */ - .highlight .ne { color: #a6e22e } /* Name.Exception */ - .highlight .nf { color: #a6e22e } /* Name.Function */ + .highlight .ne { color: #d0ff71 } /* Name.Exception */ + .highlight .nf { color: #d0ff71 } /* Name.Function */ .highlight .nl { color: #f8f8f2 } /* Name.Label */ .highlight .nn { color: #f8f8f2 } /* Name.Namespace */ - .highlight .nx { color: #a6e22e } /* Name.Other */ + .highlight .nx { color: #d0ff71 } /* Name.Other */ .highlight .py { color: #f8f8f2 } /* Name.Property */ - .highlight .nt { color: #f92672 } /* Name.Tag */ + .highlight .nt { color: #ff699b } /* Name.Tag */ .highlight .nv { color: #f8f8f2 } /* Name.Variable */ - .highlight .ow { color: #f92672 } /* Operator.Word */ + .highlight .ow { color: #ff699b } /* Operator.Word */ .highlight .w { color: #f8f8f2 } /* Text.Whitespace */ - .highlight .mf { color: #ae81ff } /* Literal.Number.Float */ - .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */ - .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */ - .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */ - .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */ - .highlight .sc { color: #e6db74 } /* Literal.String.Char */ - .highlight .sd { color: #e6db74 } /* Literal.String.Doc */ - .highlight .s2 { color: #e6db74 } /* Literal.String.Double */ - .highlight .se { color: #ae81ff } /* Literal.String.Escape */ - .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */ - .highlight .si { color: #e6db74 } /* Literal.String.Interpol */ - .highlight .sx { color: #e6db74 } /* Literal.String.Other */ - .highlight .sr { color: #e6db74 } /* Literal.String.Regex */ - .highlight .s1 { color: #e6db74 } /* Literal.String.Single */ - .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */ + .highlight .mf { color: #cfb7fd } /* Literal.Number.Float */ + .highlight .mh { color: #cfb7fd } /* Literal.Number.Hex */ + .highlight .mi { color: #cfb7fd } /* Literal.Number.Integer */ + .highlight .mo { color: #cfb7fd } /* Literal.Number.Oct */ + .highlight .sb { color: #fff5ab } /* Literal.String.Backtick */ + .highlight .sc { color: #fff5ab } /* Literal.String.Char */ + .highlight .sd { color: #fff5ab } /* Literal.String.Doc */ + .highlight .s2 { color: #fff5ab } /* Literal.String.Double */ + .highlight .se { color: #cfb7fd } /* Literal.String.Escape */ + .highlight .sh { color: #fff5ab } /* Literal.String.Heredoc */ + .highlight .si { color: #fff5ab } /* Literal.String.Interpol */ + .highlight .sx { color: #fff5ab } /* Literal.String.Other */ + .highlight .sr { color: #fff5ab } /* Literal.String.Regex */ + .highlight .s1 { color: #fff5ab } /* Literal.String.Single */ + .highlight .ss { color: #fff5ab } /* Literal.String.Symbol */ .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */ .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */ .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */ - .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */ - - .highlight .gh { } /* Generic Heading & Diff Header */ - .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ - .highlight .gd { color: #f92672; background-color: unset; } /* Generic.Deleted & Diff Deleted */ - .highlight .gi { color: #a6e22e; background-color: unset; } /* Generic.Inserted & Diff Inserted */ + .highlight .il { color: #cfb7fd } /* Literal.Number.Integer.Long */ + .highlight .gh { color: #b4b4b3; } /* Generic Heading & Diff Header */ + .highlight .gu { color: #9e9b8a; } /* Generic.Subheading & Diff Unified/Comment? */ + .highlight .gd { color: #ff699b; background-color: unset; } /* Generic.Deleted & Diff Deleted */ + .highlight .gi { color: #d0ff71; background-color: unset; } /* Generic.Inserted & Diff Inserted */ + .highlight .gr { color: #ff699b; } + .highlight .go { color: #b4b4b3; } + .highlight .gp { color: #fff; } }