Scene Tab Colors

SketchUp Feature Requests
1

This would be very handy - one more way of managing large numbers of scenes.

image
image2918×167 50.1 KB

Last request was made in 2017 and the thread is now locked:

Is it possible to change the color of the scene TAB? - SketchUp / Pro - SketchUp Community

2

agreed.
meanwhile you can use emojis. not as good, but it helps a bit

3

Unfortunately, the Ruby API gives you no access to the scene tab user interface. No colour, font, or styling properties exist on these tabs, so no script or extension can currently be written to recolour them.

What you can do is use Unicode markers like a circle or a triangle or a star or give each scene name a prefix like 0.1, 0.2, etc. You could also do a clear blank scene name in between groups of scene names so that it breaks it up visually.

▲ Sections

● Interior

★ Presentation

image
image302×109 6.26 KB

Another idea, which will require a bit of coding, is to create a floating scene palette with coloured buttons for each scene. Instead of clicking on the scenes, you’re clicking on a pop-up window.

Screenshot and code below. Please note this is completely vibe coded. Please use at your own discretion.

image
image964×849 65.1 KB

# scene_palette.rb
# Color-coded scene navigator for SketchUp — a workaround for the lack of
# scene tab colors in the API.
#
# Install: copy to your Plugins folder, restart SketchUp, then open via
# Extensions > Scene Palette. (Or paste into the Ruby Console to test.)
#
# Coloring rules (in order of precedence):
#   1. Explicit color tag in the scene name: "Plan {red}", "Section {#3a86ff}"
#      (the tag is hidden in the palette but stays in the tab name)
#   2. Numeric prefix, colored by band of ten:
#        0-9 red · 10-19 orange · 20-29 green · 30-39 teal · 40-49 blue
#        50-59 purple · 60-69 pink · 70-79 brown · 80-89 gray · 90-99 gold
#      e.g. "05 Plan" is red, "12 Elevation" is orange, "23 Detail" is green.
#   3. No number: auto-colored by the first word, so grouped names match.

module ScenePalette
  # One color per band of ten (0-9, 10-19, ... 90-99). Edit to taste.
  BAND_COLORS = %w[#e63946 #f4a261 #6a994e #2a9d8f #457b9d
                   #8338ec #ff6b9d #bc6c25 #8d99ae #e9c46a].freeze

  AUTO_COLORS = %w[#e63946 #f4a261 #e9c46a #2a9d8f #457b9d #8338ec
                   #ff6b9d #6a994e #bc6c25 #118ab2].freeze

  def self.color_for(name, index)
    if name =~ /\{(#[0-9a-fA-F]{3,6}|[a-z]+)\}/
      Regexp.last_match(1)
    elsif name =~ /^\s*(\d+)/
      band = Regexp.last_match(1).to_i / 10
      BAND_COLORS[band % BAND_COLORS.size]
    else
      prefix = name.split(/\s+/).first.to_s.downcase
      AUTO_COLORS[prefix.sum % AUTO_COLORS.size]
    end
  end

  def self.display_name(name)
    name.gsub(/\s*\{[^}]*\}/, "").strip
  end

  def self.build_html
    model = Sketchup.active_model
    pages = model.pages
    current = pages.selected_page
    buttons = pages.each_with_index.map do |page, i|
      color = color_for(page.name, i)
      active = (page == current) ? "active" : ""
      label = display_name(page.name)
      "<button class='scene #{active}' style='--c:#{color}' " \
        "onclick=\"sketchup.select(#{i})\">#{label}</button>"
    end.join("\n")

    <<~HTML
      <!DOCTYPE html><html><head><meta charset="utf-8"><style>
        body { font: 13px system-ui, sans-serif; margin: 8px; background: #222; }
        .scene { display: block; width: 100%; margin: 3px 0; padding: 7px 10px;
                 border: none; border-left: 14px solid var(--c); border-radius: 4px;
                 background: #333; color: #eee; text-align: left; cursor: pointer; }
        .scene:hover { background: #444; }
        .scene.active { background: var(--c); color: #fff; font-weight: 600; }
        .refresh { margin-top: 8px; width: 100%; padding: 5px; border: 1px solid #555;
                   border-radius: 4px; background: #2b2b2b; color: #aaa; cursor: pointer; }
      </style></head><body>
        #{buttons}
        <button class="refresh" onclick="sketchup.refresh()">↻ Refresh</button>
      </body></html>
    HTML
  end

  def self.show
    @dialog ||= UI::HtmlDialog.new(
      dialog_title: "Scene Palette", preferences_key: "scene_palette",
      width: 220, height: 420, resizable: true, style: UI::HtmlDialog::STYLE_UTILITY
    )
    @dialog.add_action_callback("select") do |_, index|
      pages = Sketchup.active_model.pages
      pages.selected_page = pages[index] if pages[index]
      @dialog.set_html(build_html) # re-render to move the highlight
    end
    @dialog.add_action_callback("refresh") { |_| @dialog.set_html(build_html) }
    @dialog.set_html(build_html)
    @dialog.show
  end

  unless defined?(@menu_added) && @menu_added
    UI.menu("Extensions").add_item("Scene Palette") { show }
    @menu_added = true
  end
end

ScenePalette.show