Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link color using default indigo instead of custom primary #4755

Closed
5 tasks done
kcgthb opened this issue Dec 13, 2022 · 13 comments
Closed
5 tasks done

Link color using default indigo instead of custom primary #4755

kcgthb opened this issue Dec 13, 2022 · 13 comments
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open

Comments

@kcgthb
Copy link
Contributor

kcgthb commented Dec 13, 2022

Contribution guidelines

I've found a bug and checked that ...

  • ... the problem doesn't occur with the mkdocs or readthedocs themes
  • ... the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • ... the documentation does not mention anything about my problem
  • ... there are no open or closed issues that are related to my problem

Description

This looks a lot like #4620, except the custom primary color is correctly applied to the header, but not to <a> hyperlinks, which appear to still be using the default indigo color.

Expected behaviour

Hyperlinks use the custom --md-primary-fg-color color.

Actual behaviour

Hyperlinks use the default indigo color.

Steps to reproduce

With the following extra_css:

[data-md-color-scheme="sherlock"] {
  --md-primary-fg-color:               #8c1515;
  --md-primary-fg-color--light:        #b1040e;
  --md-primary-fg-color--dark:         #820000;
  --md-accent-fg-color:                #b1040e;
  --md-accent-fg-color--transparent:   #b1040e0a;
}

and this in mkdocs.yml:

  palette:
    - scheme: sherlock

the site renders like this:
image

Hyperlinks are rendered as #4051b5 instead of #8c1515 like the header.


When changing the extra_css syntax to use custom colors instead of a custom color scheme, things seem to work as expected.

With no palette in mkdocs.yml, and the following as extra_css:

:root > * { 
  --md-primary-fg-color:               #8c1515;
  --md-primary-fg-color--light:        #b1040e;
  --md-primary-fg-color--dark:         #820000;
  --md-accent-fg-color:                #b1040e;
  --md-accent-fg-color--transparent:   #b1040e0a;
}

hyperlinks are correctly rendered as the custom --md-primary-fg-color:
image

Package versions

  • Python: 3.10.9
  • MkDocs: 1.4.2
  • Material: 8.5.11+insiders.4.26.6

Configuration

palette:
    - scheme: custom

System information

  • Operating system: All
  • Browser: All
@squidfunk
Copy link
Owner

Thanks for reporting. Does it also happen with the latest beta? Please check #4714.

@squidfunk squidfunk added the needs input Issue needs further input by the reporter label Dec 13, 2022
@kcgthb
Copy link
Contributor Author

kcgthb commented Dec 14, 2022

Thanks for the suggestion! I just tried 9.0.0b4 but stumbled upon an error building/serving the site:

