Implement automatic dark mode, reduce user interface styling

Repository details (talkie)
Project page
talkie
Project log category
(708 entries)
Repository
@joelpurra/talkie
Owner
@joelpurra
Contributors
Contributors on Github
Project status
⏲️ This project has had recent commits.
📂 This project is open.
🌠 This project is popular.
Repository activity period
🗓—
Commits
751 commits
Stars
72 stars
Commit details (e763426d)
Author
Authored at
Committer
Joel Purra
Committed at

Commit message

Implement automatic dark mode, reduce user interface styling

  • Instead of an always bright white background in Talkie's popup and options page, a dark mode has been implemented.
  • Dark mode is automatically selected, based on the user's browser and system preferences.
  • Dark mode is implemented as a simple variation of the light mode; both use browser-mandated default colors (such as background, text, links, visited links). Variations of translucent gray is for minor variations (backgrounds, borders, etcetera).
  • Use of colors, icons, and additional styling has been reduced to simplify the dark mode implementation.
Raw text 
Implement automatic dark mode, reduce user interface styling

- Instead of an always bright white background in Talkie's popup and options page, a dark mode has been implemented.
- Dark mode is automatically selected, based on the user's browser and system preferences.
- Dark mode is implemented as a simple variation of the light mode; both use browser-mandated default colors (such as background, text, links, visited links). Variations of translucent gray is for minor variations (backgrounds, borders, etcetera).
- Use of colors, icons, and additional styling has been reduced to simplify the dark mode implementation.

Changed files (100)

Path Additions Deletions
code/packages/options-application/src/app/footer.tsx +17 -22
code/packages/options-application/src/app/header.tsx +19 -12
code/packages/options-application/src/app/main.tsx +17 -31
code/packages/options-application/src/app/sections/about.tsx +217 -207
code/packages/options-application/src/app/sections/features.tsx +118 -112
code/packages/options-application/src/app/sections/features/talkie-premium-edition.tsx +1 -1
code/packages/options-application/src/app/sections/settings.tsx +50 -35
code/packages/options-application/src/app/sections/settings/continue-on-tab-removed.tsx +1 -1
code/packages/options-application/src/app/sections/settings/continue-speech.tsx +6 -3
code/packages/options-application/src/app/sections/settings/show-additional-details.tsx +1 -1
code/packages/options-application/src/app/sections/settings/speak-long-texts.tsx +1 -1
code/packages/options-application/src/app/sections/settings/speaking-history-limit.tsx +12 -9
code/packages/options-application/src/app/sections/status.tsx +143 -136
code/packages/options-application/src/app/sections/support.tsx +227 -208
code/packages/options-application/src/app/sections/support/install-voices-faq.tsx +37 -29
code/packages/options-application/src/app/sections/support/install-voices.tsx +4 -4
code/packages/options-application/src/app/sections/support/support-entry.tsx +3 -3
code/packages/options-application/src/app/sections/usage.tsx +175 -174
code/packages/options-application/src/app/sections/voices.tsx +4 -0
code/packages/options-application/src/app/sections/voices/dialect-voice-options.tsx +1 -1
code/packages/options-application/src/app/sections/voices/dialect-voice.tsx +4 -5
code/packages/options-application/src/app/sections/voices/dialect.tsx +2 -3
code/packages/options-application/src/app/sections/voices/intro.tsx +2 -3
code/packages/options-application/src/app/sections/voices/language-group.tsx +15 -14
code/packages/options-application/src/app/sections/voices/voice-options/pitch.tsx +1 -1
code/packages/options-application/src/app/sections/voices/voice-options/range-with-heading.tsx +5 -4
code/packages/options-application/src/app/sections/voices/voice-options/rate.tsx +1 -1
code/packages/options-application/src/app/sections/welcome.tsx +43 -37
code/packages/options-application/src/components/collected-error-list.tsx +6 -6
code/packages/options-application/src/components/discretional-details.tsx +1 -1
code/packages/options-application/src/components/form/checkbox-with-label.tsx +6 -6
code/packages/options-application/src/components/form/checkbox.tsx +5 -5
code/packages/options-application/src/components/form/input-with-label.tsx +6 -6
code/packages/options-application/src/components/form/input.tsx +5 -5
code/packages/options-application/src/components/form/multiline-select.tsx +5 -5
code/packages/options-application/src/components/hero-section/hero-section.tsx +1 -1
code/packages/options-application/src/components/loading.tsx +5 -3
code/packages/options-application/src/components/navigation/nav-container.tsx +1 -1
code/packages/options-application/src/components/navigation/nav.tsx +11 -13
code/packages/options-application/src/components/range/logarithmic-scale-range.tsx +1 -1
code/packages/options-application/src/components/range/scale-range-datalist-option.tsx +1 -1
code/packages/options-application/src/components/range/scale-range-datalist.tsx +2 -2
code/packages/options-application/src/components/range/scale-range.tsx +1 -1
code/packages/options-application/src/components/section/edition-section.tsx +35 -19
code/packages/options-application/src/components/section/free-section.tsx +1 -1
code/packages/options-application/src/components/section/information-section.tsx +6 -6
code/packages/options-application/src/components/section/premium-section.tsx +1 -1
code/packages/options-application/src/containers/about-container.tsx +1 -1
code/packages/options-application/src/containers/app.tsx +1 -1
code/packages/options-application/src/containers/features-container.tsx +1 -1
code/packages/options-application/src/containers/install-voices-container.tsx +1 -1
code/packages/options-application/src/containers/status-container.tsx +1 -1
code/packages/options-application/src/containers/voices/voices-container.tsx +1 -1
code/packages/options-application/src/containers/welcome-container.tsx +1 -1
code/packages/popup-application/src/app/main.tsx +8 -12
code/packages/popup-application/src/app/sections/footer.tsx +13 -13
code/packages/popup-application/src/app/sections/header.tsx +9 -10
code/packages/popup-application/src/app/sections/menu.tsx +24 -85
code/packages/popup-application/src/app/sections/status.tsx +13 -15
code/packages/popup-application/src/containers/app.tsx +1 -1
code/packages/shared-resources/src/resources/icon/menu/about.min.svg +0 -1
code/packages/shared-resources/src/resources/icon/menu/about.svg +0 -16
code/packages/shared-resources/src/resources/icon/menu/features.min.svg +0 -1
code/packages/shared-resources/src/resources/icon/menu/features.svg +0 -12
code/packages/shared-resources/src/resources/icon/menu/shortcuts.min.svg +0 -1
code/packages/shared-resources/src/resources/icon/menu/shortcuts.svg +0 -12
code/packages/shared-resources/src/resources/icon/menu/support.min.svg +0 -1
code/packages/shared-resources/src/resources/icon/menu/support.svg +0 -12
code/packages/shared-resources/src/resources/style/options.css +4 -1
code/packages/shared-resources/src/resources/style/popup.css +1 -16
code/packages/shared-resources/src/resources/style/shared.css +21 -8
code/packages/shared-ui/src/components/discretional.tsx +1 -1
code/packages/shared-ui/src/components/editions/extension-short-name.tsx +2 -7
code/packages/shared-ui/src/components/icon/icon.tsx +5 -5
code/packages/shared-ui/src/components/icon/talkie-free-icon.tsx +1 -1
code/packages/shared-ui/src/components/icon/talkie-premium-icon.tsx +1 -1
code/packages/shared-ui/src/components/progress.tsx +4 -4
code/packages/shared-ui/src/containers/history-listener-container.tsx +1 -1
code/packages/shared-ui/src/containers/is-speaking-listener-container.tsx +1 -1
code/packages/shared-ui/src/containers/progress-container.tsx +1 -1
code/packages/shared-ui/src/containers/providers.tsx +1 -1
code/packages/shared-ui/src/containers/root.tsx +1 -1
code/packages/shared-ui/src/styled/button/button-base.tsx +6 -7
code/packages/shared-ui/src/styled/form/form-base.tsx +10 -11
code/packages/shared-ui/src/styled/layout/error-base.tsx +3 -4
code/packages/shared-ui/src/styled/layout/layout-base.tsx +15 -16
code/packages/shared-ui/src/styled/list/list-base.tsx +11 -12
code/packages/shared-ui/src/styled/table/table-base.tsx +11 -12
code/packages/shared-ui/src/styled/talkie-styled.mts +40 -0
code/packages/shared-ui/src/styled/text/errors.tsx +6 -6
code/packages/shared-ui/src/styled/text/lighter.tsx +0 -30
code/packages/shared-ui/src/styled/text/text-base.tsx +15 -20
code/packages/shared-ui/src/styled/types.tsx +4 -3
code/packages/shared-ui/src/styles/button/button-base.mts +20 -29
code/packages/shared-ui/src/styles/color/color-base.mts +6 -29
code/packages/shared-ui/src/styles/layout/error-base.mts +2 -2
code/packages/shared-ui/src/styles/layout/layout-base.mts +22 -11
code/packages/shared-ui/src/styles/shared-base.mts +26 -20
code/packages/shared-ui/src/styles/text/lighter.mts +0 -42
code/packages/shared-ui/src/styles/text/text-base.mts +1 -27

Commit categories (3)