OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Refactored code syntax highlighting

Browse Source
This commit is contained in:
squidfunk 2020-07-24 09:59:16 +02:00
parent f9d0f24a99
commit c431539a83
21 changed files with 290 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/reference/code-blocks.md
View File

@ -271,7 +271,7 @@ the [language short name][17].
_Example_:
```
``` markdown
The `#!python range()` function is used to generate a sequence of numbers.
```
@ -289,7 +289,7 @@ available short key codes.
_Example_:
```
``` markdown
++ctrl+alt+del++
```
@ -336,5 +336,5 @@ If syntax highlighting is done with [Pygments][22], Material for MkDocs
provides the styles defining the [appeareance][21] of code blocks, which can
be adjusted with [additional stylesheets][6].
[21]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/_codehilite.scss
[21]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/markdown/_codehilite.scss
[22]: #use-pygments

93
docs/reference/icons-emojis.md Normal file
View File

@ -0,0 +1,93 @@
---
template: overrides/main.html
---
# Icons + Emojis
One of the best features of Material for MkDocs is the possibility to use [more
than _7.000 icons_][1] and _thousands of emojis_ in your project documentation
with practically zero additional effort. Furthermore, custom icons can be used
in `mkdocs.yml`, documents and templates.
## Configuration
### Emoji
[:octicons-file-code-24: Source][2] · [:octicons-workflow-24: Extension][3]
The [Emoji][3] extension, which is part of [Python Markdown Extensions][4],
adds the ability to __integrate emojis and icons__ in the `*.svg` file format,
which are inlined when [building your site][5]:
``` yaml
markdown_extensions:
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
```
The following icon sets are bundled with Material for MkDocs:
* :material-material-design: – [Material Design][6]
* :fontawesome-brands-font-awesome-flag: – [FontAwesome][7]
* :octicons-mark-github-16: – [Octicons][8]
You can also add [additional icons][9]. When using emojis, it's recommended to
consult the official documentation of [Python Markdown Extensions][3] to learn
about configuration options.
[1]: https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons
[2]: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/extensions/pymdownx/_emoji.scss
[3]: https://facelessuser.github.io/pymdown-extensions/extensions/emoji/
[4]: https://facelessuser.github.io/pymdown-extensions/
[5]: ../creating-your-site.md#building-your-site
[6]: https://materialdesignicons.com/
[7]: https://fontawesome.com/icons?d=gallery&m=free
[8]: https://octicons.github.com/
[9]: ../setup/changing-the-logo-and-icons.md#additional-icons
## Usage
### Using emojis
Emojis can be integrated in Markdown by putting the shortcode of the emoji
between two colons. If you're using [Twemoji][10] (recommended), you can look up
the shortcodes at [Emojipedia][11].
_Example_:
```
:smile:
```
_Result_:
:smile:
[10]: https://twemoji.twitter.com/
[11]: https://emojipedia.org/twitter/
### Using icons
When [Emoji][12] is enabled, icons can be used similar to emojis, by referencing
a valid path to any icon bundled with the theme, which are located in the
[`.icons`][1] directory, and replacing `/` with `-`:
_Example_:
```
* :material-account-circle: – `.icons/material/account-circle.svg`
* :fontawesome-regular-laugh-wink: – `.icons/fontawesome/regular/laugh-wink.svg`
* :octicons-octoface-16: – `.icons/octicons/octoface-16.svg`
```
_Result_:
* :material-account-circle: – [`.icons/material/account-circle.svg`][13]
* :fontawesome-regular-laugh-wink: – [`.icons/fontawesome/regular/laugh-wink.svg`][14]
* :octicons-octoface-16: – [`.icons/octicons/octoface-16.svg`][15]
[12]: #emoji
[13]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/material/account-circle.svg
[14]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/fontawesome/regular/laugh-wink.svg
[15]: https://raw.githubusercontent.com/squidfunk/mkdocs-material/master/material/.icons/octicons/octoface-16.svg

4
docs/setup/changing-the-logo-and-icons.md
View File

@ -61,7 +61,7 @@ theme:
The [Emoji][5] extension, which is part of [Python Markdown Extensions][6],
adds the ability to __integrate icons__ in the `*.svg` file format, which are
inlined into the HTML when [building your site][7]:
inlined when [building your site][7]:
``` yaml
markdown_extensions:
@ -74,7 +74,7 @@ The following icon sets are bundled with Material for MkDocs:
* :material-material-design: – [Material Design][8]
* :fontawesome-brands-font-awesome-flag: – [FontAwesome][9]
* :fontawesome-brands-github: – [Octicons][10]
* :octicons-mark-github-16: – [Octicons][10]
If you want to add [additional icons][1], read on.

8
material/assets/manifest.json
View File

@ -5,10 +5,10 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.877163d5.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.a68abb33.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.a68abb33.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.b82c4e02.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.b82c4e02.min.css.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.e33092ab.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.e33092ab.min.css.map",
"assets/stylesheets/overrides.css": "assets/stylesheets/overrides.af7aabb5.min.css",
"assets/stylesheets/overrides.css.map": "assets/stylesheets/overrides.af7aabb5.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.a53427c9.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.a53427c9.min.css.map"
"assets/stylesheets/palette.css": "assets/stylesheets/palette.8150bf71.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.8150bf71.min.css.map"
}

3
material/assets/stylesheets/main.b82c4e02.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.b82c4e02.min.css.map
View File

File diff suppressed because one or more lines are too long

3
material/assets/stylesheets/main.e33092ab.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/main.e33092ab.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

4
material/assets/stylesheets/palette.a53427c9.min.css → material/assets/stylesheets/palette.8150bf71.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.8150bf71.min.css.map Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/palette.a53427c9.min.css.map
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,9 +41,9 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.b82c4e02.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.e33092ab.min.css' | url }}">
{% if palette.scheme or palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a53427c9.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.8150bf71.min.css' | url }}">
{% endif %}
{% if palette.primary %}
{% import "partials/palette.html" as map %}

3
mkdocs.yml
View File

@ -52,7 +52,7 @@ theme:
language: en
features:
- tabs
#- instant
- instant
palette:
scheme: default
primary: indigo
@ -165,6 +165,7 @@ nav:
- Code blocks: reference/code-blocks.md
- Content tabs: reference/content-tabs.md
- Footnotes: reference/footnotes.md
- Icons + Emojis: reference/icons-emojis.md
- Lists: reference/lists.md
- Meta tags: reference/meta-tags.md
- Changelog:

33
src/assets/stylesheets/main/_colors.scss
View File

@ -57,14 +57,33 @@
--md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
// Keyboard color shades
--md-kbd-color: hsla(0, 0%, 98%, 1);
--md-kbd-accent-color: hsla(0, 100%, 100%, 1);
--md-kbd-border-color: hsla(0, 0%, 72%, 1);
// Code highlighting color shades
--md-code-hl-color: var(--md-default-fg-color--lightest);
--md-code-hl-number-color: hsla(6, 71%, 60%, 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, 70%, 64%, 1);
--md-code-hl-keyword-color: hsla(219, 71%, 60%, 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--lighter);
--md-code-hl-comment-color: var(--md-default-fg-color--lighter);
--md-code-hl-generic-color: var(--md-default-fg-color--lighter);
--md-code-hl-variable-color: var(--md-default-fg-color--light);
// Text color shades
--md-text-color: var(--md-default-fg-color);
--md-text-link-color: var(--md-primary-fg-color);
// Typeset color shades
--md-typeset-color: var(--md-default-fg-color);
--md-typeset-a-color: var(--md-primary-fg-color);
// Typeset `del` and `ins` color shades
--md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
--md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
// Typeset `kbd` color shades
--md-typeset-kbd-color: hsla(0, 0%, 98%, 1);
--md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
--md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1);
// Admonition color shades
--md-admonition-bg-color: var(--md-default-bg-color);

14
src/assets/stylesheets/main/_typeset.scss
View File

@ -33,7 +33,7 @@ body {
// Default fonts
body,
input {
color: var(--md-text-color);
color: var(--md-typeset-color);
font-feature-settings: "kern", "liga";
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}
@ -42,7 +42,7 @@ input {
code,
pre,
kbd {
color: var(--md-text-color);
color: var(--md-typeset-color);
font-feature-settings: "kern";
font-family: SFMono-Regular, Consolas, Menlo, monospace;
}
@ -132,7 +132,7 @@ kbd {
// Links
a {
color: var(--md-text-link-color);
color: var(--md-typeset-a-color);
word-break: break-word;
// Also enable color transition on pseudo elements
@ -255,12 +255,12 @@ kbd {
line-height: 1.5;
vertical-align: text-top;
word-break: break-word;
background-color: var(--md-kbd-color);
background-color: var(--md-typeset-kbd-color);
border-radius: px2rem(2px);
box-shadow:
0 px2rem(2px) 0 px2rem(1px) var(--md-kbd-border-color),
0 px2rem(2px) 0 var(--md-kbd-border-color),
0 px2rem(-2px) px2rem(4px) var(--md-kbd-accent-color) inset;
0 px2rem(2px) 0 px2rem(1px) var(--md-typeset-kbd-border-color),
0 px2rem(2px) 0 var(--md-typeset-kbd-border-color),
0 px2rem(-2px) px2rem(4px) var(--md-typeset-kbd-accent-color) inset;
}
// Text highlighting marker

265
src/assets/stylesheets/main/extensions/markdown/_codehilite.scss
View File

@ -20,90 +20,6 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Operators
$codehilite-operator: inherit;
$codehilite-operator-word: inherit;
// Generics
$codehilite-generic-emph: #000000;
$codehilite-generic-error: #AA0000;
$codehilite-generic-heading: #999999;
$codehilite-generic-output: #888888;
$codehilite-generic-prompt: #555555;
$codehilite-generic-strong: inherit;
$codehilite-generic-subheading: #AAAAAA;
$codehilite-generic-traceback: #AA0000;
// Diffs
$codehilite-diff-deleted: #FFDDDD;
$codehilite-diff-inserted: #DDFFDD;
// Keywords
$codehilite-keyword: #3B78E7;
$codehilite-keyword-constant: #A71D5D;
$codehilite-keyword-declaration: #3B78E7;
$codehilite-keyword-namespace: #3B78E7;
$codehilite-keyword-pseudo: #A71D5D;
$codehilite-keyword-reserved: #3E61A2;
$codehilite-keyword-type: #3E61A2;
// Comments
$codehilite-comment: #999999;
$codehilite-comment-multiline: #999999;
$codehilite-comment-preproc: #666666;
$codehilite-comment-single: #999999;
$codehilite-comment-shebang: #999999;
$codehilite-comment-special: #999999;
// Names
$codehilite-name-attribute: #C2185B;
$codehilite-name-builtin: #C2185B;
$codehilite-name-builtin-pseudo: #3E61A2;
$codehilite-name-class: #C2185B;
$codehilite-name-constant: #3E61A2;
$codehilite-name-decorator: #666666;
$codehilite-name-entity: #666666;
$codehilite-name-exception: #C2185B;
$codehilite-name-function: #C2185B;
$codehilite-name-label: #3B5179;
$codehilite-name-namespace: #EC407A;
$codehilite-name-tag: #3B78E7;
$codehilite-name-variable: #3E61A2;
$codehilite-name-variable-class: #3E61A2;
$codehilite-name-variable-instance: #3E61A2;
$codehilite-name-variable-global: #3E61A2;
$codehilite-name-extension: inherit;
// Numbers
$codehilite-literal-number: #E74C3C;
$codehilite-literal-number-float: #E74C3C;
$codehilite-literal-number-hex: #E74C3C;
$codehilite-literal-number-integer: #E74C3C;
$codehilite-literal-number-integer-long: #E74C3C;
$codehilite-literal-number-oct: #E74C3C;
// Strings
$codehilite-literal-string: #0D904F;
$codehilite-literal-string-backticks: #0D904F;
$codehilite-literal-string-char: #0D904F;
$codehilite-literal-string-doc: #999999;
$codehilite-literal-string-double: #0D904F;
$codehilite-literal-string-escape: #183691;
$codehilite-literal-string-heredoc: #183691;
$codehilite-literal-string-interpol: #183691;
$codehilite-literal-string-other: #183691;
$codehilite-literal-string-regex: #009926;
$codehilite-literal-string-single: #0D904F;
$codehilite-literal-string-symbol: #0D904F;
// Miscellaneous
$codehilite-error: #A61717;
$codehilite-whitespace: transparent;
// ----------------------------------------------------------------------------
// Rules: syntax highlighting
// ----------------------------------------------------------------------------
@ -111,92 +27,127 @@ $codehilite-whitespace: transparent;
// Codehilite extension
.codehilite {
// Operators
.o { color: $codehilite-operator; }
.ow { color: $codehilite-operator-word; }
.o, // Operator
.ow { // Operator, word
color: var(--md-code-hl-operator-color);
}
// Generics
.ge { color: $codehilite-generic-emph; }
.gr { color: $codehilite-generic-error; }
.gh { color: $codehilite-generic-heading; }
.go { color: $codehilite-generic-output; }
.gp { color: $codehilite-generic-prompt; }
.gs { color: $codehilite-generic-strong; }
.gu { color: $codehilite-generic-subheading; }
.gt { color: $codehilite-generic-traceback; }
.p { // Punctuation
color: var(--md-code-hl-punctuation-color);
}
// Diffs
.gd { background-color: $codehilite-diff-deleted; }
.gi { background-color: $codehilite-diff-inserted; }
.cpf, // Comment, preprocessor file
.l, // Literal
.s, // Literal, string
.sb, // Literal, string backticks
.sc, // Literal, string char
.s2, // Literal, string double
.si, // Literal, string interpol
.s1, // Literal, string single
.ss { // Literal, string symbol
color: var(--md-code-hl-string-color);
}
// Keywords
.k { color: $codehilite-keyword; }
.kc { color: $codehilite-keyword-constant; }
.kd { color: $codehilite-keyword-declaration; }
.kn { color: $codehilite-keyword-namespace; }
.kp { color: $codehilite-keyword-pseudo; }
.kr { color: $codehilite-keyword-reserved; }
.kt { color: $codehilite-keyword-type; }
.cp, // Comment, pre-processor
.se, // Literal, string escape
.sh, // Literal, string heredoc
.sr, // Literal, string regex
.sx { // Literal, string other
color: var(--md-code-hl-special-color);
}
// Comments
.c { color: $codehilite-comment; }
.cm { color: $codehilite-comment-multiline; }
.cp { color: $codehilite-comment-preproc; }
.c1 { color: $codehilite-comment-single; }
.ch { color: $codehilite-comment-shebang; }
.cs { color: $codehilite-comment-special; }
.m, // Number
.mf, // Number, float
.mh, // Number, hex
.mi, // Number, integer
.il, // Number, integer long
.mo { // Number, octal
color: var(--md-code-hl-number-color);
}
// Names
.na { color: $codehilite-name-attribute; }
.nb { color: $codehilite-name-builtin; }
.bp { color: $codehilite-name-builtin-pseudo; }
.nc { color: $codehilite-name-class; }
.no { color: $codehilite-name-constant; }
.nd { color: $codehilite-name-entity; }
.ni { color: $codehilite-name-entity; }
.ne { color: $codehilite-name-exception; }
.nf { color: $codehilite-name-function; }
.nl { color: $codehilite-name-label; }
.nn { color: $codehilite-name-namespace; }
.nt { color: $codehilite-name-tag; }
.nv { color: $codehilite-name-variable; }
.vc { color: $codehilite-name-variable-class; }
.vg { color: $codehilite-name-variable-global; }
.vi { color: $codehilite-name-variable-instance; }
.nx { color: $codehilite-name-extension; }
.k, // Keyword,
.kd, // Keyword, declaration
.kn, // Keyword, namespace
.kp, // Keyword, pseudo
.kr, // Keyword, reserved
.kt { // Keyword, type
color: var(--md-code-hl-keyword-color);
}
// Numbers
.m { color: $codehilite-literal-number; }
.mf { color: $codehilite-literal-number-float; }
.mh { color: $codehilite-literal-number-hex; }
.mi { color: $codehilite-literal-number-integer; }
.il { color: $codehilite-literal-number-integer-long; }
.mo { color: $codehilite-literal-number-oct; }
.kc, // Keyword, constant
.n { // Name
color: var(--md-code-hl-name-color);
}
// Strings
.s { color: $codehilite-literal-string; }
.sb { color: $codehilite-literal-string-backticks; }
.sc { color: $codehilite-literal-string-char; }
.sd { color: $codehilite-literal-string-doc; }
.s2 { color: $codehilite-literal-string-double; }
.se { color: $codehilite-literal-string-escape; }
.sh { color: $codehilite-literal-string-heredoc; }
.si { color: $codehilite-literal-string-interpol; }
.sx { color: $codehilite-literal-string-other; }
.sr { color: $codehilite-literal-string-regex; }
.s1 { color: $codehilite-literal-string-single; }
.ss { color: $codehilite-literal-string-symbol; }
.no, // Name, constant
.nb, // Name, builtin
.bp { // Name, builtin pseudo
color: var(--md-code-hl-constant-color);
}
// Miscellaneous
.err { color: $codehilite-error; }
.w { color: $codehilite-whitespace; }
.nc, // Name, class
.ne, // Name, exception
.nf, // Name, function
.nn { // Name, namespace
color: var(--md-code-hl-function-color);
}
.nd, // Name, decorator
.ni, // Name, entity
.nl, // Name, label
.nt { // Name, tag
color: var(--md-code-hl-keyword-color);
}
.c, // Comment
.cm, // Comment, multiline
.c1, // Comment, single
.ch, // Comment, shebang
.cs, // Comment, special
.sd { // Literal, string doc
color: var(--md-code-hl-comment-color);
}
.na, // Name, attribute
.nv, // Variable,
.vc, // Variable, class
.vg, // Variable, global
.vi { // Variable, instance
color: var(--md-code-hl-variable-color);
}
.ge, // Generic, emph
.gr, // Generic, error
.gh, // Generic, heading
.go, // Generic, output
.gp, // Generic, prompt
.gs, // Generic, strong
.gu, // Generic, subheading
.gt { // Generic, traceback
color: var(--md-code-hl-generic-color);
}
.gd, // Diff, delete
.gi { // Diff, insert
margin: 0 px2em(-2px);
padding: 0 px2em(2px);
border-radius: px2rem(2px);
}
.gd { // Diff, delete
background-color: var(--md-typeset-del-color);
}
.gi { // Diff, insert
background-color: var(--md-typeset-ins-color)
}
// Highlighted lines
.hll {
display: block;
margin: 0 px2em(-16px, 13.6px);
padding: 0 px2em(16px, 13.6px);
background-color: transparentize($clr-yellow-500, 0.5);
background-color: var(--md-code-hl-color)
}
}
@ -235,7 +186,7 @@ $codehilite-whitespace: transparent;
padding: px2rem(10.5px) px2em(16px, 13.6px);
padding-right: 0;
font-size: px2em(13.6px);
background-color: var(--md-code-bg-color);
background-color: var(--md-code-hl-bg-color);
user-select: none;
}

4
src/assets/stylesheets/main/extensions/markdown/_footnotes.scss
View File

@ -118,7 +118,7 @@
// Footnote back reference
.footnote-backref {
display: inline-block;
color: var(--md-text-link-color);
color: var(--md-typeset-a-color);
// Hack: remove Unicode arrow for icon
font-size: 0;
vertical-align: text-bottom;
@ -155,7 +155,7 @@
// Always show for print
@media print {
color: var(--md-text-link-color);
color: var(--md-typeset-a-color);
transform: translateX(0);
opacity: 1;
}

6
src/assets/stylesheets/main/extensions/pymdownx/_critic.scss
View File

@ -38,17 +38,17 @@
// Deletion
del.critic {
background-color: $codehilite-diff-deleted;
background-color: var(--md-typeset-del-color);
}
// Addition
ins.critic {
background-color: $codehilite-diff-inserted;
background-color: var(--md-typeset-ins-color);
}
// Comment
.critic.comment {
color: $codehilite-comment;
color: var(--md-code-hl-comment-color);
// Comment opening mark
&::before {

4
src/assets/stylesheets/main/layout/_nav.scss
View File

@ -127,7 +127,7 @@
// Active link
.md-nav__item &--active {
color: var(--md-text-link-color);
color: var(--md-typeset-a-color);
}
// Reset active color for nested list titles
@ -275,7 +275,7 @@
// Active parent item
&--active > .md-nav__link {
color: var(--md-text-link-color);
color: var(--md-typeset-a-color);
// Focused or hovered linl
&:focus,

6
src/assets/stylesheets/palette/_primary.scss
View File

@ -75,8 +75,8 @@
--md-primary-bg-color: hsla(0, 0%, 0%, 0.87);
--md-primary-bg-color--light: hsla(0, 0%, 0%, 0.54);
// Text color shades
--md-text-link-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
// Typeset color shades
--md-typeset-a-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
// Add a border if there are no tabs
.md-hero--expand {
@ -139,7 +139,7 @@
--md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
// Text color shades
--md-text-link-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
--md-typeset-a-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
// Application header (stays always on top)
.md-header {

46
src/assets/stylesheets/palette/_scheme.scss
View File

@ -27,34 +27,40 @@
// Slate theme, i.e. dark mode
[data-md-color-scheme="slate"] {
// Slate's hue in the range [0,255] - 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(0, 0%, 100%, 1);
--md-default-fg-color--light: hsla(0, 0%, 100%, 0.87);
--md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.32);
--md-default-fg-color--lightest: hsla(0, 0%, 100%, 0.12);
--md-default-bg-color: hsla(232, 15%, 21%, 1);
--md-default-bg-color--light: hsla(232, 15%, 21%, 0.54);
--md-default-bg-color--lighter: hsla(232, 15%, 21%, 0.26);
--md-default-bg-color--lightest: hsla(232, 15%, 21%, 0.07);
--md-default-fg-color: hsla(var(--md-hue), 75%, 95%, 1);
--md-default-fg-color--light: hsla(var(--md-hue), 75%, 90%, 0.87);
--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-bg-color: hsla(232, 15%, 18%, 1);
--md-code-fg-color: hsla(232, 18%, 86%, 1);
--md-code-bg-color: hsla(var(--md-hue), 15%, 18%, 1);
--md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 1);
// Keyboard color shades
--md-kbd-color: hsla(232, 15%, 94%, 0.12);
--md-kbd-accent-color: hsla(232, 15%, 94%, 0.2);
--md-kbd-border-color: hsla(232, 15%, 14%, 1);
// Code highlighting color shades
--md-code-hl-punctuation-color: hsla(var(--md-hue), 34%, 71%, 0.3);
--md-code-hl-comment-color: hsla(var(--md-hue), 34%, 71%, 0.3);
--md-code-hl-generic-color: hsla(var(--md-hue), 34%, 71%, 0.3);
// Text color shades
--md-text-color: var(--md-default-fg-color--light);
--md-text-link-color: var(--md-primary-fg-color);
// 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);
// Admonition color shades
--md-admonition-bg-color: hsla(0, 0%, 100%, 0.025);
--md-admonition-bg-color: hsla(var(--md-hue), 0%, 100%, 0.025);
--md-admonition-fg-color: var(--md-default-fg-color);
// Footer color shades
--md-footer-bg-color: hsla(232, 15%, 12%, 0.87);
--md-footer-bg-color--dark: hsla(232, 15%, 10%, 1);
--md-footer-bg-color: hsla(var(--md-hue), 15%, 12%, 0.87);
--md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 10%, 1);
}