I would like to ask if there is any explanation about the variables of color configuration css. I can only get some information through ChatGPT. #6882
-
|
|
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
|
How to connect css parameters to parameters in mkdocs.yml, and where can I find relevant documentation |
Beta Was this translation helpful? Give feedback.
-
|
Hello @W1ndys, On the screenshoted page there is the link to the color definitions: As for the palette configuration in mkdocs.yml there is this folder: [data-md-color-accent=pink] {
--md-accent-fg-color: #f50056;
--md-accent-fg-color--transparent: #f500561a;
--md-accent-bg-color: #fff;
--md-accent-bg-color--light: #ffffffb3
}
[data-md-color-accent=purple] {
--md-accent-fg-color: #df41fb;
--md-accent-fg-color--transparent: #df41fb1a;
--md-accent-bg-color: #fff;
--md-accent-bg-color--light: #ffffffb3
}
/* ... */The syntax for colors in the SCSS comes from this package: https://www.npmjs.com/package/material-design-color If you're asking about a visual explanation for which variable is used where on the page, I don't think there any guide of that sort. chrome_MaMBqoOTD1.mp4 |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, my description is wrong. What I want to say is, where can I find an explanation about these syntaxes, like "--md-default-fg-color:", "--md-default-bg-color--lighter", etc. These variables respectively represent What is the function Another question is whether there is any information on "how to define variables in the custom-css file so that they can be applied in mkdocs.yml, such as the variable names in the circles in the picture below.How can I write the contents in "[]" and how can I use them in mkdocs.yml later?
Thank you very much for your patient reply |
Beta Was this translation helpful? Give feedback.
-
|
Great, your video is also very helpful to me.I can get variable names by looking at source code styles. |
Beta Was this translation helpful? Give feedback.
-
I'm still not sure what you're after, sorry. You can override the CSS with a custom-css file:
The values set in the palette section in mkdocs.yml are set in the template file on the
mkdocs-material/src/templates/base.html Lines 178 to 194 in 14b0b06 Then the CSS selector sets the variables based on the set attribute value. Additional reference: |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I still don't understand. In short, what I want to ask is how to write the correct grammar in the custom_css file.For example, I want to write "[data-md-color-scheme]"Not other wrong syntax, such as [data-color-md-scheme]. The real question is, is there any relevant document indicating which variables I can define? |
Beta Was this translation helpful? Give feedback.
-
The documentation won't show an example for every of the defined variables, but instead it links to the color definitions. I provided other files in the first comment as well. As pointed out above, only the palette If you're seeking more guidance on the CSS syntax etc. better look for it elsewhere, like the Mozilla page above about Specificity, or this page linked in the docs: https://www.w3.org/TR/selectors-4/#attribute-selectors or some other YouTube video. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you. Thank you very much for your help. I see. I will try to solve my problem.
|
Beta Was this translation helpful? Give feedback.
I'm still not sure what you're after, sorry. You can override the CSS with a custom-css file:
https://squidfunk.github.io/mkdocs-material/customization/#additional-css
you set the
extra_cssin the mkdocs.yml to load the file:https://www.mkdocs.org/user-guide/configuration/#extra_css
The values set in the palette section in mkdocs.yml are set in the template file on the
<body>HTML tag: