Skip to content

Commit

Permalink
Merge pull request #186 from flotiq/feature/add-dark-mode
Browse files Browse the repository at this point in the history
Add dark mode, remove repo link
  • Loading branch information
andrzejwp authored Oct 28, 2023
2 parents 8297eab + 8fe02f9 commit a43b43f
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 31 deletions.
89 changes: 60 additions & 29 deletions docs/css/flotiq.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,7 @@
max-width: 70rem;
}

.md-container {
background: linear-gradient(to right, #E9F3FF, #E9F3FF calc((100% - 70rem)/2 + 12.5rem), #fff calc((100% - 70rem)/2 + 12.5rem), #fff 100%);
}

@media screen and (max-width: 88rem) {
.md-container {
background: linear-gradient(to right, #E9F3FF, #E9F3FF 12.5rem, #fff 12.5rem, #fff 100%);
}
}

@media screen and (max-width: 76.1875em) {
.md-container {
background: white;
}
}


@media screen and (min-width: 76.25em) {
Expand All @@ -27,7 +13,7 @@
}

.md-typeset, .md-nav__link{
color: #141046;
/* color: #141046;*/
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 14px;
font-style: normal;
Expand All @@ -36,19 +22,13 @@
letter-spacing: -0.005em;
}

.md-nav__link:focus, .md-nav__link:hover {
color: #0083FC;
}
.md-nav__item .md-nav__link--active {
color: #0083FC;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
color: #050038;

font-weight: bold;
}
.video-wrapper {
Expand Down Expand Up @@ -76,7 +56,7 @@ header.md-header {
}

.md-tabs{
background-color: #141046;

}

.md-sidebar__scrollwrap, .md-content {
Expand Down Expand Up @@ -133,6 +113,42 @@ pre::before {
*/padding: 10px;
}

/* :root {
--md-primary-fg-color: #4051b5;
--md-primary-fg-color--light: #5d6cc0;
--md-primary-fg-color--dark: #303fa1;
--md-primary-bg-color: #fff;
--md-primary-bg-color--light: #ffffffb3;
--md-accent-fg-color: #526cfe;
--md-accent-fg-color--transparent: #526cfe1a;
--md-accent-bg-color: #fff;
--md-accent-bg-color--light: #ffffffb3;
--md-primary-fg-color: #4051b5;
--md-primary-fg-color--light: #5d6cc0;
--md-primary-fg-color--dark: #303fa1;
--md-primary-bg-color: #fff;
--md-primary-bg-color--light: #ffffffb3;
--md-accent-fg-color: #526cfe;
--md-accent-bg-color: #fff;
--md-accent-bg-color--light: #ffffffb3;
} */

[data-md-color-scheme="slate"] {
--md-accent-fg-color: #8597fe;
--md-primary-fg-color: #6070c7;
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5 {
color: #e9ebfc;
}

#disqus_thread {
background-color: black;
color: #e9ebfc;
}
}
/*
/////////////////
// Code Blocks //
Expand Down Expand Up @@ -165,14 +181,14 @@ pre::before {


.md-typeset summary:after {
color: #0083FC;
/*color: #0083FC;*/
}

.md-typeset .admonition.example > .admonition-title,
.md-typeset .admonition.example > summary,
.md-typeset details.example > .admonition-title,
.md-typeset details.example > summary {
background-color: rgba(154, 109, 255, 0.21);
/*background-color: rgba(154, 109, 255, 0.21);*/
}

.md-nav__link[data-md-state='blur'] {
Expand All @@ -186,11 +202,11 @@ pre::before {
*/

.md-typeset .footnote {
color: #888484 !important;
/*color: #888484 !important;*/
}

.md-typeset .footnote-ref:before {
border-color: #888484 !important;
/* border-color: #888484 !important;*/
}

.md-typeset code.hljs {
Expand Down Expand Up @@ -298,7 +314,8 @@ pre::before {
}

.md-footer {
background: white;
/* background: white; */
background: #141046;
color: #8EA1B8;
}

Expand All @@ -309,7 +326,8 @@ pre::before {
}

.md-footer-meta {
background: white;
/* background: white; */
background: #141046;
max-width: 48rem;
margin: 0 auto;
padding: 0 1.2rem;
Expand Down Expand Up @@ -394,6 +412,19 @@ li.md-nav__item.md-nav__item--active:not(.md-nav__item--nested) {
color: #141046;
}

[data-md-color-scheme="slate"] {
.was-it-helpful-wrapper .give__title {
color: white;
}
.was-it-helpful-wrapper .give-answers a {
color: white;
}

/* .disqus_thread {
background-color: black;
} */
}

.was-it-helpful-wrapper .give-answers a {
text-transform: none !important;
font-family: Inter, 'sans-serif';
Expand Down
20 changes: 18 additions & 2 deletions mkdocs.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
site_name: Flotiq Developer Documentation
site_url: https://flotiq.com/docs/
#repo_url: https://github.com/flotiq/flotiq-docs/
edit_uri: https://github.com/flotiq/flotiq-docs/edit/master/docs/
edit_uri: https://github.com/flotiq/flotiq-docs/edit/master/docs/
copyright: Copyright &copy; 2019 onwards <a target="_blank" href="https://www.flotiq.com/">Flotiq<a>
dev_addr: 0.0.0.0:4000
theme:
Expand All @@ -11,7 +11,23 @@ theme:
custom_dir: theme
language: en
palette:
primary: '#0083FC'

# Palette toggle for light mode
- media: "(prefers-color-scheme: light)"
scheme: default
primary: '#0083FC'
toggle:
icon: material/brightness-7
name: Switch to dark mode

# Palette toggle for dark mode
- media: "(prefers-color-scheme: dark)"
scheme: slate
primary: custom
accent: custom
toggle:
icon: material/brightness-4
name: Switch to light mode
features:
- navigation.instant
- navigation.top
Expand Down

0 comments on commit a43b43f

Please sign in to comment.