Skip to content

Instantly share code, notes, and snippets.

@mickmister

mickmister/mattermost_theme_switcher_bookmarklet.md

Last active February 22, 2024 16:55
Show Gist options
  • Save mickmister/08501a914d073c32c12d571af13039b7 to your computer and use it in GitHub Desktop.
Save mickmister/08501a914d073c32c12d571af13039b7 to your computer and use it in GitHub Desktop.
Download ZIP
Mattermost Theme Switcher Bookmarklet
Raw
mattermost_theme_switcher_bookmarklet.md

A Bookmarklet to easily switch between themes in Mattermost.

The following pieces of code can be used as a bookmark URL to change your user's theme. You can copy each of these scripts into individual bookmarks in your browser. Clicking the bookmark will then change your user's theme to that value, and you should immediately see the changes in the UI.

For ease of use, you can create a folder in your bookmarks to store these, and have a bookmark for each of the following themes.

javascript: (() => {const bookmarkletTheme = 'Indigo'; fetch("/api/v4/users/me", {"headers": {"x-requested-with": "XMLHttpRequest"},"referrerPolicy": "no-referrer","mode": "cors","credentials": "include"}).then(r => r.json()).then(user => fetch("/api/v4/users/" + user.id + "/preferences", {"headers": {"x-requested-with": "XMLHttpRequest"},"body": "[{\"user_id\":\"" + user.id + "\",\"category\":\"theme\",\"name\":\"\",\"value\":\"{\\\"type\\\":\\\"" + bookmarkletTheme + "\\\",\\\"sidebarBg\\\":\\\"#0f1a2e\\\",\\\"sidebarText\\\":\\\"#ffffff\\\",\\\"sidebarUnreadText\\\":\\\"#ffffff\\\",\\\"sidebarTextHoverBg\\\":\\\"#222c3f\\\",\\\"sidebarTextActiveBorder\\\":\\\"#1279ba\\\",\\\"sidebarTextActiveColor\\\":\\\"#ffffff\\\",\\\"sidebarHeaderBg\\\":\\\"#152231\\\",\\\"sidebarHeaderTextColor\\\":\\\"#dddfe4\\\",\\\"sidebarTeamBarBg\\\":\\\"#05080f\\\",\\\"onlineIndicator\\\":\\\"#3db887\\\",\\\"awayIndicator\\\":\\\"#f5ab00\\\",\\\"dndIndicator\\\":\\\"#d24b4e\\\",\\\"mentionBg\\\":\\\"#1c58d9\\\",\\\"mentionBj\\\":\\\"#1c58d9\\\",\\\"mentionColor\\\":\\\"#ffffff\\\",\\\"centerChannelBg\\\":\\\"#0a111f\\\",\\\"centerChannelColor\\\":\\\"#dddfe4\\\",\\\"newMessageSeparator\\\":\\\"#81a3ef\\\",\\\"linkColor\\\":\\\"#5d89ea\\\",\\\"buttonBg\\\":\\\"#386fe5\\\",\\\"buttonColor\\\":\\\"#ffffff\\\",\\\"errorTextColor\\\":\\\"#d24b4e\\\",\\\"mentionHighlightBg\\\":\\\"#133a91\\\",\\\"mentionHighlightLink\\\":\\\"#a4f4f4\\\",\\\"codeTheme\\\":\\\"solarized-dark\\\"}\"}]","method": "PUT","mode": "cors","credentials": "include"}))})()
javascript: (() => {const bookmarkletTheme = 'Quartz'; fetch("/api/v4/users/me", {"headers": {"x-requested-with": "XMLHttpRequest"},"referrerPolicy": "no-referrer","mode": "cors","credentials": "include"}).then(r => r.json()).then(user => fetch("/api/v4/users/" + user.id + "/preferences", {"headers": {"x-requested-with": "XMLHttpRequest"},"body": "[{\"user_id\":\"" + user.id + "\",\"category\":\"theme\",\"name\":\"\",\"value\":\"{\\\"type\\\":\\\"" + bookmarkletTheme + "\\\",\\\"sidebarBg\\\":\\\"#0f1a2e\\\",\\\"sidebarText\\\":\\\"#ffffff\\\",\\\"sidebarUnreadText\\\":\\\"#ffffff\\\",\\\"sidebarTextHoverBg\\\":\\\"#222c3f\\\",\\\"sidebarTextActiveBorder\\\":\\\"#1279ba\\\",\\\"sidebarTextActiveColor\\\":\\\"#ffffff\\\",\\\"sidebarHeaderBg\\\":\\\"#152231\\\",\\\"sidebarHeaderTextColor\\\":\\\"#dddfe4\\\",\\\"sidebarTeamBarBg\\\":\\\"#05080f\\\",\\\"onlineIndicator\\\":\\\"#3db887\\\",\\\"awayIndicator\\\":\\\"#f5ab00\\\",\\\"dndIndicator\\\":\\\"#d24b4e\\\",\\\"mentionBg\\\":\\\"#1c58d9\\\",\\\"mentionBj\\\":\\\"#1c58d9\\\",\\\"mentionColor\\\":\\\"#ffffff\\\",\\\"centerChannelBg\\\":\\\"#0a111f\\\",\\\"centerChannelColor\\\":\\\"#dddfe4\\\",\\\"newMessageSeparator\\\":\\\"#81a3ef\\\",\\\"linkColor\\\":\\\"#5d89ea\\\",\\\"buttonBg\\\":\\\"#386fe5\\\",\\\"buttonColor\\\":\\\"#ffffff\\\",\\\"errorTextColor\\\":\\\"#d24b4e\\\",\\\"mentionHighlightBg\\\":\\\"#133a91\\\",\\\"mentionHighlightLink\\\":\\\"#a4f4f4\\\",\\\"codeTheme\\\":\\\"solarized-dark\\\"}\"}]","method": "PUT","mode": "cors","credentials": "include"}))})()
javascript: (() => {const bookmarkletTheme = 'Sapphire'; fetch("/api/v4/users/me", {"headers": {"x-requested-with": "XMLHttpRequest"},"referrerPolicy": "no-referrer","mode": "cors","credentials": "include"}).then(r => r.json()).then(user => fetch("/api/v4/users/" + user.id + "/preferences", {"headers": {"x-requested-with": "XMLHttpRequest"},"body": "[{\"user_id\":\"" + user.id + "\",\"category\":\"theme\",\"name\":\"\",\"value\":\"{\\\"type\\\":\\\"" + bookmarkletTheme + "\\\",\\\"sidebarBg\\\":\\\"#0f1a2e\\\",\\\"sidebarText\\\":\\\"#ffffff\\\",\\\"sidebarUnreadText\\\":\\\"#ffffff\\\",\\\"sidebarTextHoverBg\\\":\\\"#222c3f\\\",\\\"sidebarTextActiveBorder\\\":\\\"#1279ba\\\",\\\"sidebarTextActiveColor\\\":\\\"#ffffff\\\",\\\"sidebarHeaderBg\\\":\\\"#152231\\\",\\\"sidebarHeaderTextColor\\\":\\\"#dddfe4\\\",\\\"sidebarTeamBarBg\\\":\\\"#05080f\\\",\\\"onlineIndicator\\\":\\\"#3db887\\\",\\\"awayIndicator\\\":\\\"#f5ab00\\\",\\\"dndIndicator\\\":\\\"#d24b4e\\\",\\\"mentionBg\\\":\\\"#1c58d9\\\",\\\"mentionBj\\\":\\\"#1c58d9\\\",\\\"mentionColor\\\":\\\"#ffffff\\\",\\\"centerChannelBg\\\":\\\"#0a111f\\\",\\\"centerChannelColor\\\":\\\"#dddfe4\\\",\\\"newMessageSeparator\\\":\\\"#81a3ef\\\",\\\"linkColor\\\":\\\"#5d89ea\\\",\\\"buttonBg\\\":\\\"#386fe5\\\",\\\"buttonColor\\\":\\\"#ffffff\\\",\\\"errorTextColor\\\":\\\"#d24b4e\\\",\\\"mentionHighlightBg\\\":\\\"#133a91\\\",\\\"mentionHighlightLink\\\":\\\"#a4f4f4\\\",\\\"codeTheme\\\":\\\"solarized-dark\\\"}\"}]","method": "PUT","mode": "cors","credentials": "include"}))})()
javascript: (() => {const bookmarkletTheme = 'Denim'; fetch("/api/v4/users/me", {"headers": {"x-requested-with": "XMLHttpRequest"},"referrerPolicy": "no-referrer","mode": "cors","credentials": "include"}).then(r => r.json()).then(user => fetch("/api/v4/users/" + user.id + "/preferences", {"headers": {"x-requested-with": "XMLHttpRequest"},"body": "[{\"user_id\":\"" + user.id + "\",\"category\":\"theme\",\"name\":\"\",\"value\":\"{\\\"type\\\":\\\"" + bookmarkletTheme + "\\\",\\\"sidebarBg\\\":\\\"#0f1a2e\\\",\\\"sidebarText\\\":\\\"#ffffff\\\",\\\"sidebarUnreadText\\\":\\\"#ffffff\\\",\\\"sidebarTextHoverBg\\\":\\\"#222c3f\\\",\\\"sidebarTextActiveBorder\\\":\\\"#1279ba\\\",\\\"sidebarTextActiveColor\\\":\\\"#ffffff\\\",\\\"sidebarHeaderBg\\\":\\\"#152231\\\",\\\"sidebarHeaderTextColor\\\":\\\"#dddfe4\\\",\\\"sidebarTeamBarBg\\\":\\\"#05080f\\\",\\\"onlineIndicator\\\":\\\"#3db887\\\",\\\"awayIndicator\\\":\\\"#f5ab00\\\",\\\"dndIndicator\\\":\\\"#d24b4e\\\",\\\"mentionBg\\\":\\\"#1c58d9\\\",\\\"mentionBj\\\":\\\"#1c58d9\\\",\\\"mentionColor\\\":\\\"#ffffff\\\",\\\"centerChannelBg\\\":\\\"#0a111f\\\",\\\"centerChannelColor\\\":\\\"#dddfe4\\\",\\\"newMessageSeparator\\\":\\\"#81a3ef\\\",\\\"linkColor\\\":\\\"#5d89ea\\\",\\\"buttonBg\\\":\\\"#386fe5\\\",\\\"buttonColor\\\":\\\"#ffffff\\\",\\\"errorTextColor\\\":\\\"#d24b4e\\\",\\\"mentionHighlightBg\\\":\\\"#133a91\\\",\\\"mentionHighlightLink\\\":\\\"#a4f4f4\\\",\\\"codeTheme\\\":\\\"solarized-dark\\\"}\"}]","method": "PUT","mode": "cors","credentials": "include"}))})()
javascript: (() => {const bookmarkletTheme = 'Onyx'; fetch("/api/v4/users/me", {"headers": {"x-requested-with": "XMLHttpRequest"},"referrerPolicy": "no-referrer","mode": "cors","credentials": "include"}).then(r => r.json()).then(user => fetch("/api/v4/users/" + user.id + "/preferences", {"headers": {"x-requested-with": "XMLHttpRequest"},"body": "[{\"user_id\":\"" + user.id + "\",\"category\":\"theme\",\"name\":\"\",\"value\":\"{\\\"type\\\":\\\"" + bookmarkletTheme + "\\\",\\\"sidebarBg\\\":\\\"#0f1a2e\\\",\\\"sidebarText\\\":\\\"#ffffff\\\",\\\"sidebarUnreadText\\\":\\\"#ffffff\\\",\\\"sidebarTextHoverBg\\\":\\\"#222c3f\\\",\\\"sidebarTextActiveBorder\\\":\\\"#1279ba\\\",\\\"sidebarTextActiveColor\\\":\\\"#ffffff\\\",\\\"sidebarHeaderBg\\\":\\\"#152231\\\",\\\"sidebarHeaderTextColor\\\":\\\"#dddfe4\\\",\\\"sidebarTeamBarBg\\\":\\\"#05080f\\\",\\\"onlineIndicator\\\":\\\"#3db887\\\",\\\"awayIndicator\\\":\\\"#f5ab00\\\",\\\"dndIndicator\\\":\\\"#d24b4e\\\",\\\"mentionBg\\\":\\\"#1c58d9\\\",\\\"mentionBj\\\":\\\"#1c58d9\\\",\\\"mentionColor\\\":\\\"#ffffff\\\",\\\"centerChannelBg\\\":\\\"#0a111f\\\",\\\"centerChannelColor\\\":\\\"#dddfe4\\\",\\\"newMessageSeparator\\\":\\\"#81a3ef\\\",\\\"linkColor\\\":\\\"#5d89ea\\\",\\\"buttonBg\\\":\\\"#386fe5\\\",\\\"buttonColor\\\":\\\"#ffffff\\\",\\\"errorTextColor\\\":\\\"#d24b4e\\\",\\\"mentionHighlightBg\\\":\\\"#133a91\\\",\\\"mentionHighlightLink\\\":\\\"#a4f4f4\\\",\\\"codeTheme\\\":\\\"solarized-dark\\\"}\"}]","method": "PUT","mode": "cors","credentials": "include"}))})()
Raw
x_script.js
// slightly easier to read than the examples above
const bookmarkletTheme = 'Indigo';
fetch("/api/v4/users/me", {"headers": {"x-requested-with": "XMLHttpRequest"}, "referrerPolicy": "no-referrer", "mode": "cors", "credentials": "include"})
.then(r => r.json())
.then(user => fetch("/api/v4/users/" + user.id + "/preferences", {"headers": {"x-requested-with": "XMLHttpRequest"}, "body": "[{\"user_id\":\"" + user.id + "\",\"category\":\"theme\",\"name\":\"\",\"value\":\"{\\\"type\\\":\\\"" + bookmarkletTheme + "\\\",\\\"sidebarBg\\\":\\\"#0f1a2e\\\",\\\"sidebarText\\\":\\\"#ffffff\\\",\\\"sidebarUnreadText\\\":\\\"#ffffff\\\",\\\"sidebarTextHoverBg\\\":\\\"#222c3f\\\",\\\"sidebarTextActiveBorder\\\":\\\"#1279ba\\\",\\\"sidebarTextActiveColor\\\":\\\"#ffffff\\\",\\\"sidebarHeaderBg\\\":\\\"#152231\\\",\\\"sidebarHeaderTextColor\\\":\\\"#dddfe4\\\",\\\"sidebarTeamBarBg\\\":\\\"#05080f\\\",\\\"onlineIndicator\\\":\\\"#3db887\\\",\\\"awayIndicator\\\":\\\"#f5ab00\\\",\\\"dndIndicator\\\":\\\"#d24b4e\\\",\\\"mentionBg\\\":\\\"#1c58d9\\\",\\\"mentionBj\\\":\\\"#1c58d9\\\",\\\"mentionColor\\\":\\\"#ffffff\\\",\\\"centerChannelBg\\\":\\\"#0a111f\\\",\\\"centerChannelColor\\\":\\\"#dddfe4\\\",\\\"newMessageSeparator\\\":\\\"#81a3ef\\\",\\\"linkColor\\\":\\\"#5d89ea\\\",\\\"buttonBg\\\":\\\"#386fe5\\\",\\\"buttonColor\\\":\\\"#ffffff\\\",\\\"errorTextColor\\\":\\\"#d24b4e\\\",\\\"mentionHighlightBg\\\":\\\"#133a91\\\",\\\"mentionHighlightLink\\\":\\\"#a4f4f4\\\",\\\"codeTheme\\\":\\\"solarized-dark\\\"}\"}]", "method": "PUT", "mode": "cors", "credentials": "include"}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment