Treeview's icons are not visible in dark theme #2630
Comments
|
The ideal solution is to set the background color of the icon to Honestly, I don't think that |
|
In fact, now I have a better idea, make the icons become iconfont, and encode the woff file to Data-URI, write into the css file, so we can easy to set the icon color, because now is font, and the file will be more smaller, but the generation of woff file will be more difficult. I can help generate this time, but, Emmm. how about next time...? Here is the code, I've tried it, and it works : Click to expand the code/* Woff is a little larger than woff2, but it has better compatibility, so we choose to use woff */
/* Detail is here : https://caniuse.com/?search=woff */
@font-face{
font-family:"prismTreeview";
src:url('data:application/font-woff;base64,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') format('woff');
}
.token.treeview-part .entry-name:before{
font-family:"prismTreeview";
font-size:inherit;
font-style:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.token.treeview-part .entry-name:before{content:"\ead0";}
.token.treeview-part .entry-name.dir:before{content:"\ead1";}
.token.treeview-part .entry-name.ext-bmp:before,
.token.treeview-part .entry-name.ext-eps:before,
.token.treeview-part .entry-name.ext-gif:before,
.token.treeview-part .entry-name.ext-jpe:before,
.token.treeview-part .entry-name.ext-jpg:before,
.token.treeview-part .entry-name.ext-jpeg:before,
.token.treeview-part .entry-name.ext-png:before,
.token.treeview-part .entry-name.ext-svg:before,
.token.treeview-part .entry-name.ext-tiff:before{content:"\ead2";}
.token.treeview-part .entry-name.ext-cfg:before,
.token.treeview-part .entry-name.ext-conf:before,
.token.treeview-part .entry-name.ext-config:before,
.token.treeview-part .entry-name.ext-csv:before,
.token.treeview-part .entry-name.ext-ini:before,
.token.treeview-part .entry-name.ext-log:before,
.token.treeview-part .entry-name.ext-md:before,
.token.treeview-part .entry-name.ext-nfo:before,
.token.treeview-part .entry-name.ext-txt:before{content:"\ead3";}
.token.treeview-part .entry-name.ext-asp:before,
.token.treeview-part .entry-name.ext-aspx:before,
.token.treeview-part .entry-name.ext-c:before,
.token.treeview-part .entry-name.ext-cc:before,
.token.treeview-part .entry-name.ext-cpp:before,
.token.treeview-part .entry-name.ext-cs:before,
.token.treeview-part .entry-name.ext-css:before,
.token.treeview-part .entry-name.ext-h:before,
.token.treeview-part .entry-name.ext-hh:before,
.token.treeview-part .entry-name.ext-htm:before,
.token.treeview-part .entry-name.ext-html:before,
.token.treeview-part .entry-name.ext-jav:before,
.token.treeview-part .entry-name.ext-java:before,
.token.treeview-part .entry-name.ext-js:before,
.token.treeview-part .entry-name.ext-php:before,
.token.treeview-part .entry-name.ext-rb:before,
.token.treeview-part .entry-name.ext-xml:before{content:"\ead4";}
.token.treeview-part .entry-name.ext-7z:before,
.token.treeview-part .entry-name.ext-bz:before,
.token.treeview-part .entry-name.ext-bz2:before,
.token.treeview-part .entry-name.ext-gz:before,
.token.treeview-part .entry-name.ext-rar:before,
.token.treeview-part .entry-name.ext-tar:before,
.token.treeview-part .entry-name.ext-tgz:before,
.token.treeview-part .entry-name.ext-zip:before{content:"\ead5";}
.token.treeview-part .entry-name.ext-aac:before,
.token.treeview-part .entry-name.ext-au:before,
.token.treeview-part .entry-name.ext-cda:before,
.token.treeview-part .entry-name.ext-flac:before,
.token.treeview-part .entry-name.ext-mp3:before,
.token.treeview-part .entry-name.ext-oga:before,
.token.treeview-part .entry-name.ext-ogg:before,
.token.treeview-part .entry-name.ext-wav:before,
.token.treeview-part .entry-name.ext-wma:before{content:"\ead6";}
.token.treeview-part .entry-name.ext-avi:before,
.token.treeview-part .entry-name.ext-flv:before,
.token.treeview-part .entry-name.ext-mkv:before,
.token.treeview-part .entry-name.ext-mov:before,
.token.treeview-part .entry-name.ext-mp4:before,
.token.treeview-part .entry-name.ext-mpeg:before,
.token.treeview-part .entry-name.ext-mpg:before,
.token.treeview-part .entry-name.ext-ogv:before,
.token.treeview-part .entry-name.ext-webm:before{content:"\ead7";}
.token.treeview-part .entry-name.ext-pdf:before{content:"\ead8";}
.token.treeview-part .entry-name.ext-xls:before,
.token.treeview-part .entry-name.ext-xlsx:before{content:"\ead9";}
.token.treeview-part .entry-name.ext-doc:before,
.token.treeview-part .entry-name.ext-docm:before,
.token.treeview-part .entry-name.ext-docx:before{content:"\eada";}
.token.treeview-part .entry-name.ext-pps:before,
.token.treeview-part .entry-name.ext-ppt:before,
.token.treeview-part .entry-name.ext-pptx:before{content:"\eadb";} |
|
Could we put the SVG files in Prism Project ? so that we can optimize these icons and try to add some new ones. SVG file already exists ? I searched, but didn't find the svg source file ? 😂 |
|
Oooh. I really like that solution.
Good idea. I'll make a little script to extract them all from the current CSS file. How did you convert the SVG icons to WOFF format? I would like to make it a part of our build process to generate the font from the SVG files. Did you use webfont or some other tool? |
|
Emmm, I am not using code to generate woff files. This platform IconFont can help us to achieve this. Just upload svg files and create a project, then we can download woff/woff2/ttf/eot... files, it also has English version, the top right corner can Switch languages, but this platform is useless for automatically generating iconfont. By the way, the first SVG file is nested one more layer, resulting in font generation failure. but I 'm already adjusted it. I haven't tried to generate font files with code. This may be hard because font files also have many details to control. maybe we can use the webFont to create that, but I don't understand about it, sorry. 😅 |
|
Don't worry. webfont was super easy to use and handled everything perfectly. |
|
Good, Done. ☺ |
|
#2631 isn't merged yet, so let's keep this open until then. |
|
OK. 👌 |
Information:
Description
Treeview's icons fill color is
#000, it makes them invisible in dark themes.Example
At Treeview page, using the dark theme or funky theme, then we can see that.
Fixed
I have provided an improved scheme. First, the encoding mode of SVG file will be improved to make the file smaller and the code can be read. Secondly, add the
fillattribute to the<path>and change the color to#999. In this way, the icon can be visible in all the themes. Here is the result compare :Click to expand the code
The text was updated successfully, but these errors were encountered: