PNG diagrams that should be adaptive SVG.

example1 cap 4

White opaque PNG screenshots that should be transparent.

Some png files have a white opaque background, for example;

cap 5 cap 2

Solution is Adaptive SVG (prefers-color-scheme)

I exported the this GraphML file as SVG and I wrote inline CSS.

<style>
    #background {fill: #FCFCFC;}
    #boxes{fill: #C3E3FF; stroke:white;}
    #objectbox{fill:#7BCAFF;}
    #arrows{fill: #599DD6;stroke: #599DD6;}
    text{
        fill: #404040;
        stroke:none;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        font-size: 12px;
        text-align: center;
    }
    @media (prefers-color-scheme: dark) {
    text{
        fill:white;
        }
    #background {fill: #2E3236;}
    #boxes{fill:#4d6680;stroke: #2E3236;}
    #objectbox{fill:#6C99C4;}
    #arrows{
            stroke: #417DA9;
            fill:#417DA9;
            stroke-width:2px;
      }
    }
  </style>

See SVG below. You can see the change by toggle between the light / dark mode of your operating system;

Before / After demo gif;

Embeded PNG screenshot in adaptive SVG

This can be transparent PNG with red stokes and labels or SVG + Embedded PNG + CSS. See SVG The font may look different to you because it is not defined in html. you need to have Montserrat installed on your system. example below;

https://gist.github.com/hazarek/e4dd3f981715374b7c67b4bfaddf9a21

If SVG is used, styles, fonts, colors can be changed dynamically. The same style should be used for all screenshots. for example my screenshot style template;

            g.labels {
            fill:#BE5460;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 6pt;
            }
            g.strokes {
                stroke:#BE5460;
                fill: none;
                stroke-width: 3px;
            }

What should be done.

[ ] All diagrams that can be converted into vector will be responsive SVG.
[ ] Opaque screenshots will be adapted to dark mode.

Calinou commented 4 years ago

The inheritance class tree graphic is outdated. It needs to be updated before we can consider adapting its SVG form.

setanarut commented 4 years ago

List of problematic images.

white weighted screenshots
incompatible colors with dark/light mode
poorly designed diagrams etc.

JPG

/development/cpp/img/architecture_diagram.jpg

PNG

/getting_started/step_by_step/img/activescene.png /tutorials/gui/img/anchors.png /development/cpp/configuring_an_ide/img/android_studio_setup_project_1.png /tutorials/math/img/matrices_and_transforms/apply.png /tutorials/assetlib/img/assetlib_asset.png /tutorials/assetlib/img/assetlib_login.png /tutorials/assetlib/img/assetlib_register-login.png /tutorials/assetlib/img/assetlib_register.png /tutorials/assetlib/img/assetlib_search.png /tutorials/assetlib/img/assetlib_submit.png /tutorials/assetlib/img/assetlib_website.png /community/contributing/img/best_practices1.png /community/contributing/img/best_practices2.png /community/contributing/img/best_practices3.png /community/contributing/img/best_practices4.png /community/contributing/img/best_practices5.png /community/contributing/img/best_practices6.png /community/contributing/img/best_practices7.png /community/contributing/img/best_practices8.png /tutorials/math/img/bezier_cubic_handles.png /tutorials/math/img/bezier_cubic_points.png /tutorials/math/img/bezier_quadratic_points.png /tutorials/2d/img/canvaslayers.png /development/cpp/configuring_an_ide/img/code_block_use_tab_character.png /development/cpp/configuring_an_ide/img/code_blocks_add_files_recursively.png /development/cpp/configuring_an_ide/img/code_blocks_build_targets.png /development/cpp/configuring_an_ide/img/code_blocks_compiler_and_configuration.png /development/cpp/configuring_an_ide/img/code_blocks_file_new_project.png /development/cpp/configuring_an_ide/img/code_blocks_new_empty_project.png /development/cpp/configuring_an_ide/img/code_blocks_open_build_options.png /development/cpp/configuring_an_ide/img/code_blocks_open_properties.png /development/cpp/configuring_an_ide/img/code_blocks_project_properties.png /development/cpp/configuring_an_ide/img/code_blocks_project_title_and_location.png /development/cpp/configuring_an_ide/img/code_blocks_scons_clean.png /development/cpp/configuring_an_ide/img/code_blocks_scons_minimum.png /development/cpp/configuring_an_ide/img/code_blocks_scons_windows.png /development/cpp/configuring_an_ide/img/code_blocks_select_files.png /development/cpp/configuring_an_ide/img/code_blocks_update_editor_settings.png /development/cpp/configuring_an_ide/img/code_blocks_wizard_welcome.png /development/cpp/img/Control.png /getting_started/workflow/export/img/custom_build_bin_folder.png /getting_started/workflow/export/img/custom_build_install_android_studio1.png /getting_started/workflow/export/img/custom_build_open_shell.png /getting_started/workflow/export/img/custom_build_zip.png /getting_started/step_by_step/img/editor_ui_intro_dock_inspector.png /getting_started/step_by_step/img/editor_ui_intro_editor_02_toolbar.png /getting_started/step_by_step/img/export_web_files.png /getting_started/step_by_step/img/export_xcode_project_folders.png /tutorials/3d/img/hdr_gamma.png /tutorials/math/img/matrices_and_transforms/identity-godot.png /tutorials/math/img/matrices_and_transforms/identity-grid.png /tutorials/math/img/matrices_and_transforms/identity-origin.png /tutorials/math/img/matrices_and_transforms/identity.png /tutorials/inputs/img/input_event_flow.png /getting_started/step_by_step/img/instancing.png /getting_started/step_by_step/img/instancingpre.png /getting_started/workflow/export/img/ios_export_add_dir.png /getting_started/workflow/export/img/ios_export_delete_pck.png /getting_started/workflow/export/img/ios_export_file_ref.png /getting_started/workflow/export/img/ios_export_output.png /getting_started/workflow/export/img/ios_export_set_path.png /development/cpp/configuring_an_ide/img/kdevelop_addincludes.png /development/cpp/configuring_an_ide/img/kdevelop_buildconfig.png /development/cpp/configuring_an_ide/img/kdevelop_configlaunches.png /development/cpp/configuring_an_ide/img/kdevelop_configlaunches2.png /development/cpp/configuring_an_ide/img/kdevelop_custombuild.png /development/cpp/configuring_an_ide/img/kdevelop_newproject.png /development/cpp/configuring_an_ide/img/kdevelop_openconfig.png /community/contributing/img/l10n_01_language_list.png /community/contributing/img/l10n_02_new_translation.png /community/contributing/img/l10n_03_translation_overview.png /community/contributing/img/l10n_04_translation_interface.png /community/contributing/img/l10n_05_search_location.png /community/contributing/img/l10n_06_browse_by_location.png /community/contributing/img/l10n_07_download_po_file.png /community/contributing/img/l10n_08_edit_on_github.png /community/contributing/img/l10n_09_path_to_image.png /development/cpp/img/Node2D.png /getting_started/step_by_step/img/nodes_resources.png /development/cpp/img/Object.png /getting_started/step_by_step/img/openworld_instancing.png /tutorials/3d/img/pssm_explained.png /tutorials/vr/img/quest_project_tree.png /tutorials/physics/img/ragdoll_layer.png /tutorials/physics/img/raycast_falsepositive.png /tutorials/physics/img/raycast_projection.png /development/cpp/img/Reference.png /tutorials/math/img/matrices_and_transforms/rotate1.png /tutorials/math/img/matrices_and_transforms/rotate2.png /tutorials/math/img/matrices_and_transforms/rotate3.png /tutorials/math/img/matrices_and_transforms/scale.png /tutorials/3d/img/shadow_quadrants.png /tutorials/3d/img/shadow_quadrants2.png /tutorials/math/img/matrices_and_transforms/shear.png /getting_started/step_by_step/img/shooter_instancing.png /getting_started/step_by_step/img/singleton.png /development/cpp/img/Spatial.png /tutorials/viewports/img/stretch.png /tutorials/3d/img/transforms_camera.png /tutorials/3d/img/transforms_euler.png /tutorials/math/img/matrices_and_transforms/translate.png /getting_started/step_by_step/img/tree.png /tutorials/3d/img/tuto_3d11.png /tutorials/math/img/tutovec10.png /tutorials/math/img/tutovec11.png /tutorials/math/img/tutovec12.png /tutorials/math/img/tutovec13.png /tutorials/math/img/tutovec14.png /getting_started/step_by_step/img/ui_anchor_and_margins.png /tutorials/math/img/vector_add1.png /tutorials/math/img/vector_axis1.png /tutorials/math/img/vector_cross1.png /tutorials/math/img/vector_cross2.png /tutorials/math/img/vector_dot1.png /tutorials/math/img/vector_dot2.png /tutorials/math/img/vector_dot3.png /tutorials/math/img/vector_facing2.png /tutorials/math/img/vector_movement1.png /tutorials/math/img/vector_mult1.png /tutorials/math/img/vector_reflect1.png /tutorials/math/img/vector_subtract2.png /tutorials/math/img/vector_xy1.png /tutorials/math/img/vector_xy2.png /tutorials/2d/img/viewport_transforms2.png /development/cpp/configuring_an_ide/img/vs_1_install_cpp_package.png /development/cpp/configuring_an_ide/img/vs_3_debug_command_line.png /development/cpp/configuring_an_ide/img/vscode_2_launch.json.png /development/cpp/configuring_an_ide/img/vscode_3_tasks.json.png /tutorials/networking/img/webrtc_signaling.png /development/cpp/configuring_an_ide/img/xcode_1_create_external_build_project.png /development/cpp/configuring_an_ide/img/xcode_2_configure_scons.png /development/cpp/configuring_an_ide/img/xcode_3_add_new_target.png /development/cpp/configuring_an_ide/img/xcode_4_select_command_line_target.png /development/cpp/configuring_an_ide/img/xcode_5_after_add_godot_source_to_project.png /development/cpp/configuring_an_ide/img/xcode_6_after_add_godot_source_to_project_2.png /development/cpp/configuring_an_ide/img/xcode_7_setup_build_post_action.png /development/cpp/configuring_an_ide/img/xcode_8_setup_run_scheme.png

SVG

/tutorials/physics/img/raycast_projection.svg /tutorials/viewports/img/stretch.svg /tutorials/math/img/tutovec10.svg /tutorials/math/img/tutovec11.svg /tutorials/math/img/tutovec12.svg /tutorials/math/img/tutovec13.svg /tutorials/math/img/tutovec14.svg

GIF

/tutorials/3d/img/transforms_gimbal.gif /tutorials/math/img/bezier_cubic_points.gif /tutorials/math/img/bezier_quadratic_points2.gif

godotengine / godot-docs

Dark mode responsive documentation images, diagrams #3861