[go: up one dir, main page]
Skip to content

Snippets: Add options to allow dark mode for the embed

Release notes

Snippets can be embedded to various web page, but there's problem with embedding them in a website that generally have dark design. Currently the embedded snippets have dominantly light colors that doesn't match with website that have dominantly dark color design.

Since GitLab has dark mode already (even tough it's in alpha), I think we can extend this feature to snippet embed also. This issue will propose a new option so that author can choose the style that match their site design.

Problem to solve

Embedding snippets on dominantly dark website looks patchy. Here's how it looks on my dominantly dark blog: https://blog.christianto.net/snippet-tests/

image

Proposal

I have several proposals for this. I have the boring solution by just adding a new query to the url, and one that allows the author configure all embed with single javascript option.

Add new Query

The embed code mostlikely looks like this:

<script src="https://gitlab.com/digivert/bloggies/test-project/-/snippets/2435351.js"></script>

We can add new option to the url, something like ?code=dark&ui=dark_mode or ?code=solarized_dark&ui=dark_mode on the script src.

<script src="https://gitlab.com/digivert/bloggies/test-project/-/snippets/2435351.js?code=solarized_dark&ui=dark_mode"></script>

The code's value are taken from Syntax Highlighting Theme on the Preference Setting and will change the body of the code, the same goes for ui, we can use values from Color theme section and it will change the embed header color (...to follow the navbar color).

Since GitLab already owns the styling for UI and Code already, I thought we can reuse them for Snippet Embed too.

Via JS Options

Several blogs have a lot of snippets, so changing the URL one by one is not feasible. There are also some website that have switch for light mode and dark mode without the need to refresh the page. We can actually just reload the snippets script with new query (if earlier proposal got accepted), and remove the written html elements, but this will cause layout shift, which is undesireable.

So I'm proposing to add a JS options that GitLab can use to dynamically change the styling that works for site-wide.

I'm thinking we can expose something like this for the website administrator:

window.GitLab.Snippets.theme = {ui: "dark_mode", code: "dark"};

Then we can monitor that variable, to check if the variable updates. If it update, we can add another styling for the choosen theme.

Intended users

For any developer / administrator who posts on medium.com and personal blog. (taken from #26936)

Feature Usage Metrics

(I don't have this data)

Edited by Chris Qiang