Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual Accessibility option for Svelte API docs #105

Open
subz390 opened this issue Sep 12, 2019 · 5 comments
Open

Visual Accessibility option for Svelte API docs #105

subz390 opened this issue Sep 12, 2019 · 5 comments

Comments

@subz390
Copy link

subz390 commented Sep 12, 2019

Is your feature request related to a problem? Please describe.
Yes, it's related to Web Content Accessibility, the visual theme of your website documentation.

Describe the solution you'd like
Do you plan or would consider including Visual Accessibility options in the future?
I have ideas for an Accessibility component for Svelte in addition to general discussions about themes sveltejs/svelte#1550

Describe alternatives you've considered
I've started work on a dark mode theme that I am happy to share with you.
190912-0732 accessibility

How important is this feature to you?
I cannot reasonably accesses your website for a prolonged period of time without visual adaptation, this means I have limited access to the resources contained therein, an adjustment to the theme restores access.

Additional context
It's recognised in today's day and age that content and service providers take reasonable steps to provide equal access. But it's more than that, the Svelte website is the Ambassador of Svelte and a well thought out visual accessibility solution is just another super way to say good things about the ecosystem. Here is the Web Content Accessibility Guidelines (WCAG) 2.1.

@antony
Copy link
Member

antony commented Jul 4, 2020

Hey @subz390 - can you share this theme with us?

@subz390
Copy link
Author

subz390 commented Jul 6, 2020

Hi @antony I've posted what I've worked on so far at https://github.com/subz390/svelte-darkmode-css

  • Search fix issue in the css I posted for the two issues that I've fixed. For example in the images below illustrating the anchor is in the wrong place in the h3 > a and h4 > a elements.
    200706-085601 wrong place 200706-085501 correct place

  • I developed the style in a userscript environment as it's easy to inject and edit the css with inheritence. I've included the userscript in the repo which also adds a dark light toggle at the top of the page.

  • May I ask how you've deployed Prism, for tokenizing the code blocks? I've been using Google Prettify but it's no longer maintained and I was never really happy with it's performance. However working on the darktheme, going through the Prism Okaidia sheet, the tokenization seems pretty good. So I was thinking about giving it a try.

@dummdidumm
Copy link
Member

Related to #97

@benmccann benmccann transferred this issue from sveltejs/svelte Dec 15, 2021
@NewUserHa
Copy link

the color(the background, font color) is too green in your demo, which make ppl very uncomfortable.
we should learn vscode dark or youtube dark, or windows dark, all of them has good color on all different monitors.

@subz390
Copy link
Author

subz390 commented Jan 11, 2022

the color(the background, font color) is too green in your demo, which make ppl very uncomfortable. we should learn vscode dark or youtube dark, or windows dark, all of them has good color on all different monitors.

Great suggestion. You may freely fork my repo, edit the colors that make you feel uncomfortable, then use the CSS in Stylish or as a userscript, so many choices, and don't forget to link your project back here so other people can benefit from your input.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants