Skip to content

Commit

Permalink
added automatic dark mode option
Browse files Browse the repository at this point in the history
  • Loading branch information
@nomadjimbob
nomadjimbob committed May 13, 2023
1 parent 43b1cfb commit 34d5f19
Show file tree
Hide file tree
Showing 8 changed files with 180 additions and 117 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,9 @@ If the plugin is installed, the **Template Styles Settings** page will be expand

## Releases

- **NEXT**
- Added automatic Light/Dark mode option (disabled by default).

- **_2022-05-13_**
- Fixed tables not being styling correctly and incorrect language used in the styling config [#50](https://github.com/nomadjimbob/mikio/issues/50). Thanks RonaldPR.
- The themes LessC engine will output any exceptions that occur in the fallback CSS to help track issues.
Expand Down
238 changes: 124 additions & 114 deletions assets/mikio.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,113 +6,119 @@
* @license GPLv2 (http://www.gnu.org/licenses/gpl-2.0.html)
*/

:root[data-theme="theme-light"] {
--text: red;
:root[data-theme-auto="true"] {
--display-theme-light: none !important;
--display-theme-dark: none !important;
--display-theme-auto: inline-block !important;
}
:root[data-theme="theme-light"] {
--text: #333;
--link: #2b73b7;
--link-hover: #2b73b7;
--link-visited: #2b73b7;
--link-active: #2b73b7;
--existing: #008800;
--existing-hover: #008800;
--existing-visited: #008800;
--existing-active: #008800;
--missing: #dd3300;
--missing-hover: #dd3300;
--missing-visited: #dd3300;
--missing-active: #dd3300;
--background: #ffffff;
--existing: #080;
--existing-hover: #080;
--existing-visited: #080;
--existing-active: #080;
--missing: #d30;
--missing-hover: #d30;
--missing-visited: #d30;
--missing-active: #d30;
--background: #fff;
--admin-background-color: #f2f2f2;
--code-text-color: #e83e8c;
--code-border-color: transparent;
--code-background-color: transparent;
--control-text-color: #495057;
--control-border-color: #6c757d;
--control-background-color: #ffffff;
--control-background-color: #fff;
--input-border-color: #ced4da;
--button-text-color: #6c757d;
--button-background-color: #ffffff;
--button-background-color: #fff;
--button-border-color: #ced4da;
--button-text-hover-color: #6c757d;
--button-background-hover-color: #dddddd;
--button-background-hover-color: #ddd;
--button-border-hover-color: #ced4da;
--button-search-text-color: #ffffff;
--button-search-background-color: #666666;
--button-search-border-color: #666666;
--button-search-text-hover-color: #ffffff;
--button-search-background-hover-color: #666666;
--button-search-border-hover-color: #666666;
--button-search-text-color: #fff;
--button-search-background-color: #666;
--button-search-border-color: #666;
--button-search-text-hover-color: #fff;
--button-search-background-hover-color: #666;
--button-search-border-hover-color: #666;
--button-default-text-color: #ffffff;
--button-default-background-color: #007bff;
--button-default-border-color: #007bff;
--button-default-text-hover-color: #ffffff;
--button-default-background-hover-color: #0069d9;
--button-default-border-hover-color: #0062cc;
--topheader-background-color: #ffffff;
--header-background-color: #ffffff;
--navbar-background-color: #ffffff;
--topheader-background-color: #fff;
--header-background-color: #fff;
--navbar-background-color: #fff;
--navbar-border-color: #e5e5e5;
--navbar-brand-text-color: #1a1a1a;
--navbar-brand-tagline-color: #6c757d;
--navbar-link-color: #1a1a1a;
--navbar-link-hover-color: #1a1a1a;
--subnavbar-text-color: #666666;
--subnavbar-link-color: #666666;
--subnavbar-link-hover-color: #000000;
--subnavbar-text-color: #666;
--subnavbar-link-color: #666;
--subnavbar-link-hover-color: #000;
--subnavbar-background-color: #f8f8f8;
--subnavbar-border-color: #e5e5e5;
--tag-background-color: #999999;
--tag-text-color: #ffffff;
--breadcrumb-background-color: #cccccc;
--tag-background-color: #999;
--tag-text-color: #fff;
--breadcrumb-background-color: #ccc;
--breadcrumb-text-color: #808080;
--breadcrumb-link-color: #666666;
--breadcrumb-link-hover-color: #000000;
--hero-title-color: #000000;
--hero-subtitle-color: #666666;
--breadcrumb-link-color: #666;
--breadcrumb-link-hover-color: #000;
--hero-title-color: #000;
--hero-subtitle-color: #666;
--hero-background-color: #ddf7fb;
--sidebar-text-color: #666666;
--sidebar-link-color: #666666;
--sidebar-link-hover-color: #333333;
--sidebar-text-color: #666;
--sidebar-link-color: #666;
--sidebar-link-hover-color: #333;
--sidebar-background-color: #f2f2f2;
--sidebar-border-color: #e5e5e5;
--content-background: #ffffff;
--toc-background-color: #ffffff;
--content-background: #fff;
--toc-background-color: #fff;
--toc-border-color: #e5e5e5;
--toc-link-color: #666666;
--toc-link-hover-color: #000000;
--pagetools-color: #cccccc;
--pagetools-hover-color: #666666;
--toc-link-color: #666;
--toc-link-hover-color: #000;
--pagetools-color: #ccc;
--pagetools-hover-color: #666;
--footer-text-color: #737373;
--footer-link-color: #666666;
--footer-link-hover-color: #333333;
--footer-background-color: #cccccc;
--table-header-row-background-color: #000000;
--table-header-row-text-color: #dddddd;
--footer-link-color: #666;
--footer-link-hover-color: #333;
--footer-background-color: #ccc;
--table-header-row-background-color: #ddd;
--table-header-row-text-color: #000;
--table-row-border-color: #e5e5e5;
--table-odd-row-background-color: red;
--table-odd-row-text-color: yellow;
--table-even-row-background-color: blue;
--table-even-row-text-color: orange;
--table-odd-row-background-color: #fff;
--table-odd-row-text-color: #000;
--table-even-row-background-color: #f2f2f2;
--table-even-row-text-color: #000;
--dropdown-color: #1a1a1a;
--dropdown-hover-color: #e5e5e5;
--dropdown-border-color: #e5e5e5;
--dropdown-background-color: #ffffff;
--dropdown-background-color: #fff;
--section-edit-highlight: rgba(255,255,0,0.3);
--tree-background-color: #ffffff;
--tree-background-color: #fff;
--tree-border-color: #e5e5e5;
--tab-color: #333333;
--tab-color: #333;
--tab-background-color: transparent;
--tab-border-color: transparent;
--tab-hover-color: #333333;
--tab-background-hover-color: #ffffff;
--tab-border-hover-color: #dddddd;
--tab-active-color: #333333;
--tab-active-background-color: #ffffff;
--tab-active-border-color: #dddddd;
--tab-hover-color: #333;
--tab-background-hover-color: #fff;
--tab-border-hover-color: #ddd;
--tab-active-color: #333;
--tab-active-background-color: #fff;
--tab-active-border-color: #ddd;
--display-theme-light: inline-block;
--display-theme-dark: none;
--display-theme-auto: none;
}
:root[data-theme="theme-dark"] {
--text: #ffffff;
--text: #fff;
--link: #00bc8c;
--link-hover: #009670;
--link-visited: #00bc8c;
Expand All @@ -125,25 +131,25 @@
--missing-hover: #ff0000;
--missing-visited: #ff0000;
--missing-active: #ff0000;
--background: #222222;
--admin-background-color: #222222;
--background: #222;
--admin-background-color: #222;
--code-text-color: #e83e8c;
--code-border-color: transparent;
--code-background-color: transparent;
--control-text-color: #303030;
--control-border-color: #222222;
--control-background-color: #ffffff;
--input-border-color: #222222;
--button-text-color: #ffffff;
--button-background-color: #444444;
--control-border-color: #222;
--control-background-color: #fff;
--input-border-color: #222;
--button-text-color: #fff;
--button-background-color: #444;
--button-border-color: #333333;
--button-text-hover-color: #ffffff;
--button-text-hover-color: #fff;
--button-background-hover-color: #363636;
--button-border-hover-color: #363636;
--button-search-text-color: #ffffff;
--button-search-background-color: #444444;
--button-search-text-color: #fff;
--button-search-background-color: #444;
--button-search-border-color: #333333;
--button-search-text-hover-color: #ffffff;
--button-search-text-hover-color: #fff;
--button-search-background-hover-color: #363636;
--button-search-border-hover-color: #363636;
--button-default-text-color: #ffffff;
Expand All @@ -152,69 +158,70 @@
--button-default-text-hover-color: #ffffff;
--button-default-background-hover-color: #0069d9;
--button-default-border-hover-color: #0062cc;
--topheader-background-color: #222222;
--header-background-color: #222222;
--topheader-background-color: #222;
--header-background-color: #222;
--navbar-background-color: #375a7f;
--navbar-border-color: #375a7f;
--navbar-brand-text-color: #ffffff;
--navbar-brand-tagline-color: #dddddd;
--navbar-brand-text-color: #fff;
--navbar-brand-tagline-color: #ddd;
--navbar-link-color: rgba(255,255,255,0.6);
--navbar-link-hover-color: #ffffff;
--subnavbar-text-color: #222222;
--subnavbar-text-color: #222;
--subnavbar-link-color: rgba(34,34,34,0.7);
--subnavbar-link-hover-color: #222222;
--subnavbar-background-color: #adb5bd;
--subnavbar-border-color: #adb5bd;
--tag-background-color: #00bc8c;
--tag-text-color: #333333;
--breadcrumb-background-color: #333333;
--breadcrumb-text-color: #666666;
--breadcrumb-link-color: #777777;
--breadcrumb-link-hover-color: #ffffff;
--hero-title-color: #ffffff;
--hero-subtitle-color: #dddddd;
--tag-text-color: #333;
--breadcrumb-background-color: #333;
--breadcrumb-text-color: #666;
--breadcrumb-link-color: #777;
--breadcrumb-link-hover-color: #fff;
--hero-title-color: #fff;
--hero-subtitle-color: #ddd;
--hero-background-color: #00bc8c;
--sidebar-text-color: #888888;
--sidebar-link-color: #999999;
--sidebar-link-hover-color: #cccccc;
--sidebar-background-color: #111111;
--sidebar-border-color: #333333;
--content-background: #222222;
--sidebar-text-color: #888;
--sidebar-link-color: #999;
--sidebar-link-hover-color: #ccc;
--sidebar-background-color: #111;
--sidebar-border-color: #333;
--content-background: #222;
--toc-background-color: #303030;
--toc-border-color: #444444;
--toc-link-color: #ffffff;
--toc-link-hover-color: #ffffff;
--pagetools-color: #444444;
--pagetools-hover-color: #555555;
--footer-text-color: #888888;
--footer-link-color: #999999;
--footer-link-hover-color: #cccccc;
--footer-background-color: #111111;
--toc-border-color: #444;
--toc-link-color: #fff;
--toc-link-hover-color: #fff;
--pagetools-color: #444;
--pagetools-hover-color: #555;
--footer-text-color: #888;
--footer-link-color: #999;
--footer-link-hover-color: #ccc;
--footer-background-color: #111;
--table-header-row-background-color: #00bc8c;
--table-header-row-text-color: #fff;
--table-row-border-color: #444444;
--table-odd-row-background-color: #222222;
--table-row-border-color: #444;
--table-odd-row-background-color: #222;
--table-odd-row-text-color: #fff;
--table-even-row-background-color: #333333;
--table-even-row-background-color: #333;
--table-even-row-text-color: #fff;
--dropdown-color: #ffffff;
--dropdown-color: #fff;
--dropdown-hover-color: #375a7f;
--dropdown-border-color: #444444;
--dropdown-background-color: #222222;
--section-edit-highlight: #cccc00;
--tree-background-color: #333333;
--tree-border-color: #444444;
--tab-color: #cccccc;
--dropdown-border-color: #444;
--dropdown-background-color: #222;
--section-edit-highlight: #cc0;
--tree-background-color: #333;
--tree-border-color: #444;
--tab-color: #ccc;
--tab-background-color: transparent;
--tab-border-color: transparent;
--tab-hover-color: #ffffff;
--tab-hover-color: #fff;
--tab-background-hover-color: transparent;
--tab-border-hover-color: #444444;
--tab-active-color: #ffffff;
--tab-active-background-color: #333333;
--tab-active-border-color: #444444;
--tab-border-hover-color: #444;
--tab-active-color: #fff;
--tab-active-background-color: #333;
--tab-active-border-color: #444;
--display-theme-light: none;
--display-theme-dark: inline-block;
--display-theme-auto: none;
}
.mikio-sticky {
position: -webkit-sticky;
Expand Down Expand Up @@ -3853,6 +3860,9 @@ pre {
.mikio .mikio-darklight .mikio-darklight-dark {
display: var(--display-theme-dark);
}
.mikio .mikio-darklight .mikio-darklight-auto {
display: var(--display-theme-auto);
}
.mikio .mikio-darklight-button {
display: flex;
justify-content: center;
Expand Down
Loading

0 comments on commit 34d5f19

Please sign in to comment.