Skip to content

Validate all images for usefulness and dark mode compatibility #11883

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.

Sign up for GitHub

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

Jump to bottom
Closed
parlough opened this issue Apr 8, 2025 · 1 comment
Closed

Validate all images for usefulness and dark mode compatibility #11883

parlough opened this issue Apr 8, 2025 · 1 comment
Assignees
@parlough
Labels
e3-weeks Effort: < 4 weeks infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p1-high Major but not urgent concern: Resolve in months. Update each month.

Comments

@parlough
Copy link
Member

parlough commented Apr 8, 2025 •
edited
Loading

We should go through most images on the site and determine if they are:

  1. Used
  2. Necessary
  3. Accessible in light mode
  4. Accessible in dark mode or have an alternate for dark mode

If they aren't used or necessary, they (and their usages) should be removed and adjusted as necessary.

If they aren't accessible in dark mode, either the image should be updated to be accessible in both light and dark mode or an alternate image for dark mode should be added.

src/content/assets/images
  • flutter-chevron-bg.svg
  • flutter-logo-sharing.png
src/content/assets/images/404
  • dash_404.png
src/content/assets/images/branding
src/content/assets/images/branding/dart
  • 64.png
  • logo.svg
src/content/assets/images/branding/flutter
src/content/assets/images/branding/flutter/icon
  • 1080.png
  • 64.png
  • mono.svg
src/content/assets/images/branding/flutter/logo
  • 1080.svg
  • default.svg
  • flutter-lockup-small.png
  • flutter-lockup.png
  • flutter-logomark-1080px.png
  • flutter-logomark-320px.png
  • flutter-mono-81x100.png
  • square.svg
src/content/assets/images/branding/flutter/logo+text
src/content/assets/images/branding/flutter/logo+text/horizontal
  • default.png
  • default.svg
  • white.png
  • white.svg
src/content/assets/images/branding/flutter/logo+text/vertical
  • default.png
  • default.svg
  • white.png
  • white.svg
src/content/assets/images/dash
  • BigDashAndLittleDash.png
  • DartHummingbird.jpg
  • Dash.png
  • DashClawMachine.png
  • Dashatars.png
  • MegaDashChilling.png
  • NilayDashPuppet.png
  • ShamsDashJacket.png
  • dash-1.0.jpg
  • dash-conference-swag.jpg
  • dash-fainting.gif
  • dash-fainting.webp
  • dash-prototypes.jpg
  • dash-prototypes2.jpg
  • early-dash-sketches.png
  • early-dash-sketches2.jpg
  • early-dash-sketches3.jpg
  • early-dash-sketches4.jpg
  • early-dash-sketches5.jpg
src/content/assets/images/docs
  • PlatformChannels.png
    Want: White background is too jarring.
  • add-ads.png
  • add-in-app-purchases.png
  • add-payments.png
  • app-anatomy.svg
    Want: Needs to be updated due to white background and text.
  • build-variant-menu.png
  • catalog-widget-placeholder.png
  • crash_reports.png
  • declarativeUIchanges.png
    Want: Needs to be updated due to white background and low contrast.
  • favicon.png
  • flutter-chevron-bg.svg
  • flutter-logo-sharing.png
  • flutter-mono-81x100.png
  • gemini.png
  • gradle-script-menu.png
  • ic_new_releases_black_24px.svg
  • logs.png
  • owl.jpg
  • using_shortcuts.png
    Need: Needs to be updated due to transparent background and intelligible text.
  • verbose_flag.png
src/content/assets/images/docs/a18n
  • app-large-fonts.png
    Consider: Very bright and uses outdated counter style.
  • app-regular-fonts.png
    Consider: Very bright and uses outdated counter style.
src/content/assets/images/docs/ai-toolkit

Consider: These are all too bright for dark mode. Consider following up with a dark mode version of each or applying a filter to each in dark mode.

  • accessing-edit-menu.png
  • add-recipe-button.png
  • ai-toolkit-app.png
  • apply-changes-decision.png
  • chatbot-prompt.png
  • copy-to-clipboard.png
  • cupertino-chat-app.png
  • demo-app.png
  • desktop-enter-text.png
  • desktop-pluto-convo.png
  • download-from-gallery.png
  • enter-textfield.png
  • enter-voice-into-textfield.png
  • example-of-suggested-prompts.png
  • example-of-welcome-message.png
  • how-to-edit-prompt.png
  • how-to-exit-editing-mode.png
  • image-thumbnails.png
  • image-zoom.png
  • long-tap-choose-copy.png
  • mobile-enter-text.png
  • mobile-pluto-convo.png
  • multi-media-icons.png
  • multi-media-testing-testing.png
  • selfie.png
  • setting-food-preferences.png
src/content/assets/images/docs/android
  • build-variant-menu.png
  • gradle-script-menu.png
src/content/assets/images/docs/androidx
  • do_androidx_refactor.png
  • migrate_prompt.png
src/content/assets/images/docs/app-architecture

Consider: The architecture images here are great but could benefit from a dark mode version.

  • hero-image.png
src/content/assets/images/docs/app-architecture/case-study
  • booking_screen.png
  • date_select_screen.png
  • dismissible.webp
  • home_screen.png
  • mvvm-case-study-services-architecture.png
  • mvvm-case-study-ui-layer-highlighted.png
  • mvvm-case-study-ui-state-highlighted.png
  • mvvm-case-study-update-ui-steps.png
  • search_form_screen.png
  • splash_screen.png
src/content/assets/images/docs/app-architecture/common-architecture-concepts
  • horizontal-layers-with-UDF.png
  • horizontal-layers-with-icons.png
  • ui-f-state.png
src/content/assets/images/docs/app-architecture/design-patterns
  • command-icon.svg
  • kv-store-icon.svg
  • offline-first-icon.svg
  • optimistic-state-icon.svg
  • result-icon.svg
  • sql-icon.svg
src/content/assets/images/docs/app-architecture/guide
  • feature-architecture-example.png
  • feature-architecture-simplified-Data-highlighted.png
  • feature-architecture-simplified-Repository-highlighted.png
  • feature-architecture-simplified-Service-highlighted.png
  • feature-architecture-simplified-UI-highlighted.png
  • feature-architecture-simplified-View-highlighted.png
  • feature-architecture-simplified-ViewModel-highlighted.png
  • feature-architecture-simplified-with-logic-layer.png
  • feature-architecture-simplified.png
  • mvvm-intro-with-domain-layer.png
  • mvvm-intro-with-layers.png
src/content/assets/images/docs/arch-overview
  • archdiagram.png
  • color-picker.png
    Consider: Very bright and perhaps outdated for some.
  • constraints-sizes.png
    Want: Transparent background makes lines hard to see.
  • inherited-widget.png
    Want: Transparent background makes text intelligible.
  • platform-channels.png
    Want: Transparent background makes lines hard to see.
  • render-pipeline.png
    Need: Transparent background makes text intelligible.
  • trees.png
    Need: Transparent background makes text intelligible.
  • web-framework-diagram.drawio.png
  • widget-element.png
    Need: Transparent background makes text intelligible.
  • widgets.png
    Need: Transparent background makes text intelligible.
src/content/assets/images/docs/assets-and-images
  • android-icon-path.png
  • icon.png
  • ios-icon-path.png
  • ios-launchscreen-xcode.png
    Consider: Very bright and potentially outdated.
  • launch-screen.png
    Consider: Quite bright.
src/content/assets/images/docs/brand-svg
  • chromeos.svg
  • linux.svg
  • macos-bug.svg
  • macos.svg
  • windows-bug.svg
  • windows.svg
src/content/assets/images/docs/cd
  • android.png
  • ios.png
src/content/assets/images/docs/codelab
src/content/assets/images/docs/codelab/layout
  • businesscarddisplay1.png
  • businesscarddisplay2.png
  • businesscarddisplay3.png
  • businesscarddisplay4.png
src/content/assets/images/docs/cookbook
  • ads-ad-unit-id.png
    Consider: Adding a dark mode alternative.
  • ads-ad-unit.png
    Consider: Adding a dark mode alternative.
  • ads-app-id.png
    Consider: Adding a dark mode alternative.
  • ads-device.jpg
    Consider: Adding a dark mode alternative.
  • ads-multidex.png
  • animated-container.webp
    Consider: Updating and adding a dark mode alternative.
  • animation-physics-card-drag.webp
    Consider: Updating and adding a dark mode alternative.
  • app-store-add-app-button.png
    Consider: Adding a dark mode alternative.
  • basic-list.png
    Consider: Updating and adding a dark mode alternative.
  • dismissible.webp
    Consider: Updating and adding a dark mode alternative.
  • drawer.png
    Consider: Updating and adding a dark mode alternative.
  • fade-in-out.webp
    Consider: Updating and adding a dark mode alternative.
  • fading-in-asset-demo.webp
    Consider: Updating and adding a dark mode alternative.
  • fading-in-images.webp
    Consider: Updating and adding a dark mode alternative.
  • floating-app-bar.webp
    Consider: Updating and adding a dark mode alternative.
  • focus.webp
    Consider: Updating and adding a dark mode alternative.
  • fonts.png
    Consider: Updating and adding a dark mode alternative.
  • form-validation.webp
    Consider: Updating and adding a dark mode alternative.
  • google-play-create-app.png
    Consider: Adding a dark mode alternative.
  • grid-list.webp
    Consider: Updating and adding a dark mode alternative.
  • handling-taps.webp
    Consider: Updating and adding a dark mode alternative.
  • hero.webp
    Consider: Updating and adding a dark mode alternative.
  • horizontal-list.webp
    Consider: Updating and adding a dark mode alternative.
  • isolate.webp
    Consider: Updating and adding a dark mode alternative.
  • long-lists.webp
    Consider: Updating and adding a dark mode alternative.
  • mixed-list.png
    Consider: Updating and adding a dark mode alternative.
  • multiplayer-areas.jpg
    Consider: Changing image background color.
  • multiplayer-card-game.jpg
    Consider: Changing image background color.
  • multiplayer-firebase-data.png
    Consider: Adding a dark mode alternative.
  • multiplayer-firebase-match.png
    Consider: Adding a dark mode alternative.
  • multiplayer-two-mobiles.jpg
    Consider: Changing image background color.
  • navigate-with-arguments.webp
    Consider: Updating and adding a dark mode alternative.
  • navigation-basics-cupertino.webp
    Consider: Updating and adding a dark mode alternative.
  • navigation-basics.webp
    Consider: Updating and adding a dark mode alternative.
  • network-image.png
    Consider: Updating and adding a dark mode alternative.
  • orientation.webp
    Consider: Updating and adding a dark mode alternative.
  • package-fonts.png
    Consider: Updating and adding a dark mode alternative.
  • page-route-animation.webp
    Consider: Updating and adding a dark mode alternative.
  • passing-data.webp
    Consider: Updating and adding a dark mode alternative.
  • play-console-play-games-services.png
    Consider: Adding a dark mode alternative.
  • retrieve-input.webp
    Consider: Updating and adding a dark mode alternative.
  • returning-data.webp
    Consider: Updating and adding a dark mode alternative.
  • ripples.webp
    Consider: Updating and adding a dark mode alternative.
  • set-up-app-links-emulator-deeplinked.png
    Consider: Adding a dark mode alternative.
  • set-up-app-links-emulator-installed.png
    Consider: Adding a dark mode alternative.
  • set-up-app-links-pdc-signing-key.png
    Consider: Adding a dark mode alternative.
  • set-up-universal-links-add-associated-domains.png
  • set-up-universal-links-associated-domains.png
  • set-up-universal-links-simulator-deeplinked.png
    Consider: Adding a dark mode alternative.
  • set-up-universal-links-simulator.png
    Consider: Changing image background color.
  • snackbar.webp
    Consider: Updating and adding a dark mode alternative.
  • spaced-items-1.png
    Consider: Updating and adding a dark mode alternative.
  • spaced-items-2.png
    Consider: Updating and adding a dark mode alternative.
  • tabs.webp
    Consider: Updating and adding a dark mode alternative.
  • themes.png
  • types-of-gamer-motivations.png
    Consider: Changing image background color.
  • web-sockets.webp
    Consider: Updating and adding a dark mode alternative.
src/content/assets/images/docs/cookbook/architecture
  • optimistic-state.png
  • optimistic-state.webp
  • todo_app_dark.png
  • todo_app_light.png
src/content/assets/images/docs/cookbook/effects
  • DownloadButton.webp
    Consider: A dark mode alternative.
  • DragAUIElement.webp
    Consider: A dark mode alternative.
  • ExpandingFAB.webp
    Consider: A dark mode alternative.
  • GradientBubbles.webp
  • LoadingShimmer.webp
    Consider: A dark mode alternative.
  • NestedNavigator.webp
  • ParallaxScrolling.webp
  • StaggeredMenuAnimation.webp
    Consider: A dark mode alternative.
  • TimingDiagram.png
  • TypingIndicator.webp
  • UILoadingAnimation.webp
    Consider: A dark mode alternative.
src/content/assets/images/docs/cover

Consider: Shouldn't change book covers, but consider adding a background with padding behind each one, especially in dark mode.

  • beginning-app-development-with-flutter.jpg
  • beginning-flutter.png
  • flutter-ENI.jpg
  • flutter-apprentice-2nd.png
  • flutter-apps-development.jpg
  • flutter-architectures-ebook.jpeg
  • flutter-beginners-2nd.png
  • flutter-complete-reference-2.png
  • flutter-design-patterns-and-best-practices.jpg
  • flutter-engineering.jpg
  • flutter-in-action.jpg
  • flutter-succinctly.png
  • flutter_libraries_we_love.png
  • google-flutter-mobile-development-quick-start-guide.jpg
  • learn-google-flutter-fast.jpg
  • managing-state-in-flutter.jpg
  • practical-flutter.jpg
  • pragmatic-flutter.jpg
  • programming-flutter.jpg
  • the-flutter-foundation-a-comprehensive-guide-for-technical-interviews-and-beyond.png
src/content/assets/images/docs/deployment
src/content/assets/images/docs/deployment/android
  • build-variant-menu.png
  • cli-multidex-added-build.png
    Want: Should not be an image.
  • cli-select-device.png
    Want: Should not be an image.
  • gradle-script-menu.png
  • ide-build-failure-multidex.png
    Want: Should not be an image.
src/content/assets/images/docs/development
  • device-connect.png
    Consider: Very bright.
  • ios14-network.png
src/content/assets/images/docs/development/add-to-app
  • android-overview.webp
  • ios-overview.webp
  • ipv6.png
  • multiple-flutters-sample.webp
    Want: Way too bright.
src/content/assets/images/docs/development/add-to-app/android
src/content/assets/images/docs/development/add-to-app/android/add-flutter-fragment
  • add-flutter-fragment_fullscreen.png
  • add-flutter-fragment_header.png
  • add-flutter-fragment_partial-ui.png
src/content/assets/images/docs/development/add-to-app/android/add-flutter-screen
  • add-single-flutter-screen-transparent_header.png
  • add-single-flutter-screen_header.png
src/content/assets/images/docs/development/add-to-app/android/add-flutter-view
  • add-view-sample.webp
    Consider: A bit too bright.
src/content/assets/images/docs/development/add-to-app/android/project-setup
  • build-aar-instructions.png
  • ide-build-aar.png
  • ide-new-module.png
  • ide-wizard.png
src/content/assets/images/docs/development/add-to-app/debugging
  • cli-attach.png
  • intellij-attach.png
  • vscode-attach.png
  • wireless-port.png
src/content/assets/images/docs/development/add-to-app/ios
src/content/assets/images/docs/development/add-to-app/ios/project-setup
  • choose-libraries.png
  • choose-to-embed.png
  • copy-bundle.png
  • debug-plist.png
  • embed-xcode.png
  • excluded-archs.png
  • framework-search-paths.png
  • info-plists.png
  • linked-libraries.png
  • network-permission.png
  • plist-build-setting.png
  • project-pbxproj.png
  • set-plist-build-setting.png
src/content/assets/images/docs/development/concurrency
  • basics-main-isolate.png
    Need: Text and lines aren't intelligible.
  • event-jank.png
    Need: Text and lines aren't intelligible.
  • isolate-bg-worker.png
    Need: Text and lines aren't intelligible.
src/content/assets/images/docs/development/data-and-backend
src/content/assets/images/docs/development/data-and-backend/state-mgmt
  • ephemeral-vs-app-state.png
    Want: Not so great on dark mode.
  • model-shopper-screencast.webp
    Consider: Way too bright.
  • simple-widget-tree-with-cart.png
    Want: Not so intelligble on dark mode.
  • simple-widget-tree.png
    Want: Not so intelligble on dark mode.
  • [] state-management-explainer.webp
    Consider: Way too bright.
  • ui-equals-function-of-state.png
    Want: Not so intelligble on dark mode.
src/content/assets/images/docs/development/ios-project-migration
  • framework-build-phase.png
  • linker-arguments.png
  • navigator.png
  • script-phase.png
src/content/assets/images/docs/development/packages-and-plugins
  • FlutterFavoriteLogo.png
    Want: There should be one for dark mode too.
src/content/assets/images/docs/development/packages-and-plugins/swift-package-manager

Consider: These are all very bright, consider recreating with macOS and Xcode in dark mode.

  • add-flutter-pre-action.png
  • add-generated-framework.png
  • add-runner-tests-link-binary-with-libraries.png
  • choose-package-products-test.png
  • choose-package-products.png
  • flutter-pre-action-build-log.png
  • minimum-deployments.png
  • package-dependencies.png
  • remove-flutter-pre-action.png
  • remove-generated-framework.png
  • remove-generated-package.png
  • runner-tests-link-binary-with-libraries.png
  • search-for-ocmock.png
src/content/assets/images/docs/development/platform-integration
src/content/assets/images/docs/development/platform-integration/app-extensions

Consider: These are all very bright, consider recreating with macOS and Xcode in dark mode.

  • embed-framework.png
  • share-extension-info.png
  • share-extension.png
  • xcode-app-groups.png
  • xcode-configurations.png
  • xcode-new-target.png
src/content/assets/images/docs/development/platform-integration/ios-app-clip

Consider: These are all very bright, consider recreating with macOS and Xcode in dark mode.

  • activate-scheme.png
  • add-app-clip.png
  • add-target-membership.png
  • add-target.png
  • app-clip-details.png
  • app-clip-entitlements.png
  • bridge-header.png
  • clean-files.png
  • configuration.png
  • embedded-app-clips.png
  • main-app-entitlements-setting.png
  • main-app-entitlements.png
  • new-build-phase.png
  • observatory-uri.png
    Want: This should not be an image and needs to be updated anyway.
  • run-select.png
  • scene-manifest.png
  • xcode-backend-build.png
  • xcode-backend-embed.png
src/content/assets/images/docs/development/tools
  • android-studio-run-controls.png
    Consider: Too bright.
  • flutter-fix-suggestion-intellij.png
    Consider: Too bright.
  • flutter-fix-suggestion-vscode.png
    Consider: Too bright.
src/content/assets/images/docs/development/ui
src/content/assets/images/docs/development/ui/splash-screen
src/content/assets/images/docs/development/ui/splash-screen/android-splash-screen
  • splash-screens_header.png
src/content/assets/images/docs/development/ui/typography

Consider: These are all much too bright.

  • feature-tag-example.png
  • google-fonts-type-tester.png
  • google-fonts-type-tester.webp
  • roboto-serif-font-axes.png
  • typographical-scale.png
  • variable-font-axes.png
src/content/assets/images/docs/flavors

Consider: Consider updating these images to use dark mode.

  • flavors-android-app-names-1.png
  • flavors-android-icons.png
  • flavors-ios-app-names.png
  • flavors-ios-icons.png
  • flavors-ios-scheme-configurations.png
  • flavors-ios-schemes.png
  • flavors-ios-test-scheme.png
src/content/assets/images/docs/fwe
  • dash-search.png
  • simple_composition_example.png
    Want: Background is too bright.
src/content/assets/images/docs/fwe/layout

Consider: All too bright and should consider alternative for dark mode.

  • alternating_list_items.png
  • axes_diagram.png
  • basic_listview.png
  • center.png
  • col_space_evenly.png
  • expanded_row.png
  • flex_2_row.png
  • layout_builder.png
  • left_alignment.png
  • listview_builder.png
  • nested_row_column.png
  • overflowing_row.png
  • padding.png
  • row.png
  • simple_row_column_widget_tree.png
  • space_evenly.png
src/content/assets/images/docs/fwe/user-input

Consider: All too bright and should consider adding a dark mode alternative for each.

  • DatePicker.webp
  • Dismissible.webp
  • ElevatedButton.webp
  • Radio.webp
  • RichText.png
  • RichText_whitebg.png
  • SelectableText.webp
  • SpecialListTiles.webp
  • Switch.webp
  • TextField.webp
  • TimePicker.webp
  • checkbox.webp
  • chip.png
  • dropdownmenu.webp
  • material-buttons.png
  • segmented-button.webp
  • slider.webp
src/content/assets/images/docs/get-started
  • codelab-goal-background.jpg
  • devtools-debugging.png
    Consider: Get rid of or replace with updated DevTools in dark mode screenshot.
  • devtools-launch-screen.png
    Consider: Get rid of or replace with updated DevTools in dark mode screenshot.
  • devtools-running.png
    Consider: Get rid of or replace with updated DevTools in dark mode screenshot.
  • hot-reload.svg
  • install_android_tools.png
  • intellij-devtools.png
  • sign-up.webp
src/content/assets/images/docs/get-started/android
  • android-sdk-tools.png
  • starter-app.png
src/content/assets/images/docs/get-started/android/react-native

Consider: Updating all of these with a dark mode alternative.

  • api-calls.webp
  • basic-layout.webp
  • canvas.png
  • card-swipe.webp
  • custom-cards.png
  • flatlist.webp
  • flutter-fade.webp
  • flutter-gestures.webp
  • flutterstyling.webp
  • hello-world-basic.png
  • hello-world.png
  • input-fields.webp
  • modular.png
  • navigation.webp
  • stack.png
  • state-change.webp
src/content/assets/images/docs/get-started/ios
  • flutter-widgets.png
  • starter-app.png
  • swiftui-modifiers.png
src/content/assets/images/docs/get-started/ios/react-native

Consider: Updating all of these with a dark mode alternative.

  • api-calls.webp
  • basic-layout.webp
  • canvas.png
  • card-swipe.webp
  • custom-cards.png
  • flatlist.webp
  • flutter-fade.webp
  • flutter-gestures.webp
  • flutterstyling.webp
  • hello-world-basic.png
  • hello-world.png
  • input-fields.webp
  • modular.png
  • navigation.webp
  • stack.png
  • state-change.webp
src/content/assets/images/docs/get-started/macos
  • starter-app-hot-reload.png
  • starter-app.png
src/content/assets/images/docs/homepage
  • dart-diagram-small.png
    Want: Version that works in both light and dark mode, or alternate.
  • reflectly-hero-600px.png
src/content/assets/images/docs/integration-test
  • migration-1.png
  • test-lab-1.png
    Consider: Retaking with dark mode version of Firebase console.
  • test-lab-2.png
    Consider: Retaking with dark mode version of Firebase console.
  • test-lab-3.png
    Consider: Retaking with dark mode version of Firebase console.
  • test-lab-4.png
    Consider: Retaking with dark mode version of Firebase console.
src/content/assets/images/docs/json
  • ide_warning.png
    Consider: Retaking or removing entirely.
src/content/assets/images/docs/perf
  • devtools-size.png
    Consider: Retaking with latest devtools UI.
  • size-summary.png
    Consider: Switching to a code block instead of image.
  • vital-size.png
    Consider: Retaking in dark mode.
src/content/assets/images/docs/perf/render
  • shader-jank.webp
  • tracing.png
src/content/assets/images/docs/platform-adaptations

Consider: Updating all of these with a dark mode version.

  • android-zoom-animation.png
  • cupertino-alert.png
  • hig-appbar.png
  • hig-checkbox.png
  • hig-progress.png
  • hig-radio.png
  • hig-refresh.png
  • hig-slider.png
  • hig-switch.png
  • hig-tabbar.png
  • hig-text-field.png
  • iconography-android.png
  • iconography-ios.png
  • m3-alert.png
  • m3-checkbox.png
  • m3-progress.png
  • m3-radio.png
  • m3-refresh.png
  • m3-slider.png
  • m3-switch.png
  • m3-text-field.png
  • mat-appbar.png
  • mat-navbar.png
  • navigation-android-back.webp
  • navigation-android-p.webp
  • navigation-android-q.webp
  • navigation-android.webp
  • navigation-ios-back.webp
  • navigation-ios-modal.webp
  • navigation-ios-nav-bar.webp
  • navigation-ios.webp
  • scroll-medium.webp
  • scroll-momentum-ios.webp
  • scroll-overscroll.webp
  • scroll-soft.webp
  • scroll-static-overscroll.webp
  • scroll-strong.webp
  • scroll-tap-to-top-ios.webp
  • text-double-tap-android.webp
  • text-double-tap-ios.webp
  • text-keyboard-move-android.webp
  • text-keyboard-move-ios.webp
  • text-long-press-android.webp
  • text-long-press-drag-android.webp
  • text-long-press-drag-ios.webp
  • text-long-press-ios.webp
  • text-single-tap-android.webp
  • text-single-tap-ios.webp
  • text-toolbar-android.png
  • text-toolbar-ios.png
  • typography-android.png
  • typography-ios.png
src/content/assets/images/docs/releaseguide
  • android-studio-flamingo-gradle-upgrade.png
  • android-studio-flamingo-upgrade-alert.png
  • macos_xcode_settings.png
    Consider: Using dark mode Xcode.
  • xcode_settings.png
    Consider: Using dark mode Xcode.
  • xcode_workflow_branch_changes.png
    Consider: Using dark mode Xcode.
src/content/assets/images/docs/resources
  • diagram-layercake.png
    This isn't used by our site but is included elsewhere, so shouldn't be deleted.
src/content/assets/images/docs/setup

Consider: Updating these to use dark mode Xcode.

  • trust-computer.png
  • xcode-account.png
  • xcode-unique-bundle-id.png
src/content/assets/images/docs/testing
src/content/assets/images/docs/testing/debugging
  • attach-flutter-process-field.png
  • ios.png
  • vscode-widget-details-tree.png
src/content/assets/images/docs/testing/debugging/native
  • dart-debugger.png
src/content/assets/images/docs/testing/debugging/native/android-studio
  • attach-process-button.png
  • attach-process-dialog.png
  • debug-open-java-code.png
  • debug-run.png
  • debugger-active.png
src/content/assets/images/docs/testing/debugging/native/android-studio/production-assistant
  • find-pane.png
  • search-results.png
  • teaches.png
src/content/assets/images/docs/testing/debugging/native/macos
  • basic-app.png
src/content/assets/images/docs/testing/debugging/native/url-launcher-app
  • android.png
  • ios.png
  • windows.png
src/content/assets/images/docs/testing/debugging/native/visual-studio
  • attach-to-process-dialog.png
  • choose-solution.png
  • debugger-active.png
src/content/assets/images/docs/testing/debugging/native/xcode
  • dart-vm-uri.png
  • run-app.png
  • select-device.png
src/content/assets/images/docs/testing/debugging/vscode-ui
src/content/assets/images/docs/testing/debugging/vscode-ui/icons
  • debug.png
  • hot-reload.png
  • hot-restart.png
  • inspector.png
  • pause.png
  • play-or-resume.png
  • step-into.png
  • step-out.png
  • step-over.png
  • stop.png
src/content/assets/images/docs/testing/debugging/vscode-ui/screens
  • attach-flutter-process-menu.png
  • debug-toolbar.png
  • debugger-parts.png
  • vscode-add-attach-success.png
  • vscode-add-attach-uri-filled.png
  • vscode-add-attach-uri.png
  • vscode-debugger-paused.png
  • vscode-debugger.png
  • vscode-layout-explorer.png
src/content/assets/images/docs/tools
src/content/assets/images/docs/tools/android-studio
  • assists.webp
  • dart-analysis.png
  • hot-reload.gif
  • hot-reload.webp
  • inspector_select_example.webp
  • keymap-settings-flutter-plugin.png
    Consider: Retake in dark mode.
  • log.png
  • main-toolbar.png
  • switch_inspector_tree.webp
  • templates.webp
  • trailing-comma-with.png
  • trailing-comma-without.png
  • widget-rebuild-info.png
src/content/assets/images/docs/tools/devtools
  • android_studio_open_devtools.png
  • app_size_access_landing_page.png
  • app_size_analysis.png
  • app_size_call_graph.png
  • app_size_diff.png
  • app_size_dominator_tree.png
  • app_size_load_analysis.png
  • app_size_load_diff.png
  • app_size_tab.png
  • bottom-up-view.png
  • browse-heap-snapshot.png
  • call-tree.png
  • chrome-devtools-performance-panel.png
  • connect_dialog.png
  • console-evaluate-expressions.png
  • console-evaluate-variables.png
  • console-inspect-widget.png
  • console-references.png
  • console-stdout.png
  • cpu-flame-chart.png
  • cpu-sampling-rate-menu.png
  • dart-devtools.webp
  • debug-console.png
  • debug-mode-banner-icon.png
  • debug-paint-mode-icon.png
  • debug-toggle-guideline-render-box.png
  • debug-toggle-guidelines-alignment.png
  • debug-toggle-guidelines-baseline.png
  • debug-toggle-guidelines-clip.png
  • debug-toggle-guidelines-oversized.png
  • debug-toggle-guidelines-padding.png
  • debug-toggle-guidelines-repaint-1.webp
  • debug-toggle-guidelines-repaint-2.webp
  • debug-toggle-guidelines-scroll.png
  • debug-toggle-guidelines-spacer.png
  • debug-toggle-slow-animations-disabled.webp
  • debug-toggle-slow-animations-enabled.webp
  • debugger_screenshot.png
  • deep-link-validator.png
  • diff-tab.png
  • display-options.png
  • enhanced-tracing.png
  • extension_enable_prompt.png
  • filter-by-tag.png
  • filter-ui.png
  • flame-chart-help.png
  • flex-explorer-tab.png
  • flutter-frames-chart.png
  • flutter-inspector-settings.png
  • frame-analysis-tab.png
  • inspector-widget-explorer.png
  • inspector-widget-tree.png
  • inspector_details_tree.png
  • inspector_legacy_screenshot.png
  • inspector_screenshot.png
  • invert_oversized_images_icon.png
  • layout_explorer_cross_axis_alignment.webp
  • layout_explorer_errors_and_device.webp
  • layout_explorer_fit.webp
  • layout_explorer_fixed_layout.png
  • layout_explorer_flex.webp
  • layout_explorer_main_axis_alignment.webp
  • logging_log_entries.png
  • memory_actions.png
  • memory_allocations_actions.png
  • memory_allocations_overview.png
  • memory_analysis.png
  • memory_analysis_actions.png
  • memory_anatomy.png
  • memory_android.png
  • memory_android_hovercard.png
  • memory_android_legend.png
  • memory_basic_chart.png
  • memory_chart_anatomy.png
  • memory_controls.png
  • memory_enable_stacktrace.png
  • memory_events_detail.png
  • memory_eventtimeline.png
  • memory_eventtimeline_auto_snapshot.png
  • memory_eventtimeline_gc.png
  • memory_eventtimeline_legend.png
  • memory_eventtimeline_monitor.png
  • memory_eventtimeline_reset_monitor.png
  • memory_eventtimeline_snapshot.png
  • memory_eventtimeline_vmgc.png
  • memory_filtering.png
  • memory_hover_events.png
  • memory_inspector.png
  • memory_monitor_allocations.png
  • memory_multi_events.png
  • memory_navigate_inspect.png
  • memory_one_event.png
  • memory_reset.png
  • memory_rss_chart.png
  • memory_search_1.png
  • memory_search_2.png
  • memory_search_3.png
  • memory_settings.png
  • memory_snapshot.png
  • memory_snapshot_inspect.png
  • memory_snapshot_tree.png
  • memory_table_tree_view.png
  • memory_tracking.png
  • memory_tracking_callstack.png
  • memory_two_tabs.png
  • method-table.png
  • more-debugging-options.png
  • network_filter_dialog.png
  • network_screenshot.png
  • network_search_and_filter.png
  • network_startup_resume.png
  • observatory-icon.png
  • observatory-timeline-icon.png
  • paint-baselines-icon.png
  • performance-overlay-green.png
  • performance-overlay-icon.png
  • performance-overlay-jank.png
  • performance-timeline-events-chart-selected-frame.png
  • profile-tab-2.png
  • profile-tab.png
  • refresh-tree-icon.png
  • render-object-tab.png
  • repaint-rainbow-icon.png
  • select-widget-mode-button.png
  • select-widget-mode-icon.png
  • shader-compilation-frames-chart.png
  • show-implementation-widgets-button.png
  • slow-animations-icon.png
  • table-element.png
  • timeline-data-enlarged.png
  • timeline-events-tab.png
  • toggle-platform-icon.png
  • trace-instances-tab.png
  • trace-view.png
  • track-layouts.png
  • track-paints.png
  • track-widget-builds.png
  • track_widget_creation_disabled.png
  • track_widget_creation_enabled.png
  • treemap_breadcrumbs.png
  • visual_debugging_options.png
  • widget-properties-tab.png
  • widget-tree-with-implementation-widgets.png
  • widget-tree.png
src/content/assets/images/docs/tools/vs-code
  • assists.png
  • debug_console.png
  • device_status_bar.png
  • problems.png
  • snippets.png
  • vscode_command.png
  • vscode_embedded.png
  • vscode_status_bar.png
src/content/assets/images/docs/ui
  • AnimatedBuilder-WidgetTree.png
    Consider: Updating for very bright background.
  • favorited-not-favorited.png
    Need: Text on transparent background isn't legible.
  • tapbox-active-state.png
    Consider: Updating due to white background.
  • tapbox-inactive-state.png
    Consider: Updating due to white background.
src/content/assets/images/docs/ui/adaptive-responsive

Consider: Recreating all of these with transparent or grey background.

  • abstract.png
  • adaptive_scaffold.webp
  • adaptive_scaffold2.webp
  • branch.png
  • embed_image1.png
  • embed_image2.png
  • large-screen-guidelines.png
  • large-screen.png
  • measure.png
  • platforms.png
  • titlebar.png
src/content/assets/images/docs/ui/animations

Consider: Recreating all of these without white background.

  • StaggeredAnimationIntervals.png
  • animation-decision-tree.png
  • hero-transition-0.png
  • hero-transition-1.png
  • hero-transition-2.png
  • hero-transition-3.png
  • photohero-class.png
  • radial-expansion-class.png
  • radial-hero-animation.png
src/content/assets/images/docs/ui/layout

Want: Redo or get rid of article.

  • article-hero-image.png
  • button-section-diagram.png
  • card-flutter-gallery.png
  • card.png
  • children.png
  • column-diagram.png
  • column-visual.png
  • container.png
  • gridview-count-flutter-gallery.png
  • gridview-extent.png
  • hello-world.png
  • lakes-column-elts.png
  • lakes-icons-visual.png
  • lakes-icons.png
  • lakes.jpg
  • layout-1.png
  • layout-10.png
  • layout-11.png
  • layout-12.png
  • layout-13.png
  • layout-14.png
  • layout-15.png
  • layout-16.png
  • layout-17.png
  • layout-18.png
  • layout-19.png
  • layout-2.png
  • layout-20.png
  • layout-21.png
  • layout-22.png
  • layout-23.png
  • layout-24.png
  • layout-25.png
  • layout-26.png
  • layout-27.png
  • layout-28.png
  • layout-29.png
  • layout-3.png
  • layout-4.png
  • layout-5.png
  • layout-6.png
  • layout-7.png
  • layout-8.png
  • layout-9.png
  • layout-demo-app.png
  • layout-final.png
  • layout-sketch-add-text-block.svg
  • layout-sketch-button-block-unlabeled.svg
  • layout-sketch-button-block.svg
  • layout-sketch-intro.svg
  • layout-sketch-title-block-unlabeled.svg
  • layout-sketch-title-block.svg
  • layout-sketch.svg
  • layout-too-large.png
  • listtile-flutter-gallery.png
  • listview-color-gallery.png
  • listview.png
  • margin-padding-border.png
  • packed.png
  • pavlova-diagram.png
  • pavlova-icons-row-diagram.png
  • pavlova-large-annotated.png
  • pavlova-large.png
  • pavlova-left-column-diagram.png
  • pavlova-ratings-row-diagram.png
  • pavlova-visual.png
  • pavlova.png
  • row-diagram.png
  • row-expanded-2-visual.png
  • row-expanded-visual.png
  • row-spaceevenly-visual.png
  • sample-flutter-layout.png
  • stack-flutter-gallery.png
  • stack.png
  • title-section-parts.png
  • widget-tree-pavlova-icon-row.png
  • widget-tree-pavlova-rating-row.png
src/content/assets/images/docs/widget-catalog
  • CupertinoAdaptiveTextSelectionToolbar.png
  • CupertinoApp.png
  • CupertinoCheckbox.png
  • CupertinoColors.png
  • CupertinoContextMenuAction.png
  • CupertinoDatePicker.png
  • CupertinoDesktopTextSelectionToolbar.png
  • CupertinoDesktopTextSelectionToolbarButton.png
  • CupertinoFormRow.png
  • CupertinoFormSection.png
  • CupertinoListTileChevron.png
  • CupertinoNavigationBarBackButton.png
  • CupertinoPicker.png
  • CupertinoRadio.png
  • CupertinoSpellCheckSuggestionsToolbar.png
  • CupertinoTextFormFieldRow.png
  • CupertinoTextMagnifier.png
  • CupertinoTextSelectionToolbar.png
  • CupertinoTextSelectionToolbarButton.png
  • CupertinoTimerPicker.png
  • cupertino-action-sheet.png
  • cupertino-activity-indicator.png
  • cupertino-alert-dialog.png
  • cupertino-button.png
  • cupertino-context-menu.png
  • cupertino-dialog-action.png
  • cupertino-dialog.png
  • cupertino-form-section.png
  • cupertino-fullscreen-dialog-transition.png
  • cupertino-list-section.png
  • cupertino-list-tile.png
  • cupertino-nav-bar.png
  • cupertino-page-scaffold.png
  • cupertino-page-transition.png
  • cupertino-scrollbar.png
  • cupertino-search-field.png
  • cupertino-segmented-control.png
  • cupertino-slider.png
  • cupertino-sliding-segmented-control.png
  • cupertino-sliver-navigation-bar.png
  • cupertino-switch.png
  • cupertino-tab-bar.png
  • cupertino-tab-scaffold.png
  • cupertino-tab-view.png
  • cupertino-textfield.png
  • material-3-badge.png
  • material-3-bottom-app-bar.png
  • material-3-bottom-sheet.png
  • material-3-bubbles.png
  • material-3-buttons.png
  • material-3-card.png
  • material-3-checkbox.png
  • material-3-chip.png
  • material-3-coral.png
  • material-3-date-picker.png
  • material-3-dialog.png
  • material-3-divider.png
  • material-3-extended-fab.png
  • material-3-floating-action-button.png
  • material-3-icon-button.png
  • material-3-leaves.png
  • material-3-list.png
  • material-3-menu.png
  • material-3-navigation-bar.png
  • material-3-navigation-drawer.png
  • material-3-navigation-rail.png
  • material-3-progress-indicator.png
  • material-3-radio-button.png
  • material-3-search-bar.png
  • material-3-segmented-button.png
  • material-3-side-sheet.png
  • material-3-slider.png
  • material-3-snackbar.png
  • material-3-switch.png
  • material-3-tab-bar.png
  • material-3-text-field.png
  • material-3-time-picker.png
  • material-3-top-app-bar.png
  • material-alert-dialog.png
  • material-app-bar.png
  • material-bottom-navigation-bar.png
  • material-bottom-sheets.png
  • material-button-bar.png
  • material-card.png
  • material-carousel.png
  • material-checkbox.png
  • material-chip.png
  • material-circular-progress-indicator.png
  • material-data-table.png
  • material-divider.png
  • material-drawer.png
  • material-elevated-button.png
  • material-floating-action-button.png
  • material-grid-view.png
  • material-linear-progress-indicator.png
  • material-list-tile.png
  • material-outlined-button.png
  • material-popup-menu-button.png
  • material-radio.png
  • material-slider.png
  • material-snack-bar.png
  • material-switch.png
  • material-tab-bar.png
  • material-text-field.png
  • material-tooltip.png
  • material-widgets-app.png
src/content/assets/images/social
  • bluesky.svg
  • github.svg
  • medium.svg
  • x.svg
  • youtube.svg
@parlough parlough added e3-weeks Effort: < 4 weeks infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p1-high Major but not urgent concern: Resolve in months. Update each month. labels Apr 8, 2025
@parlough parlough self-assigned this Apr 8, 2025
@parlough parlough changed the title Validate all images for existence and dark mode Validate all images for usefulness and dark mode compatibility Apr 8, 2025
@parlough parlough mentioned this issue Apr 9, 2025
Merged
sfshaza2 pushed a commit that referenced this issue Apr 9, 2025
@parlough
Remove various unused images (#11884)
585dce1 
Removes a few unused images, renames a few others for consistency, and
adds some documents explaining the existence of others not used by the
site.

Contributes to #11883
@parlough parlough mentioned this issue Apr 9, 2025
Merged
parlough added a commit that referenced this issue Apr 9, 2025
@parlough
Remove outdated trailing comma mention (#11886)
3156bd9 
This section is no longer relevant as the formatter automatically adds
or removes trailing commas as necessary in Dart 3.7 and later.

The images also include inaccessible text, so just remove it and point
to the kept up to date dart.dev docs.

Contributes to #11883
This was referenced Apr 9, 2025
Merged
Merged
Merged
sfshaza2 pushed a commit that referenced this issue Apr 10, 2025
@parlough
Clean up more unused images (#11889)
5a25e02 
Also replaces an image that was mostly about the text with a code block.

Contributes to #11883
sfshaza2 pushed a commit that referenced this issue Apr 10, 2025
@parlough
Wrap diagrams and transparent images with background (#11891)
c3b81a7 
By adding a `.diagram-wrap` CSS class that can be added to images as
needed.

To improve legibility in dark mode and visual separation in light mode.

Contributes to #11883
sfshaza2 pushed a commit that referenced this issue Apr 10, 2025
@parlough
Update engine repo references in app anatomy svg (#11890)
667bc7d 
Remove references to `flutter/engine` in the image and slightly reduces
the brightness of the background.

Contributes to #11883
@parlough
Copy link
Member Author

In the PRs linked to the issue I've fixed cases that would be inaccessible or otherwise illegible in dark mode.

For an optimal user experience, there are still cases that should be migrated to a transparent background or have a dark mode alternative. I'll be filing follow up issues with lower priorities to address those.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@parlough parlough

Labels
e3-weeks Effort: < 4 weeks infra.design Relates to the design of docs.flutter.dev infra.structure Relates to the tools that create docs.flutter.dev p1-high Major but not urgent concern: Resolve in months. Update each month.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@parlough