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

Prototyped dark mode

Browse Source
This commit is contained in:
squidfunk 2020-04-25 19:07:23 +02:00
parent 1ebef6565f
commit 1fc6af1f15
18 changed files with 114 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/getting-started.md
View File

@ -320,6 +320,40 @@ theme:
direction: rtl direction: rtl
``` ```
### Color scheme
> Default: `light`
Click on a color name to change the primary color of the theme:
<style>
.md-typeset button[data-md-color-scheme] {
cursor: pointer;
transition: opacity 250ms;
}
.md-typeset button[data-md-color-scheme]:hover {
opacity: 0.75;
}
.md-typeset button[data-md-color-scheme] > code {
display: block;
color: var(--md-primary-bg-color);
background-color: var(--md-primary-fg-color);
}
</style>
<button data-md-color-scheme="light"><code>light</code></button>
<button data-md-color-scheme="dark"><code>dark</code></button>
<script>
var buttons = document.querySelectorAll("button[data-md-color-scheme]")
buttons.forEach(function(button) {
var attr = "data-md-color-scheme"
button.addEventListener("click", function() {
document.body.setAttribute(attr, this.getAttribute(attr))
})
})
</script>
### Color palette ### Color palette
The Material Design [color palette][10] comes with 20 hues, all of which are The Material Design [color palette][10] comes with 20 hues, all of which are

8
material/assets/manifest.json
View File

@ -5,8 +5,8 @@
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d7126665.min.js.map", "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.d7126665.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.58d22e8e.min.js", "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.58d22e8e.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.58d22e8e.min.js.map", "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.58d22e8e.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.53de219a.min.css", "assets/stylesheets/main.css": "assets/stylesheets/main.4ccb1e2d.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.53de219a.min.css.map", "assets/stylesheets/main.css.map": "assets/stylesheets/main.4ccb1e2d.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.14da9d3a.min.css", "assets/stylesheets/palette.css": "assets/stylesheets/palette.7dafc863.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.14da9d3a.min.css.map" "assets/stylesheets/palette.css.map": "assets/stylesheets/palette.7dafc863.min.css.map"
} }

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
material/assets/stylesheets/palette.14da9d3a.min.css → material/assets/stylesheets/palette.7dafc863.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
material/assets/stylesheets/palette.14da9d3a.min.css.map → material/assets/stylesheets/palette.7dafc863.min.css.map
View File

File diff suppressed because one or more lines are too long

9
material/base.html
View File

@ -41,9 +41,9 @@
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block styles %} {% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.53de219a.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/main.4ccb1e2d.min.css' | url }}">
{% if palette.primary or palette.accent %} {% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.14da9d3a.min.css' | url }}"> <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.7dafc863.min.css' | url }}">
{% endif %} {% endif %}
{% if palette.primary %} {% if palette.primary %}
{% import "partials/palette.html" as map %} {% import "partials/palette.html" as map %}
@ -78,10 +78,11 @@
{% block extrahead %}{% endblock %} {% block extrahead %}{% endblock %}
</head> </head>
{% set direction = config.theme.direction or lang.t('direction') %} {% set direction = config.theme.direction or lang.t('direction') %}
{% if palette.primary or palette.accent %} {% if palette.scheme or palette.primary or palette.accent %}
{% set scheme = palette.scheme | lower %}
{% set primary = palette.primary | replace(" ", "-") | lower %} {% set primary = palette.primary | replace(" ", "-") | lower %}
{% set accent = palette.accent | replace(" ", "-") | lower %} {% set accent = palette.accent | replace(" ", "-") | lower %}
<body dir="{{ direction }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}"> <body dir="{{ direction }}" data-md-color-scheme="{{ scheme }}" data-md-color-primary="{{ primary }}" data-md-color-accent="{{ accent }}">
{% else %} {% else %}
<body dir="{{ direction }}"> <body dir="{{ direction }}">
{% endif %} {% endif %}

1
mkdocs.yml
View File

