moxystudio / next-with-moxy

MOXY's boilerplate to accelerate the setup of new Next.js based web applications
https://next-with.moxy.tech
MIT License
101 stars 11 forks source link

Support dark-mode in the docs #43

Closed satazor closed 4 years ago

satazor commented 4 years ago
/* ==========================================================================
   Infima theme variables
   ========================================================================== */

:root {
    --ifm-code-font-size: 95%;
    --ifm-code-border-radius: 3px;
}

html:not([data-theme="dark"]) {
    --ifm-font-base-color: #180d2d; /* A darker variant of Dark Blue - #221240 */
    --ifm-color-primary: #2932d3; /* Vivid Blue */
    --ifm-color-primary-dark: #252dbe;
    --ifm-color-primary-darker: #232ab3;
    --ifm-color-primary-darkest: #1d2394;
    --ifm-color-primary-light: #3c44d9;
    --ifm-color-primary-lighter: #474edb;
    --ifm-color-primary-lightest: #666de1;
    --ifm-code-background: rgba(34, 18, 64, 0.05);
}

html[data-theme="dark"] {
    --ifm-color-primary: #9fa4ec; /* A much lighter variant of Dark Blue - #221240 */
    --ifm-color-primary-dark: #7e85e5;
    --ifm-color-primary-darker: #6e75e2;
    --ifm-color-primary-darkest: #3c46d8;
    --ifm-color-primary-light: #c0c3f3;
    --ifm-color-primary-lighter: #d0d3f6;
    --ifm-color-primary-lightest: #fff;
    --ifm-code-background: rgba(208, 211, 246, 0.05);
}

The media queries for the sidebar in mobile probably need to be adjusted, to account for the dark toggle.

zebateira commented 4 years ago

Has this been done? I just opened the docs page and I got this:

image

This one too: image

I remember seeing a theme toggle at the top, I used it to have the dark mode, and that left a theme=dark item in the local storage:

image

ubmit commented 4 years ago

Has this been done? I just opened the docs page and I got this:

image

This one too: image

I remember seeing a theme toggle at the top, I used it to have the dark mode, and that left a theme=dark item in the local storage:

image

I'm also pretty sure there was a toggle before. Maybe @satazor removed it since dark theme wasn't supported anyway.

I will start working on this issue now