### 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](https://docs.gitlab.com/ee/user/profile/preferences.html#dark-mode) (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/  ### 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: ```html <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`. ```html <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](https://gitlab.com/-/profile/preferences) 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: ```js window.GitLab.Snippets.theme = {ui: "dark_mode", code: "dark"}; ``` Then we can [monitor](https://stackoverflow.com/a/50862441/4721245) 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 gitlab-org/gitlab#26936) * Delaney, Development Team Lead, https://design.gitlab.com/research/personas#persona-delaney * Sasha, Software Developer, https://design.gitlab.com/research/personas#persona-sasha * Devon, DevOps Engineer, https://design.gitlab.com/research/personas#persona-devon * Sidney, Systems Administrator, https://design.gitlab.com/research/personas#persona-sidney ### Feature Usage Metrics _(I don't have this data)_ <!-- How are you going to track usage of this feature? Think about user behavior and their interaction with the product. What indicates someone is getting value from it? Create tracking issue using the Snowplow event tracking template. See https://gitlab.com/gitlab-org/gitlab/-/blob/master/.gitlab/issue_templates/Snowplow%20event%20tracking.md --> <!-- Label reminders Use the following resources to find the appropriate labels: - https://gitlab.com/gitlab-org/gitlab/-/labels - https://about.gitlab.com/handbook/product/categories/features/ -->