@ -54,6 +54,7 @@ theme:
- tabs - tabs
#- instant #- instant
palette: palette:
scheme: dark
primary: indigo primary: indigo
accent: indigo accent: indigo
font: font:

52
src/assets/stylesheets/base/_colors.scss
View File

@ -30,7 +30,7 @@
// Default color shades // Default color shades
--md-default-fg-color: hsla(0, 0%, 0%, 0.87); --md-default-fg-color: hsla(0, 0%, 0%, 0.87);
--md-default-fg-color--light: hsla(0, 0%, 0%, 0.54); --md-default-fg-color--light: hsla(0, 0%, 0%, 0.54);
--md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.26); --md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.32);
--md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07); --md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07);
--md-default-bg-color: hsla(0, 0%, 100%, 1); --md-default-bg-color: hsla(0, 0%, 100%, 1);
--md-default-bg-color--light: hsla(0, 0%, 100%, 0.7); --md-default-bg-color--light: hsla(0, 0%, 100%, 0.7);
@ -49,36 +49,40 @@
--md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1); --md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
--md-accent-bg-color: hsla(0, 0%, 100%, 1); --md-accent-bg-color: hsla(0, 0%, 100%, 1);
--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7); --md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
}
// ----------------------------------------------------------------------------
// Light mode
body {
// Code block color shades // Code block color shades
--md-code-bg-color: hsla(0, 0%, 96%, 1); --md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1); --md-code-fg-color: hsla(200, 18%, 26%, 1);
// // Drop shadow // Text color shades
// --md-drop-shadow: --md-text-color: var(--md-default-fg-color);
// 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05), --md-text-link-color: var(--md-primary-fg-color);
// 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
} }
// // :root [data-md-color-scheme="dark"] { // Dark mode
// :root { body[data-md-color-scheme="dark"] {
// // Default color shades // Default color shades
// --md-default-fg-color: hsla(0, 0%, 100%, 1); --md-default-fg-color: hsla(0, 0%, 100%, 1);
// --md-default-fg-color--light: hsla(0, 0%, 100%, 0.7); --md-default-fg-color--light: hsla(0, 0%, 100%, 0.87);
// --md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.3); --md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.32);
// --md-default-fg-color--lightest: hsla(0, 0%, 100%, 0.12); --md-default-fg-color--lightest: hsla(0, 0%, 100%, 0.12);
// --md-default-bg-color: hsla(232, 15%, 21%, 1); --md-default-bg-color: hsla(232, 15%, 21%, 1);
// // --md-default-bg-color--light: hsla(0, 0%, 0%, 0.54); --md-default-bg-color--light: hsla(232, 15%, 21%, 0.54);
// // --md-default-bg-color--lighter: hsla(0, 0%, 0%, 0.26); --md-default-bg-color--lighter: hsla(232, 15%, 21%, 0.26);
// // --md-default-bg-color--lightest: hsla(0, 0%, 0%, 0.07); --md-default-bg-color--lightest: hsla(232, 15%, 21%, 0.07);
// // Code block color shades // Code block color shades
// --md-code-bg-color: hsla(232, 15%, 18%, 1); --md-code-bg-color: hsla(232, 15%, 18%, 1);
// --md-code-fg-color: hsla(60, 30%, 96%, 1); --md-code-fg-color: hsla(60, 30%, 96%, 1);
// // Drop shadow // Text color shades
// --md-drop-shadow: --md-text-color: var(--md-default-fg-color--light);
// 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.2), --md-text-link-color: var(--md-primary-fg-color--light);
// 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.4); }
// }

6
src/assets/stylesheets/base/_typeset.scss
View File

@ -33,7 +33,7 @@ body {
// Default fonts // Default fonts
body, body,
input { input {
color: var(--md-default-fg-color); color: var(--md-text-color);
font-feature-settings: "kern", "liga"; font-feature-settings: "kern", "liga";
font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
} }
@ -42,7 +42,7 @@ input {
code, code,
pre, pre,
kbd { kbd {
color: var(--md-default-fg-color); color: var(--md-text-color);
font-feature-settings: "kern"; font-feature-settings: "kern";
font-family: SFMono-Regular, Consolas, Menlo, monospace; font-family: SFMono-Regular, Consolas, Menlo, monospace;
} }
@ -132,7 +132,7 @@ kbd {
// Links // Links
a { a {
color: var(--md-primary-fg-color); color: var(--md-text-link-color);
word-break: break-word; word-break: break-word;
// Also enable color transition on pseudo elements // Also enable color transition on pseudo elements

7
src/assets/stylesheets/extensions/_admonition.scss
View File

@ -72,8 +72,9 @@ $admonitions: (
border-left: px2rem(4px) solid $clr-blue-a200; border-left: px2rem(4px) solid $clr-blue-a200;
border-radius: px2rem(2px); border-radius: px2rem(2px);
box-shadow: box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05), 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.1),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1); 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.15),
0 0 0 px2rem(1px) var(--md-default-bg-color--lighter) inset;
// Adjust for right-to-left languages // Adjust for right-to-left languages
[dir="rtl"] & { [dir="rtl"] & {
@ -169,7 +170,7 @@ $admonitions: (
// Define base class // Define base class
.md-typeset .#{$name} > .admonition-title { .md-typeset .#{$name} > .admonition-title {
background-color: transparentize($tint, 0.9); background-color: transparentize($tint, 0.85);
// Icon // Icon
&::before { &::before {

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

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

2
src/assets/stylesheets/layout/_base.scss
View File

@ -48,7 +48,6 @@ html {
// //
// See https://github.com/squidfunk/mkdocs-material/issues/911 // See https://github.com/squidfunk/mkdocs-material/issues/911
font-size: 125%; font-size: 125%;
background-color: var(--md-default-bg-color);
// [screen medium +]: Set base font-size to 11px // [screen medium +]: Set base font-size to 11px
@include break-from-device(screen medium) { @include break-from-device(screen medium) {
@ -71,6 +70,7 @@ body {
// Hack: reset font-size to 10px, so the spacing for all inline elements is // Hack: reset font-size to 10px, so the spacing for all inline elements is
// correct again. Otherwise the spacing would be based on 20px. // correct again. Otherwise the spacing would be based on 20px.
font-size: 0.5rem; // stylelint-disable-line unit-whitelist font-size: 0.5rem; // stylelint-disable-line unit-whitelist
background-color: var(--md-default-bg-color);
// [tablet portrait -]: Lock body to disable scroll bubbling // [tablet portrait -]: Lock body to disable scroll bubbling
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {

6
src/assets/stylesheets/layout/_nav.scss
View File

@ -122,12 +122,12 @@
// Blurred link // Blurred link
&[data-md-state="blur"] { &[data-md-state="blur"] {
color: var(--md-default-fg-color--light); color: var(--md-default-fg-color--lighter);
} }
// Active link // Active link
.md-nav__item &--active { .md-nav__item &--active {
color: var(--md-primary-fg-color); color: var(--md-text-link-color);
} }
// Reset active color for nested list titles // Reset active color for nested list titles
@ -275,7 +275,7 @@
// Active parent item // Active parent item
&--active > .md-nav__link { &--active > .md-nav__link {
color: var(--md-primary-fg-color); color: var(--md-text-link-color);
// Focused or hovered linl // Focused or hovered linl
&:focus, &:focus,

38
src/assets/stylesheets/palette.scss
View File

@ -41,25 +41,25 @@
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
@each $name, $colors in ( @each $name, $colors in (
"red": $clr-red-400 $clr-red-200 $clr-red-600, "red": $clr-red-400 $clr-red-300 $clr-red-600,
"pink": $clr-pink-500 $clr-pink-200 $clr-pink-700, "pink": $clr-pink-500 $clr-pink-400 $clr-pink-700,
"purple": $clr-purple-400 $clr-purple-200 $clr-purple-600, "purple": $clr-purple-400 $clr-purple-300 $clr-purple-600,
"deep-purple": $clr-deep-purple-400 $clr-deep-purple-200 $clr-deep-purple-500, "deep-purple": $clr-deep-purple-400 $clr-deep-purple-300 $clr-deep-purple-500,
"indigo": $clr-indigo-500 $clr-indigo-200 $clr-indigo-700, "indigo": $clr-indigo-500 $clr-indigo-400 $clr-indigo-700,
"blue": $clr-blue-500 $clr-blue-200 $clr-blue-700, "blue": $clr-blue-500 $clr-blue-400 $clr-blue-700,
"light-blue": $clr-light-blue-500 $clr-light-blue-200 $clr-light-blue-700, "light-blue": $clr-light-blue-500 $clr-light-blue-400 $clr-light-blue-700,
"cyan": $clr-cyan-500 $clr-cyan-200 $clr-cyan-700, "cyan": $clr-cyan-500 $clr-cyan-400 $clr-cyan-700,
"teal": $clr-teal-500 $clr-teal-200 $clr-teal-700, "teal": $clr-teal-500 $clr-teal-400 $clr-teal-700,
"green": $clr-green-500 $clr-green-200 $clr-green-700, "green": $clr-green-500 $clr-green-400 $clr-green-700,
"light-green": $clr-light-green-500 $clr-light-green-200 $clr-light-green-700, "light-green": $clr-light-green-500 $clr-light-green-400 $clr-light-green-700,
"lime": $clr-lime-500 $clr-lime-200 $clr-lime-700, "lime": $clr-lime-500 $clr-lime-400 $clr-lime-700,
"yellow": $clr-yellow-500 $clr-yellow-200 $clr-yellow-700, "yellow": $clr-yellow-500 $clr-yellow-400 $clr-yellow-700,
"amber": $clr-amber-500 $clr-amber-200 $clr-amber-700, "amber": $clr-amber-500 $clr-amber-400 $clr-amber-700,
"orange": $clr-orange-400 $clr-orange-200 $clr-orange-600, "orange": $clr-orange-400 $clr-orange-400 $clr-orange-600,
"deep-orange": $clr-deep-orange-400 $clr-deep-orange-200 $clr-deep-orange-600, "deep-orange": $clr-deep-orange-400 $clr-deep-orange-300 $clr-deep-orange-600,
"brown": $clr-brown-500 $clr-brown-200 $clr-brown-700, "brown": $clr-brown-500 $clr-brown-400 $clr-brown-700,
"grey": $clr-grey-600 $clr-grey-200 $clr-grey-700, "grey": $clr-grey-600 $clr-grey-500 $clr-grey-700,
"blue-grey": $clr-blue-grey-600 $clr-blue-grey-200 $clr-blue-grey-700 "blue-grey": $clr-blue-grey-600 $clr-blue-grey-500 $clr-blue-grey-700
) { ) {
// Color palette // Color palette

4
src/base.html
View File

@ -166,11 +166,13 @@
<!-- Text direction and color palette, if defined --> <!-- Text direction and color palette, if defined -->
{% set direction = config.theme.direction or lang.t('direction') %} {% set direction = config.theme.direction or lang.t('direction') %}
{% if palette.primary or palette.accent %} {% if palette.scheme or palette.primary or palette.accent %}
{% set scheme = palette.scheme | lower %}
{% set primary = palette.primary | replace(" ", "-") | lower %} {% set primary = palette.primary | replace(" ", "-") | lower %}
{% set accent = palette.accent | replace(" ", "-") | lower %} {% set accent = palette.accent | replace(" ", "-") | lower %}
<body <body
dir="{{ direction }}" dir="{{ direction }}"
data-md-color-scheme="{{ scheme }}"
data-md-color-primary="{{ primary }}" data-md-color-primary="{{ primary }}"
data-md-color-accent="{{ accent }}" data-md-color-accent="{{ accent }}"
> >