Skip to content

Support dark mode. - #49

Open
drgrice1 wants to merge 1 commit into
openwebwork:mainfrom
drgrice1:dark-mode-experimentation
Open

Support dark mode.#49
drgrice1 wants to merge 1 commit into
openwebwork:mainfrom
drgrice1:dark-mode-experimentation

Conversation

@drgrice1

Copy link
Copy Markdown
Member

There isn't much needed to support dark mode.

The cursor needs to use the currentcolor instead of a forced black. That just works in both color modes.

Empty blocks need a slightly darker background color to contrast better with white text. This uses the light-dark css function which is an approach that is generally agnostic to the approach the MathQuill library user uses for dark mode as long as that involves setting the color-scheme for the page or elements. That function is polyfilled via postcss and @csstools/postcss-light-dark-function for older browsers.

Also add the autoprefixer. This is somewhat unrelated, but should be added in any case so that any browser specific prefixes that may be needed are automatically added.

The input-test.html has a dark mode added. It only works via the browser setting. There is no color scheme chooser. Developers can use the developer tools to easily change modes. This is a development test page after all.

There isn't much needed to support dark mode.

The cursor needs to use the `currentcolor` instead of a forced black.
That just works in both color modes.

Empty blocks need a slightly darker background color to contrast better
with white text. This uses the `light-dark` css function which is an
approach that is generally agnostic to the approach the MathQuill
library user uses for dark mode as long as that involves setting the
`color-scheme` for the page or elements.  That function is polyfilled
via `postcss` and `@csstools/postcss-light-dark-function` for older
browsers.

Also add the `autoprefixer`.  This is somewhat unrelated, but should be
added in any case so that any browser specific prefixes that may be
needed are automatically added.

The `input-test.html` has a dark mode added.  It only works via the
browser setting.  There is no color scheme chooser. Developers can use
the developer tools to easily change modes. This is a development test
page after all.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant