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

Fix theme flickering on page load #420

Merged
merged 4 commits into from
Dec 7, 2023
Merged

Fix theme flickering on page load #420

merged 4 commits into from
Dec 7, 2023

Conversation

penge
Copy link
Owner

@penge penge commented Dec 4, 2023

Fixes theme flickering for themes with other than white background (applies to any larger elements with other than white background).

The problem could be seen on page load, and most noticable on repeated page refresh. It was caused by loading the theme after the page was loaded, and as a result of that, the transition from page's blank background (usually white) to theme's background, was seen as flickering.

The solution was to load the theme as soon as possible and before the page parsing has completed. As theme does not change often, the loading could be even more optimized by using the localStorage.


Other changes:

  • setting html[data-page] (can be "notes" or "options") to allow page specific customization
  • moving RAW button to the end before i (info) button, B button is the first
  • using the same hover style for all the bottom buttons (sidebar buttons, toolbar buttons)
  • linting also files outside src (like build.ts and other)

- update tsconfig.json
@penge penge added the enhancement New feature or request label Dec 4, 2023
@penge penge added this to the 3.27 milestone Dec 4, 2023
@penge penge force-pushed the themes branch 4 times, most recently from 0f46641 to 588e273 Compare December 6, 2023 18:09
penge added 2 commits December 6, 2023 21:44
- use same :hover for buttons in sidebar and toolbar
- merge #toolbar and .bar styles into .bar (related to previous point)
- make sure .button content (icon, text) is aligned vertically
- fix width of "Auto" button by making sure it has .auto
- move #RAW and #RAW-ACTIVE button to the right before #INFO button,
  making #B button the first one from left
- update #RAW and #RAW-ACTIVE
- use default pointer for #INFO (it doesn't have action)
- fix .font-area rendering (missing "key")
- update dark.css
- add fallbacks for --slider-*
@penge penge force-pushed the themes branch 5 times, most recently from 2d9d079 to 9f958bd Compare December 7, 2023 22:43
- improve how theme is loaded, use localStorage if possible
- apply Custom theme to Options page as well
- set html[data-page] to allow page-specific customization
- use template.html to create notes.html and options.html
- update README
@penge penge merged commit b13dd86 into master Dec 7, 2023
1 check passed
@penge penge deleted the themes branch December 7, 2023 22:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant