Dark Mode Option [Design]

philsturgeon commented 3 years ago

User story.

As an API/StoplightProject component user, I can do enable "dark mode", so that I can have dark mode.

Is your feature request related to a problem?

We technically do have support for it, but we've not created a user facing config option as it's not quite the right colors. @noor-ahmad if you could help us get dark mode looking brilliant, we can get dark mode into the hands of our eager users!

Describe the solution you'd like

<elements-api darkMode />
<elements-stoplight-project darkMode />

Additional Context

You can use Storybook to enable dark mode for either the API Component or StoplightProject.

noor-ahmad commented 3 years ago

Yes, would love to help out with dark mode enhancements! Going to assign myself to this ticket and create a followup for implementation. We want this done for Elements 7.1, right?

philsturgeon commented 3 years ago

Yeah we’ve got some time, but can get it out in a 7.0.x if we get the work done sooner.

-- Phil Sturgeon Product @ Stoplight.io

On Jun 16, 2021, at 19:58, noor-ahmad @.***> wrote:

Yes, would love to help out with dark mode enhancements! Going to assign myself to this ticket and create a followup for implementation. We want this done for Elements 7.1, right?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

owen-caulfield commented 3 years ago

Any news on this?

philsturgeon commented 3 years ago

Passing this one over to @mnaumanali94.

jensljungblad commented 3 years ago

Would be cool!

callicles commented 2 years ago

Looks like the work has been done and is just missing the stacked layout: ref https://github.com/stoplightio/elements/pull/1366 would be great to get this across the finish line :)

TekExplorer commented 1 year ago

How is this going? It seems to me like its implemented, but not exposed? I would love to be able to use the web component with dark mode!

KaranTrivedi commented 1 year ago

Any updates? My eyes are burning, please give us darkmode ..

JulianCataldo commented 1 year ago

Rough start,

[EDIT — Version 2]

body {
    background-color: #1c1917;
}

/* :root :not(sl-code-highlight) */
:root {
    --color-canvas-50: #040811;
    --color-canvas-100: #111c43;
    --color-canvas-200: #1e3a8a;
    --color-canvas-300: #1e40af;
    --color-canvas: #1c1917;
    --color-canvas-tint: #171717;
    --color-text: #f8fafc;
    --color-text-heading: #f8fafc;
    --color-text-paragraph: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-text-primary: #93c5fd;
    --color-canvas-pure: #01050f;
    --color-text-light: #dce3f4;
}

.sl-overflow-y-auto {
    color-scheme: dark; /* For scrollbar */
}

https://tailwindcss.com/docs/customizing-colors

Just a bandaid for our poor eyes in the meantime :p It shows my hack method so other can do the same.

Computed:

zeitiv commented 1 year ago

The current dark mode implementation can be enabled using <html lang="en" data-theme="dark">. As mentioned by op some colors could need some improvement. For example the texts in code highlight blocks aren't really readable.

TekExplorer commented 1 year ago

The current dark mode implementation can be enabled using <html lang="en" data-theme="dark">. As mentioned by op some colors could need some improvement. For example the texts in code highlight blocks aren't really readable.

Awesome, but what the ever-living F are those code block colors?!!? you cant even see the text in the current version! devs wtf, it is not that hard to have a working dark mode!

JulianCataldo commented 1 year ago

The current dark mode implementation can be enabled using <html lang="en" data-theme="dark">. As mentioned by op some colors could need some improvement. For example the texts in code highlight blocks aren't really readable.

Awesome, but what the ever-living F are those code block colors?!!? you cant even see the text in the current version! devs wtf, it is not that hard to have a working dark mode!

It was months ago, but IIRC, the problem lies in inline styles injected by the underlying syntax highlighter. Some can use tokens, with CSS props. (starry-night, highlight.js, Prism…) some can put them inline (shiki)… So yeah, need a bit more of work than just swapping stylesheets or vars ^^

gfigueras-sage commented 1 year ago

The current dark mode implementation can be enabled using <html lang="en" data-theme="dark">. As mentioned by op some colors could need some improvement. For example the texts in code highlight blocks aren't really readable.

Definitely needs some improvement. I'm struggling to customise the text colours because there's no "official" way to change them. I believe Spotify uses Stoplight elements and they use different colours, but no idea how they managed that: https://developer.spotify.com/documentation/web-api/reference/get-an-album

npalmer-zs commented 10 months ago

I created a brute-force work around using jQuery as an interim solution for anyone who finds this and is interested:

For this to work, I wrapped the elements tag in a div:

<div id="elements-content" style="height: 100%;">
  <elements-api apiDescriptionUrl="..." router="hash" style="height: 100%;"/>
</div>

I then used the following jQuery event listener to selectively replace colors after any DOM updates inside of my div:

<script defer>
    $('#elements-content').on('DOMSubtreeModified', function () {{
        $("span").each(function () {{
            var color = $(this).css("color");
            if (color == "rgb(24, 54, 145)") {{
                $(this).css("color", "rgb(111, 66, 193)");
            }}
            if (color == "rgb(3, 47, 98)") {{
                $(this).css("color", "rgb(0, 112, 127)");
            }};
            if (color == "rgb(51, 51, 51)") {{
                $(this).css("color", "rgb(91, 91, 91)");
            }};
        }});
    }});
</script>

stoplightio / elements