• Diff for "Design/Theming"

Reference notes for local theme corrections of a Sugar-100 based theme for an XFCE environment, meant as an example case and a starting point for a desktop designer's guide to theming.

Problem

Visual inconsistency: The Sugar theme is designed with the Gtk toolkit, and some applications use the standards offered by the Qt toolkit (or others).

Strategies

• Other XFCE-themes must have had this problem! Choose one for reference
  • and adapt their changes to the Sugar theme.
• Map visual flaws and report them as bugs to the Sugar Theme team:
  • Jonas Smedegaard and myself (Siri Reiter).

Visual Design

• Flat design
• High Contrast icon theme as fallback (not Adwaita), similar in expression
• Strong colors in addition to black and grey theme

File structure

Theme files are located in usr/share/themes/

• /gtk-2/gtkrc
• /gtk-3/gtk.css
• /gtk-3/gtk-widgets.css
• /gtk-3/settings.ini
• /xfwm4/themerc

Window manager icons

PNG and XMP formats located in usr/share/themes/*/xfwm4/

• close (cross, no toggle variant (dialog-cancel.svg))
• maximize (window(s) or window with arrows (view-fullscreen.svg))
• hide (underscore, no toggle variant (look at Piranha theme (circles)))
• menu (arrow down (go-down.svg))
• shade (arrow up, toggled down (go-up.svg))
• stick (circle (view-radial.svg))

variations:

• active
• inactive
• pressed
• toggled-active
• toggled-inactive
• toggled-pressed

Content of icon theme sugar.orig

Themes correspond with their iconset in usr/share/icons/

• /cursors
• /scalable
  • /actions
  • /apps
  • /categories
  • /control
  • /device
  • /emblems
  • /mimetypes
  • /status
• /icon-theme.cache
• /index.theme

Noted flaws

Sugar theme and Sugar icons.

• The Sugar theme doesn't fully cover the xdg-standard for iconsets. Filed as Bug#795289. Icon fallbacks in Thunar (desktop, filesystem, trashcan, folder, network), Icedove (get messages, write, chat, address book, tag, decrypt. Search, filter and dropdown menu arrows are 'sugary') and Iceweasel menus. Inheritance set to "?HighContrast" in icons.theme.

• Frames and icons in content of websites look too radical (look for plugin)
• FIXED: Icedove: Selected color white and Icedove inverted active text color white in text 'button' when opening submenu (background doesn't change to grey).
  • Grey background clash with Icedove address text color grey when sending mail (text grey when Qt 4 GUI Gtk+ is active, otherwise black)
  • Evince: White text and background in file selection window.
  • Connection manager: White text and light grey backgrounds in manage connection selection menu.
  • Xfwm4-settings: Combobox prelight background and foreground color both white.
• Tickbox and text overlap in submenus (Icedove, Iceweasel, Scribus)(but not in Appearence control window)
• Tab menus don't fit with Sugar's circled indication of selection (change bg color) (Appearence, Scribus, content of Thunar ind icon set view)(does not appear at all or disappear in seconds with Qt GUI set to Gtk+)
• Inkscape export combobox text fiels is too small to contain more than one digit
• No sugar style for window manager
• Evince and gtk-demo has its own "window manager" toolbar
• Cursor set is big and clumsy and only show inside borders of certain windows (Iceweasel (gtk-2.0), not Thunar (gtk-2.0))
• Libreoffice: Grey squared background shows behind rounded text fields. Spelling icons don't match with black background. Prelight fg and bg are both white in dialog boxes.
• Composit windows (necessary to shadow windows) makes selection in terminal mode white out, when windows are layered.

Notes

• Gtk theme needs to be in usr/share/themes for xfwm4 to recognize it
• Gtk-2 control styling by gtkrc-file
• Gtk-3 control styling by css-files
• Window frames has xfwm4 icons and shape in bitmaps (png and xpm). Xpm is necessary - allocates the space. Theme and typography is set in 'Window management'. Theme needs settings in themerc.

• 'Qt 4 settings' -> select gtk+ (test)

• Touchscreens work with Metacity
• Evince already has a kind of window manager with perfectly usable icons (Adwaita symbolic).
• Cursor theme has cursor.theme file (where?)
• Background image can be placed anywhere and must be chosen in the desktop
  • manager widget. (What is the preferred location?)
• Splash screen in usr/share/images/desktop-base (symlink to desktop-splash). Size something like 1920 x 1200 px

Decisions

• Sugar theme look here: Thunar, panels, window frames
• Should the theme interfere in app design in Iceweasel, Icedove etc.?

Tasks

• DONE via theme.index Inheritance: Create symlinks from High Contrast icon theme
• (NONE FOUND) Test if programs crash when using Gtk+ theme in Qt programs.
• Identify possible sources to flaws
• Look for Iceweasel plugin to manage fallback in content of websites
• DONE Distribution logo in upper left corner in icons /apps/xfce4-panel-menu.svg and in index.theme directories list (lookup directory). Scalable preferred.
• DONE Find, choose, copy and modify bitmaps and themerc settings from window theme with similar features (Murrinableu (pointy) or Gaudy (rounded))
• DONE Create bitmap icons for window manager
• Write bug reports
• Create splash screen and place it correctly
• Create desktop image and place it correctly
• Create alpha package for Debian
• Report theme changes in git
• Create colored theme variation

Gtk based applications

• darktable
• inkscape
• galculator
• gajim
• thunar

A list of gtk+ applications: https://en.wikipedia.org/wiki/List_of_GTK%2B_applications

Qt based applications

• scribus

tk

• imagemagick

Mozilla

• icedove
• iceweasel

Todo

• mypaint
• sxiv
• pidgin
• gimp
• libreoffice