\n\nDoesn't happen if I install directly from [elk.zone](https://elk.zone). ",[3165,3168],{"name":3166,"color":3167},"c: bug","FFA500",{"name":3152,"color":3153},3343,"Icon of Microsoft Store version has white background","2025-08-03T02:09:25Z","https://github.com/elk-zone/elk/issues/3343",0.6935916,{"description":3175,"labels":3176,"number":3180,"owner":3155,"repository":3156,"state":3157,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### Clear and concise description of the problem\r\n\r\n*Partially copied from Discord*\r\n\r\nBack in the days Twitter has removed most of the borders or made them really faded, and it became really hard for neurodivergent folks like me, because it essentially made the app a mishmash of incoherent elements, creating a condition where my eyes are all over the place and I can't just comprehend any information on the page. Gladly they have a high contrast mode that introduced most of the borders back or made them more prominent, it also made all primary colours darker.\r\n\r\nUnfortunately, Elk suffers from the same issue, perhaps to a worse degree, even. For folks like me Elk is simply unusable: it's hard to keep my attention at any particular part of the site — I cannot focus on anything and constantly feeling lost. This is not my experience on Mastodon — with or without a custom theme.\r\n\r\n| | |\r\n|:--:|:--:|\r\n|  |  |\r\n| Regular Mastodon | Mastodon with [Modern](https://userstyles.world/style/4773/mastodon-modern) theme by Freeplay |\r\n\r\nThe reason is simple: lack of contrast and visual boundaries (via borders or backgrounds) to clearly separate the elements into their own ‘baskets’.\r\n\r\n### Suggested solution\r\n\r\nI think one of the solutions will be having a high contrast preference, which would to add borders or make them more prominent, as well as make the colours more contrast-y (darker in light mode, brighter in dark mode).\r\n\r\nHere's what Elk looks like for me after playing with CSS in DevTools for a bit (hover state locked for buttons for demonstration reasons):\r\n\r\n\r\n\r\nHere's what I did:\r\n- Changed font to Inter (Roboto also works). It already made a huge difference making text ever so slightly bolder.\r\n- The primary colours are now much darker (or lighter, where needed, like search) and prominent on slightly grey background that Elk uses.\r\n- Borders introduced to a main (feed) column. Unfortunately I wasn't able to figure out why there's a border at the top.\r\n- Borders themselves now use much darker colours.\r\n- Added on-hover backgrounds to posts and embed cards.\r\n- Added borders to embed cards and removed their default grey background.\r\n\r\nAnd here's video of me doing various stuff on the page:\r\n\r\nhttps://user-images.githubusercontent.com/10401817/213188712-949e4a50-8526-48d1-b393-671902534b71.mp4\r\n\r\n### Alternative\r\n\r\n- Total change of design? Seems too radical.\r\n- Manually fixing styles with UserStyles? This would only work for me then, while others like me have to face the same issues.\r\n- Not using Elk. This what I kinda do already... Sadly. I want to test it like all other cool kids do.\r\n\r\n### Additional context\r\n\r\nImportant note must be made that high contrast mode would not be aimed strictly at the neurodivergent folks *like me*, but primarily at the people with vision issues. Twitter does more stuff for high contrast mode, like adding underlines to every link on the site, but this would not be useful for me (maybe it can be its own toggle like in Discord).",[3177],{"name":3178,"color":3179},"c: a11y","553F0B",1295,"High contrast mode","2023-02-03T03:16:51Z","https://github.com/elk-zone/elk/issues/1295",0.7442004,{"description":3186,"labels":3187,"number":3189,"owner":3155,"repository":3156,"state":3157,"title":3190,"updated_at":3191,"url":3192,"score":3193},"I love being able to set Elk's theme color. But I experience a small amount of dissonance when I'm used to Elk being purple but its favicon is orange, especially when I've pinned its tab:\r\n\r\n\u003Cimg width=\"718\" alt=\"A detail of the Arc browser with Elk open and pinned to a tab. An arrow associates the themed Elk logo, which is purple, with the orange favicon.\" src=\"https://user-images.githubusercontent.com/69633/214944750-91b4b598-0a9c-408b-9d8e-4c2d0320aa2f.png\">\r\n\r\nI wrote a boost in [Arc](https://arc.net/) (a user script in other browsers would also work) to dynamically use the current theme color to colorize the icon based on the current theme:\r\n\r\n\u003Cimg width=\"666\" alt=\"The same browser detail as before, except the favicon has been colorized to match the selected theme color\" src=\"https://user-images.githubusercontent.com/69633/214945674-45d49e75-03f6-4480-b4f2-a5fe7f1ed993.png\">\r\n\r\nThis works by customizing the SVG's fills and including it in the `\u003Clink rel=\"icon\">` element as a data URI.\r\n\r\n\u003Cdetails>\u003Csummary>See the quick and dirty code I used for my boost\u003C/summary>\r\n\u003Cp>\r\n\r\n```javascript\r\n// https://github.com/elk-zone/elk/blob/main/public/logo.svg\r\nconst sourceSvg = '\u003Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"250\" height=\"250\" fill=\"none\">\u003Cmask id=\"a\" width=\"240\" height=\"234\" x=\"4\" y=\"1\" maskUnits=\"userSpaceOnUse\" style=\"mask-type:alpha\">\u003Cpath fill=\"#D9D9D9\" d=\"M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z\"/>\u003C/mask>\u003Cg mask=\"url(#a)\">\u003Cpath fill=\"#EA9E44\" d=\"M116.94 88.1c-13.344 1.552-20.436-2.019-24.706 10.71 0 0 14.336 21.655 52.54 21.112-2.135 8.848-1.144 15.368-1.144 23.207 0 26.079-20.589 48.821-65.961 48.821-23.03 0-51.015 4.191-72.367 15.911-15.175 8.305-27.048 20.336-32.302 37.023l5.956 8.461 11.4.155v47.889l-13.91 21.966L-19.556 387h13.192l1.144-51.227c6.558-3.881 21.58-13.971 34.391-29.494 17.386-20.879 30.731-51.227 15.022-88.793l11.744-5.045c12.887 30.814 8.388 57.514-2.898 79.013 21.58-.698 40.11-2.095 55.819-4.734l-3.584-43.698 12.659-1.087L129.98 387h13.116l2.212-94.459c10.447-4.502 34.239-21.034 45.372-78.47 1.372-6.986 2.135-12.885 2.516-17.93 1.754-12.806 2.745-27.243 3.051-43.698l-18.683-5.976h57.42l5.567-12.807c-5.414.233-11.896-2.639-11.896-2.639l1.297-6.209H242l-65.199-34.384c-7.244 2.794-14.87 6.442-20.208 10.866-4.27-3.105-19.063-12.807-39.653-13.195Z\"/>\u003Cpath fill=\"#C16929\" d=\"M6.217 24.493 18.494 21c5.948 21.577 13.345 33.375 22.648 39.352 8.388 5.099 19.75 5.239 31.799 4.579-3.508-1.164-6.787-2.794-9.837-5.045-6.787-5.045-12.582-13.428-16.929-28.64l12.201-3.649c3.279 11.488 7.092 18.085 12.201 21.888 5.11 3.726 11.286 4.657 18.606 5.433 13.726 1.553 30.884 2.174 52.312 12.264 2.898 1.086 5.872 2.483 8.769 4.036-.381-.776-.762-1.553-1.296-2.406-3.66-5.822-10.828-11.953-24.097-16.92l4.27-12.109c21.581 7.917 30.121 19.171 33.553 28.097 3.965 10.168 1.525 18.124 1.525 18.124-3.05 1.009-6.1 2.406-9.608 3.492-6.634-4.579-12.887-8.033-18.835-10.75-21.962-8.304-43.466-2.638-62.53-.853-14.336 1.32-27.452.698-38.814-6.598-11.21-7.14-21.047-20.8-28.215-46.802Z\"/>\u003Cpath fill=\"#C16929\" d=\"M90.098 45.294c-2.516-5.744-4.041-12.807-3.355-21.5l12.659.932c-.763 10.555 2.897 17.696 7.015 22.353-5.338-.931-10.447-1.04-16.319-1.785ZM170.167 43.974l8.312-9.702c21.58 19.094 8.159 46.415 8.159 46.415l-11.819-1.32c-.382-6.24-1.144-17.836-6.635-24.371 3.584 1.84 6.635 3.865 9.99 6.908 0-5.666-1.754-12.341-8.007-17.93Z\"/>\u003C/g>\u003C/svg>';\r\n// Retrieve or set new colors based on current theme\r\nconst primaryColor = document.documentElement.style.getPropertyValue('--theme-color-name');\r\nconst secondaryColor = primaryColor;\r\n// Replace original colors with theme colors\r\nconst themedSvg = sourceSvg\r\n .replace(/#C16929/g, primaryColor)\r\n .replace(/#EA9E44/g, secondaryColor);\r\n// Clean SVG before encoding it\r\nconst cleanSvg = themedSvg\r\n .replace(/[\\t\\n\\r]/gim, '') // Strip newlines and tabs\r\n .replace(/\\s\\s+/g, ' ') // Condense multiple spaces\r\n .replace(/'/gim, '\\\\i'); // Normalize quotes\r\n// Encode the SVG for a data URI\r\nconst encodedSvg = encodeURIComponent(cleanSvg)\r\n .replace(/\\(/g, '%28') // Encode brackets\r\n .replace(/\\)/g, '%29');\r\n// Build the data URI\r\nconst dataUri = `data:image/svg+xml;charset=UTF-8,${encodedSvg}`;\r\n\r\nfunction updateFavicons() {\r\n const favicons = document.querySelectorAll('link[rel*=\"icon\"][type*=\"svg\"]');\r\n [...favicons].forEach((favicon) => {\r\n favicon.setAttribute('href', dataUri);\r\n });\r\n}\r\n\r\nupdateFavicons();\r\n\r\n// App loads multiple favicons for some reason, wait to try again\r\nsetTimeout(updateFavicons, 5 * 1000);\r\n```\r\n\r\n\u003C/p>\r\n\u003C/details>\r\n\r\nWhile I'm happy to have my favicon themed, it'd be even nicer to have this feature built in! (I also think it'd be nicer to keep the value of the antlers differentiated, I was just impatient. 🙂)",[3188],{"name":3152,"color":3153},1477,"Colorize favicon to match theme","2023-01-26T20:46:28Z","https://github.com/elk-zone/elk/issues/1477",0.74994266,{"description":3195,"labels":3196,"number":3199,"owner":3155,"repository":3156,"state":3200,"title":3201,"updated_at":3202,"url":3203,"score":3204},"After the latest update it have no padding / separation from the edge. It's a bit frustrating on home screen looking. Thank you for review it! 👍",[3197,3198],{"name":3166,"color":3167},{"name":3152,"color":3153},2451,"closed","Elk PWA Android icon","2023-11-01T00:27:26Z","https://github.com/elk-zone/elk/issues/2451",0.68508965,{"description":3206,"labels":3207,"number":3209,"owner":3155,"repository":3156,"state":3200,"title":3210,"updated_at":3211,"url":3212,"score":3213},"I think this is a really important bug to fix soon.\r\n\r\nFor comparison, here's Elk:\r\n\r\n\r\n\r\nHere's the native mastodon app:\r\n\r\n\r\n",[3208],{"name":3166,"color":3167},667,"Emojis show wrong skin colour","2023-01-02T04:54:27Z","https://github.com/elk-zone/elk/issues/667",0.7283444,{"description":3215,"labels":3216,"number":3218,"owner":3155,"repository":3156,"state":3200,"title":3219,"updated_at":3220,"url":3221,"score":3222},"Push Notifications are not working on my side at all\r\n\r\nWhen visiting Elk I get an Error\r\n\r\n\u003Cimg width=\"735\" alt=\"image\" src=\"https://user-images.githubusercontent.com/7195563/209430801-a264524b-f348-48b7-ad1a-f28975eb67a9.png\">\r\n\r\nWhen I go into Notifications I just see a button that is not clickable\r\n\r\n\u003Cimg width=\"950\" alt=\"image\" src=\"https://user-images.githubusercontent.com/7195563/209430821-ff3d675b-6a52-41ae-b5ef-0b6eca3fab5d.png\">\r\n",[3217],{"name":3166,"color":3167},536,"Push Notifications are buggy","2022-12-26T08:48:49Z","https://github.com/elk-zone/elk/issues/536",0.7303102,{"description":3224,"labels":3225,"number":3227,"owner":3155,"repository":3156,"state":3200,"title":3228,"updated_at":3229,"url":3230,"score":3231},"## Hashtags overlapping description\r\n\r\nI was trying to mobile version of Elk today and found a visual bug on the notifications screen.\r\nAs can be seen in the image below the description and hashtags overlap one another.\r\n\r\n\u003Cimg height=\"640px\" src=\"https://user-images.githubusercontent.com/44031065/209993470-7bade9fc-fcaf-437a-985d-db8479f4a7ea.png\">\r\n\r\nBrowser: *Safari* (Mobile)",[3226],{"name":3166,"color":3167},646,"Bug(Notifications): Hashtags overlapping description","2023-01-02T17:42:06Z","https://github.com/elk-zone/elk/issues/646",0.7311989,{"description":3233,"labels":3234,"number":3237,"owner":3155,"repository":3156,"state":3200,"title":3238,"updated_at":3239,"url":3240,"score":3241},"I use Elk on iOS and I find I’m often highlighting the icon buttons in the nav bar when I go to press them, and then they become unusable while highlighted. I’ve hesitated to make an issue, because I know that setting `user-select: none` isn’t always the best for accessibility, but this happens to me so frequently, that I thought I’d raise the issue. Perhaps using `@media (pointer: coarse)` and targeting for mobile would be the best coarse of action, if `user-select: none` was applied?",[3235,3236],{"name":3166,"color":3167},{"name":3152,"color":3153},1661,"Main nav icon buttons are too easy to select as text on mobile","2023-02-28T22:01:33Z","https://github.com/elk-zone/elk/issues/1661",0.73153853,{"description":3243,"labels":3244,"number":3246,"owner":3155,"repository":3156,"state":3200,"title":3247,"updated_at":3248,"url":3249,"score":3250},"In my opinion, the logo is too wide. It looks weird next to other icons, especially as a PWA on Windows in the taskbar. The padding between the border of the SVG viewbox and the actual Elk icon. I have made a quick site that shows an idea of what I think it would be like:\r\nhttps://eddiestech.github.io/elklogocompare (left is original, right is my mock-up)\r\n\r\nHappy to get feedback and also look into guidance around spacing like this.",[3245],{"name":3152,"color":3153},1890,"Improve logo spacing/decrease width of elk","2023-03-21T11:59:26Z","https://github.com/elk-zone/elk/issues/1890",0.7333062,["Reactive",3252],{},["Set"],["ShallowReactive",3255],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdNhl-U9Mrp24eIdg2-bzLWJXzaGRLTcSL37j27xdDqk":-1},"/elk-zone/elk/1795"]