ERROR    -  Error building page 'docs/index.md': Replacement index 0 out of range for positional args tuple
Traceback (most recent call last):
  File "/usr/bin/mkdocs", line 6, in <module>
    cli()
  File "/usr/lib/python3/dist-packages/click/core.py", line 1130, in __call__
    return self.main(*args, **kwargs)
  File "/usr/lib/python3/dist-packages/click/core.py", line 1055, in main
    rv = self.invoke(ctx)
  File "/usr/lib/python3/dist-packages/click/core.py", line 1657, in invoke
    return _process_result(sub_ctx.command.invoke(sub_ctx))
  File "/usr/lib/python3/dist-packages/click/core.py", line 1404, in invoke
    return ctx.invoke(self.callback, **ctx.params)
  File "/usr/lib/python3/dist-packages/click/core.py", line 760, in invoke
    return __callback(*args, **kwargs)
  File "/usr/lib/python3/dist-packages/mkdocs/__main__.py", line 234, in serve_command
    serve.serve(dev_addr=dev_addr, livereload=livereload, watch=watch, **kwargs)
  File "/usr/lib/python3/dist-packages/mkdocs/commands/serve.py", line 83, in serve
    builder(config)
  File "/usr/lib/python3/dist-packages/mkdocs/commands/serve.py", line 76, in builder
    build(config, live_server=live_server, dirty=dirty)
  File "/usr/lib/python3/dist-packages/mkdocs/commands/build.py", line 329, in build
    _build_page(file.page, config, doc_files, nav, env, dirty)
  File "/usr/lib/python3/dist-packages/mkdocs/commands/build.py", line 231, in _build_page
    output = template.render(context)
  File "/usr/lib/python3/dist-packages/jinja2/environment.py", line 1291, in render
    self.environment.handle_exception()
  File "/usr/lib/python3/dist-packages/jinja2/environment.py", line 925, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "/home/kilian/Work/Web/sherlock/main/overrides/main.html", line 1, in top-level template code
    {% extends "base.html" %}
  File "/home/kilian/.local/lib/python3.10/site-packages/material/base.html", line 173, in top-level template code
    {% block container %}
  File "/home/kilian/.local/lib/python3.10/site-packages/material/base.html", line 176, in block 'container'
    {% block content %}
  File "/home/kilian/.local/lib/python3.10/site-packages/material/base.html", line 177, in block 'content'
    {% include "partials/content.html" %}
  File "/home/kilian/.local/lib/python3.10/site-packages/material/partials/content.html", line 18, in top-level template code
    {% include "partials/feedback.html" %}
  File "/home/kilian/.local/lib/python3.10/site-packages/material/partials/feedback.html", line 35, in top-level template code
    {{ rating.note.format(url = url, title = title) }}
IndexError: Replacement index 0 out of range for positional args tuple

That's with the same mkdocs.yml that's working with mkdocs-material-8.5.11-insiders-4.26.6.

Trying to isolate the issue now, but I'm not exactly sure where to look, because docs/index.md doesn't have any front-matter that would override the defaults, and we don't have any partial override for feedback either. So if you have any pointers :)

@kcgthb
Copy link
Contributor Author

kcgthb commented Dec 14, 2022

Ok, found the cause: turns out we had a {} in the URL for our feedback form (in a feedback.ratings.note value), that tripped the parser in 9.0.0b4 (but somehow did not cause any issue in 8.5).

Anyway, back to the original question: yes, I can reproduce the same behavior with the latest beta, except that using :root > * instead of [data-md-color-scheme="custom"] in the custom CSS doesn't work as a workaround anymore: indigo is used for hyperlinks in both cases:

image

@squidfunk
Copy link
Owner

Ok, found the cause: turns out we had a {} in the URL for our feedback form (in a feedback.ratings.note value), that tripped the parser in 9.0.0b4 (but somehow did not cause any issue in 8.5).

Could you please report this in #4714? That way we won't forget to add it to the changelog. The format changed and the nameless placeholders were removed in v9.

Regarding the issue: I see. The problem is that it is impossible to anticipate and cater to all use cases that users employ to override the CSS. There will always be some combinations that need extra work. I will investigate if this can be fixed, but otherwise I would kindly ask you to make the CSS selector more specific. This will work in any case.

@squidfunk
Copy link
Owner

squidfunk commented Dec 14, 2022

Okay, I think I found the cause. First of all, if you set your colors on :root, it should work as expected:

:root {
  --md-primary-fg-color: #8c1515;
  --md-primary-fg-color--light: #b1040e;
  --md-primary-fg-color--dark: #820000;
  --md-accent-fg-color: #b1040e;
  --md-accent-fg-color--transparent: #b1040e0a;
}

This does not match the documentation, which I'll update in a second. In fact, we changed it recently (can't find the issue right now, GitHub please improve issue search). The problem is that when you override the variables as part of a color scheme, the typeset variable is not changed and will keep the value that was set on the :root, because that's how CSS variables work. This is also the reason why the default scheme and slate scheme both need to redefine all variables:

[data-md-color-scheme="default"] {
@extend %root;
}

The slate scheme overrides all variables anyway, which is why it doesn't extend the %root placeholder in this instance. So, how can you solve the problem? By setting the variables explicitly again for your color scheme:

[data-md-color-scheme="slate"] {
// Slate's hue in the range [0,360] - change this variable to alter the tone
// of the theme, e.g. to make it more redish or greenish. This is a slate-
// specific variable, but the same approach may be adapted to custom themes.
--md-hue: 232;
// Default color shades
--md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1);
--md-default-fg-color--light: hsla(var(--md-hue), 75%, 90%, 0.62);
--md-default-fg-color--lighter: hsla(var(--md-hue), 75%, 90%, 0.32);
--md-default-fg-color--lightest: hsla(var(--md-hue), 75%, 90%, 0.12);
--md-default-bg-color: hsla(var(--md-hue), 15%, 21%, 1);
--md-default-bg-color--light: hsla(var(--md-hue), 15%, 21%, 0.54);
--md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 21%, 0.26);
--md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 21%, 0.07);
// Code color shades
--md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 1);
--md-code-bg-color: hsla(var(--md-hue), 15%, 15%, 1);
// Code highlighting color shades
--md-code-hl-color: hsla(#{hex2hsl($clr-blue-a200)}, 0.15);
--md-code-hl-number-color: hsla(6, 74%, 63%, 1);
--md-code-hl-special-color: hsla(340, 83%, 66%, 1);
--md-code-hl-function-color: hsla(291, 57%, 65%, 1);
--md-code-hl-constant-color: hsla(250, 62%, 70%, 1);
--md-code-hl-keyword-color: hsla(219, 66%, 64%, 1);
--md-code-hl-string-color: hsla(150, 58%, 44%, 1);
--md-code-hl-name-color: var(--md-code-fg-color);
--md-code-hl-operator-color: var(--md-default-fg-color--light);
--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
--md-code-hl-comment-color: var(--md-default-fg-color--light);
--md-code-hl-generic-color: var(--md-default-fg-color--light);
--md-code-hl-variable-color: var(--md-default-fg-color--light);
// Typeset color shades
--md-typeset-color: var(--md-default-fg-color);
// Typeset `a` color shades
--md-typeset-a-color: var(--md-primary-fg-color);
// Typeset `mark` color shades
--md-typeset-mark-color: hsla(#{hex2hsl($clr-blue-a200)}, 0.3);
// Typeset `kbd` color shades
--md-typeset-kbd-color: hsla(var(--md-hue), 15%, 94%, 0.12);
--md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 94%, 0.2);
--md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1);
// Typeset `table` color shades
--md-typeset-table-color: hsla(var(--md-hue), 75%, 95%, 0.12);
// Admonition color shades
--md-admonition-fg-color: var(--md-default-fg-color);
--md-admonition-bg-color: var(--md-default-bg-color);
// Footer color shades
--md-footer-bg-color: hsla(var(--md-hue), 15%, 12%, 0.87);
--md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 10%, 1);
// Shadow depth 1
--md-shadow-z1:
0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2),
0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);
// Shadow depth 2
--md-shadow-z2:
0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.3),
0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25);
// Shadow depth 3
--md-shadow-z3:
0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.4),
0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35);
// Hide images for light mode
img[src$="#only-light"],
img[src$="#gh-light-mode-only"] {
display: none;
}
// Show images for dark mode
img[src$="#only-dark"],
img[src$="#gh-dark-mode-only"] {
display: initial;
}
}

Yes, it's not ideal, but the problem is that there are so many different combinations of enabling primary and accent colors and overriding stuff, that it is absolutely impossible to cater to all of those cases.

[data-md-color-scheme="sherlock"] {
  --md-primary-fg-color: #8c1515;
  --md-primary-fg-color--light: #b1040e;
  --md-primary-fg-color--dark: #820000;
  --md-accent-fg-color: #b1040e;
  --md-accent-fg-color--transparent: #b1040e0a;

  --md-typeset-a-color: var(--md-primary-fg-color);
}

This is only the case because you define a new color scheme. I'm closing this issue as not fixable, but it is actually fixable by you, the user, by providing the additional variables that you want overwritten. I'm sorry for the inconvenience.

@squidfunk squidfunk added bug Issue reports a bug not fixable Issue concerns an unfixable bug resolved Issue is resolved, yet unreleased if open and removed needs input Issue needs further input by the reporter not fixable Issue concerns an unfixable bug labels Dec 14, 2022
@squidfunk
Copy link
Owner

I made up my mind: I changed it to "fix available" because it can be fixed with one additional line.

@kcgthb
Copy link
Contributor Author

kcgthb commented Dec 14, 2022

Thanks @squidfunk !

Could you please report this in #4714? That way we won't forget to add it to the changelog. The format changed and the nameless placeholders were removed in v9.

Sure, done. And thanks for the pointer!

Regarding the issue: I see. The problem is that it is impossible to anticipate and cater to all use cases that users employ to override the CSS. There will always be some combinations that need extra work. I will investigate if this can be fixed, but otherwise I would kindly ask you to make the CSS selector more specific. This will work in any case.

I'm just adding an extra CSS with a custome [data-md-color-scheme="custom"] { } color scheme, as indicated in the documentation, with the expectation that all <a> tags will use the --md-primary-fg-color color.

But I see your point about the need to redefine all the variables.

I made up my mind: I changed it to "fix available" because it can be fixed with one additional line.

Looking forward to that fix or documentation update ;)
Thanks again!

@kcgthb
Copy link
Contributor Author

kcgthb commented Dec 14, 2022

Actually, I can easily reproduce the original issue just by cloning the MkDocs Material repo, and following the docs to create a custom color scheme.

mkdocs.yml:

theme:
  palette:
    - scheme: youtube

extra_css:
  - assets/stylesheets/custom.css 

docs/assets/stylesheets/custom.css:

[data-md-color-scheme="youtube"] {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

image

@squidfunk
Copy link
Owner

squidfunk commented Dec 15, 2022

Yes, as I said, it's just not possible with custom color schemes. Very few users do that, actually, so it's nothing we can optimize for. Most users override colors on :root or existing color schemes.

@kcgthb
Copy link
Contributor Author

kcgthb commented Dec 15, 2022

Got it.

So if it's not possible to do it anymore, would it be worth updating the documentation to remove the Custom color schemes section?

@squidfunk
Copy link
Owner

Yes, PR appreciated. Something that notes that if you use a custom color scheme, you need to redefine all deduced variables. As said, it's not necessary if you just override colors on :root.

@kcgthb
Copy link
Contributor Author

kcgthb commented Dec 16, 2022

Sorry, but I'm a bit confused here: if the only way to override colors is to do it on :root, how can it be combined with custom color schemes like [data-md-color-scheme="youtube"]? Do you have an example?

Right now, in the documentation, there are two approaches proposed:

  1. custom colors
  2. custom color schemes

If the only working way is to use 1., then 2. should probably be removed from the documentation to avoid any confusion.

@squidfunk
Copy link
Owner

squidfunk commented Dec 16, 2022

A custom color scheme would need to enumerate all variables again in order to override all of them. Otherwise for some the defaults would be used, as they are "locked in" one level aboce the body element, where custom color schemes are applied. Thus, the custom colors section doesn't suffer from this problem, only custom color schemes.

We could remove custom color schemes from the documentation, but I put it there for users to know what it's actually possible to create those. The documentation is incomplete though, as it should mention those shortcomings due to technical limitations. For example, you might want to create your own dark theme, which only applied certain colors to the dark mode of your documentation. For this, you could override slate, or create a new scheme.

kcgthb added a commit to stanford-rc/www.sherlock.stanford.edu that referenced this issue Dec 20, 2022
Tiryoh added a commit to rt-net/tutorials that referenced this issue Feb 14, 2023
Tiryoh added a commit to rt-net/tutorials that referenced this issue Feb 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue reports a bug resolved Issue is resolved, yet unreleased if open
Projects
None yet
Development

No branches or pull requests

2 participants