Feature: dark mode #3264
Feature: dark mode #3264
Conversation
|
CLA Assistant Lite All Contributors have signed the CLA. |
katspaugh
force-pushed
the
feat-dark-mode
branch
from
bdbca36
to
cc97348
Compare
ESLint Summary View Full Report
Report generated by eslint-plus-action |
katspaugh
force-pushed
the
feat-dark-mode
branch
from
cc97348
to
8acf01e
Compare
| html[class="darkMode"] div[style*="background-image"], | ||
| html[class="darkMode"] img:not([id="safe-logo"]) { | ||
| filter: invert(1) hue-rotate(180deg); |
There was a problem hiding this comment.
I don't necessarily agree with this because it is not interfacing with the theme. It is more 'high contrast mode'.
@liliiaorlenko wanted to put together a dark palette and then we actually use the dark theme in MUI.
There was a problem hiding this comment.
so should I already provide the palette?
There was a problem hiding this comment.
Creating a dark theme that uses MUI will need to be done incrementally. We will need the palette though to do so.
I don't know what the final decision should be on this ticket as it merely inverts colours. It won't need the palette here though.
There was a problem hiding this comment.
@liliiaorlenko no, no rush, it was just a quick experiment.
@iamacook it's good enough for me personally, easier on the eyes, but I agree it's not a good long-term solution.
There was a problem hiding this comment.
@iamacook renamed to hi-contrast:
Deployment links
|
| import useCachedState from 'src/utils/storage/useCachedState' | ||
|
|
||
| const useDarkMode = (): [boolean, (mode: boolean) => void] => { | ||
| const [darkMode = false, setDarkMode] = useCachedState<boolean>('darkMode') |
There was a problem hiding this comment.
It should probably default to user preference to.
There was a problem hiding this comment.
Even if this is just an experimental feature?
There was a problem hiding this comment.
True, I didn't consider that. Perhaps not then.
|
E2E Tests Failed Failed tests:
|
katspaugh
force-pushed
the
feat-dark-mode
branch
from
a646499
to
2459600
Compare
A poor man's dark mode using a CSS filter.