elements
elements copied to clipboard
stoplightio
Dark Mode Option [Design]
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.
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?
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.
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 :)
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!
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:
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.
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!
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 ^^
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
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>
