Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 01:50:52 +01:00
Code Issues 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
```
### 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
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/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/stylesheets/main.css": "assets/stylesheets/main.53de219a.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.53de219a.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.14da9d3a.min.css",
"assets/stylesheets/palette.css.map": "assets/stylesheets/palette.14da9d3a.min.css.map"
"assets/stylesheets/main.css": "assets/stylesheets/main.4ccb1e2d.min.css",
"assets/stylesheets/main.css.map": "assets/stylesheets/main.4ccb1e2d.min.css.map",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.7dafc863.min.css",
"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 %}
{% endblock %}
{% 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 %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.14da9d3a.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.7dafc863.min.css' | url }}">
{% endif %}
{% if palette.primary %}
{% import "partials/palette.html" as map %}
@ -78,10 +78,11 @@
{% block extrahead %}{% endblock %}
</head>
{% 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 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 %}
<body dir="{{ direction }}">
{% endif %}

1
mkdocs.yml
View File

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

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

@ -30,7 +30,7 @@
// Default color shades
--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--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-bg-color: hsla(0, 0%, 100%, 1);
--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-bg-color: hsla(0, 0%, 100%, 1);
--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
}
// ----------------------------------------------------------------------------
// Light mode
body {
// Code block color shades
--md-code-bg-color: hsla(0, 0%, 96%, 1);
--md-code-fg-color: hsla(200, 18%, 26%, 1);
// // Drop shadow
// --md-drop-shadow:
// 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
// 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
// Text color shades
--md-text-color: var(--md-default-fg-color);
--md-text-link-color: var(--md-primary-fg-color);
}
// // :root [data-md-color-scheme="dark"] {
// :root {
// Dark mode
body[data-md-color-scheme="dark"] {
// // Default color shades
// --md-default-fg-color: hsla(0, 0%, 100%, 1);
// --md-default-fg-color--light: hsla(0, 0%, 100%, 0.7);
// --md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
// --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(0, 0%, 0%, 0.54);
// // --md-default-bg-color--lighter: hsla(0, 0%, 0%, 0.26);
// // --md-default-bg-color--lightest: hsla(0, 0%, 0%, 0.07);
// 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);
// // Code block color shades
// --md-code-bg-color: hsla(232, 15%, 18%, 1);
// --md-code-fg-color: hsla(60, 30%, 96%, 1);
// Code block color shades
--md-code-bg-color: hsla(232, 15%, 18%, 1);
--md-code-fg-color: hsla(60, 30%, 96%, 1);
// // Drop shadow
// --md-drop-shadow:
// 0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.2),
// 0 0 px2rem(1px) hsla(0, 0%, 0%, 0.4);
// }
// Text color shades
--md-text-color: var(--md-default-fg-color--light);
--md-text-link-color: var(--md-primary-fg-color--light);
}

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

@ -33,7 +33,7 @@ body {
// Default fonts
body,
input {
color: var(--md-default-fg-color);
color: var(--md-text-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-default-fg-color);
color: var(--md-text-color);
font-feature-settings: "kern";
font-family: SFMono-Regular, Consolas, Menlo, monospace;
}
@ -132,7 +132,7 @@ kbd {
// Links
a {
color: var(--md-primary-fg-color);
color: var(--md-text-link-color);
word-break: break-word;
// 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-radius: px2rem(2px);
box-shadow:
0 px2rem(4px) px2rem(10px) hsla(0, 0%, 0%, 0.05),
0 0 px2rem(1px) hsla(0, 0%, 0%, 0.1);
0 px2rem(4px) px2rem(10px) 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
[dir="rtl"] & {
@ -169,7 +170,7 @@ $admonitions: (
// Define base class
.md-typeset .#{$name} > .admonition-title {
background-color: transparentize($tint, 0.9);
background-color: transparentize($tint, 0.85);
// Icon
&::before {

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

@ -112,7 +112,7 @@
// Footnote back reference
.footnote-backref {
display: inline-block;
color: var(--md-primary-fg-color);
color: var(--md-text-link-color);
// Hack: remove Unicode arrow for icon
font-size: 0;
vertical-align: text-bottom;
@ -149,7 +149,7 @@
// Always show for print
@media print {
color: var(--md-primary-fg-color);
color: var(--md-text-link-color);
transform: translateX(0);
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
font-size: 125%;
background-color: var(--md-default-bg-color);
// [screen medium +]: Set base font-size to 11px
@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
// correct again. Otherwise the spacing would be based on 20px.
font-size: 0.5rem; // stylelint-disable-line unit-whitelist
background-color: var(--md-default-bg-color);
// [tablet portrait -]: Lock body to disable scroll bubbling
@include break-to-device(tablet portrait) {

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

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

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

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

4
src/base.html
View File

@ -166,11 +166,13 @@
<!-- Text direction and color palette, if defined -->
{% 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 accent = palette.accent | replace(" ", "-") | lower %}
<body
dir="{{ direction }}"
data-md-color-scheme="{{ scheme }}"
data-md-color-primary="{{ primary }}"
data-md-color-accent="{{ accent }}"
>