PapirusDevelopmentTeam / materia-kde

Materia KDE customization
https://git.io/materia-kde
GNU General Public License v3.0
627 stars 43 forks source link

Task switch contrast #148

Open Grief opened 2 years ago

Grief commented 2 years ago

Is there a way to make the selection color blue instead of light grey, the selection frame is tiny and is hard to catch with an eye quickly. I mean to change from the appearance on the top to something like I tried to draw below: image

Grief commented 12 months ago

I've added some contrast, modifying /usr/share/plasma/desktoptheme/Materia-Color/widgets/viewitem.svg with the change below. It looks like currentColor was not working for me for some reason image

<svg xmlns="http://www.w3.org/2000/svg" width="236" height="102" version="1">
 <defs id="materia">
  <style id="current-color-scheme" type="text/css">
   .ColorScheme-Background {color:#181818; } .ColorScheme-ButtonBackground { color:#343434; } .ColorScheme-Highlight { color:#4285f4; } .ColorScheme-Text { color:#dfdfdf; } .ColorScheme-ViewBackground { color:#242424; } .ColorScheme-NegativeText { color:#f44336; } .ColorScheme-PositiveText { color:#4caf50; } .ColorScheme-NeutralText { color:#ff9800; }
  </style>
 </defs>
 <rect id="hint-tile-center" style="fill:#ff00ff" width="40" height="40" x="0" y="0"/>
 <path id="selected-center" style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 124.00002,49.99996 v 48 h 47.99999 v -48 z"/>
 <g id="selected-left" transform="matrix(1,0,0,3.0009825,-66.142836,-2440.4026)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 186.14285,829.85712 v 16 h 4 v -16 z"/>
 </g>
 <g id="selected-topleft" transform="translate(-66.142836,-779.87294)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 186.14285,829.8571 h 4 v -4 h -1.46875 c -1.40502,0 -2.53125,1.11588 -2.53125,2.53125 z"/>
 </g>
 <g id="selected-top" transform="matrix(0.36657704,0,0,1,54.288008,-779.85716)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 190.14286,825.85714 v 4 h 131 v -4 z"/>
 </g>
 <g id="selected-topright" transform="translate(-149.14284,-779.85716)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 321.14285,825.85714 v 4 h 4 v -1.46875 c 0,-1.40502 -1.11588,-2.53125 -2.53125,-2.53125 z"/>
 </g>
 <g id="selected-right" transform="matrix(1,0,0,3.0000017,-149.14284,-2439.5728)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 325.14286,829.85712 v 16 h -4 v -16 z"/>
 </g>
 <path id="hover-center" style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 64,49.99972 v 48 h 48 v -48 z"/>
 <g id="hover-left" transform="matrix(1,0,0,3.0009825,-126.14285,-2440.4028)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 186.14285,829.85712 v 16 h 4 v -16 z"/>
 </g>
 <g id="hover-topleft" transform="translate(-126.14285,-779.85766)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 186.14285,829.8571 h 4 v -4 h -1.46875 c -1.40502,0 -2.53125,1.11588 -2.53125,2.53125 z"/>
 </g>
 <g id="hover-top" transform="matrix(0.36657704,0,0,1,-5.71201,-779.8574)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 190.14286,825.85714 v 4 h 131 v -4 z"/>
 </g>
 <g id="hover-topright" transform="translate(-209.14285,-779.8574)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 321.14285,825.85714 v 4 h 4 v -1.46875 c 0,-1.40502 -1.11588,-2.53125 -2.53125,-2.53125 z"/>
 </g>
 <g id="hover-right" transform="matrix(1,0,0,3.0000017,-209.14285,-2439.573)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 325.14286,829.85712 v 16 h -4 v -16 z"/>
 </g>
 <path id="selected+hover-center" style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 184.00001,49.99994 v 48 h 48 v -48 z"/>
 <g id="selected+hover-left" transform="matrix(1,0,0,3.0009825,-6.14284,-2440.4026)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 186.14285,829.85712 v 16 h 4 v -16 z"/>
 </g>
 <g id="selected+hover-topleft" transform="translate(-6.14284,-779.87296)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 186.14285,829.8571 h 4 v -4 h -1.46875 c -1.40502,0 -2.53125,1.11588 -2.53125,2.53125 z"/>
 </g>
 <g id="selected+hover-top" transform="matrix(0.36657704,0,0,1,114.288,-779.85718)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 190.14286,825.85714 v 4 h 131 v -4 z"/>
 </g>
 <g id="selected+hover-topright" transform="translate(-89.142844,-779.85718)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 321.14285,825.85714 v 4 h 4 v -1.46875 c 0,-1.40502 -1.11588,-2.53125 -2.53125,-2.53125 z"/>
 </g>
 <g id="selected+hover-right" transform="matrix(1,0,0,3.0000017,-89.142844,-2439.5728)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 325.14286,829.85712 v 16 h -4 v -16 z"/>
 </g>
 <g id="selected-bottomright" transform="rotate(180,181.07144,463.92852)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 186.14285,829.8571 h 4 v -4 h -1.46875 c -1.40502,0 -2.53125,1.11588 -2.53125,2.53125 z"/>
 </g>
 <g id="selected-bottom" transform="matrix(-0.36657704,0,0,-1,241.72361,927.85714)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 190.14286,825.85714 v 4 h 131 v -4 z"/>
 </g>
 <g id="selected-bottomleft" transform="rotate(180,222.57143,463.92857)">
  <path style="opacity:0.72;fill:#8ab4f8" class="ColorScheme-Highlight" d="m 321.14285,825.85714 v 4 h 4 v -1.46875 c 0,-1.40502 -1.11588,-2.53125 -2.53125,-2.53125 z"/>
 </g>
 <g id="hover-bottomright" transform="rotate(180,151.07143,463.92847)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 186.14285,829.8571 h 4 v -4 h -1.46875 c -1.40502,0 -2.53125,1.11588 -2.53125,2.53125 z"/>
 </g>
 <g id="hover-bottom" transform="matrix(-0.36657704,0,0,-1,181.7236,927.85714)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 190.14286,825.85714 v 4 h 131 v -4 z"/>
 </g>
 <g id="hover-bottomleft" transform="rotate(180,192.57143,463.92842)">
  <path style="opacity:0.32;fill:#8ab4f8" class="ColorScheme-Text" d="m 321.14285,825.85714 v 4 h 4 v -1.46875 c 0,-1.40502 -1.11588,-2.53125 -2.53125,-2.53125 z"/>
 </g>
 <g id="selected_hover-bottomright" transform="rotate(180,211.07144,463.92855)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 186.14285,829.8571 h 4 v -4 h -1.46875 c -1.40502,0 -2.53125,1.11588 -2.53125,2.53125 z"/>
 </g>
 <g id="selected_hover-bottom" transform="matrix(-0.36657704,0,0,-1,301.72361,927.857)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 190.14286,825.85714 v 4 h 131 v -4 z"/>
 </g>
 <g id="selected_hover-bottomleft" transform="rotate(180,252.57143,463.92855)">
  <path style="fill:#8ab4f8" class="ColorScheme-Highlight" d="m 321.14285,825.85714 v 4 h 4 v -1.46875 c 0,-1.40502 -1.11588,-2.53125 -2.53125,-2.53125 z"/>
 </g>
 <path id="normal-center" style="opacity:0.001" d="M 3.998459,50.01459 V 98.00112 H 51.979955 V 50.01459 Z"/>
 <path id="normal-left" style="opacity:0.001" d="M 0,49.99888 V 98.00112 H 3.998459 V 49.99888 Z"/>
 <path id="normal-topleft" style="opacity:0.001" d="M 0,49.99888 H 3.998459 V 46 H 2.530275 C 1.125796,46 0,47.11557 0,48.53054 Z"/>
 <path id="normal-top" style="opacity:0.001" d="m 3.998459,46.01572 v 3.99887 h 48.003086 v -3.99887 z"/>
 <path id="normal-topright" style="opacity:0.001" d="m 52.001545,46.01572 v 3.99887 h 3.99845 v -1.46833 c 0,-1.40463 -1.11545,-2.53054 -2.53027,-2.53054 z"/>
 <path id="normal-right" style="opacity:0.001" d="m 55.999995,50.01459 v 47.98656 h -3.99845 V 50.01459 Z"/>
 <path id="normal-bottomright" style="opacity:0.001" d="m 55.999995,98.00112 h -3.99845 V 102 h 1.46818 c 1.40448,0 2.53027,-1.11557 2.53027,-2.53054 z"/>
 <path id="normal-bottom" style="opacity:0.001" d="M 52.001545,102 V 98.00112 H 3.998459 V 102 Z"/>
 <path id="normal-bottomleft" style="opacity:0.001" d="M 3.998459,102 V 98.00112 H 0 v 1.46834 C 0,100.87409 1.11545,102 2.530275,102 Z"/>
</svg>
gijsrrr commented 11 months ago

Nice, perhaps you can turn this into an PR so @SmartFinn can check the PR and approve it?

Grief commented 11 months ago

@gijsrrr I ended up with the replacement of materia's itemview.svg file with the file from breeze color theme. i.e. I did

cd /usr/share/plasma/desktoptheme
sudo mv default/widgets/viewitem.svg Materia-Color/widgets/viewitem.svg

\ Most recent breeze uses svgz:

cd /usr/share/plasma/desktoptheme
cat default/widgets/viewitem.svgz | gunzip | sudo tee Materia-Color/widgets/viewitem.svg

\

I think while it might not match with the materia style well, the borders around the selection make it more distinguishable, which is good. And the color matches the chosen one in the colors settings. A few screenshots: image

image

image