I will not provide updates for other languages, my main focus is ENGLISH. However you are welcome to localize the theme in your own language. I will be happy to incorporate your modifications if you share them here of make a fork/pull request via github.
To this effect, here is a small guide on how to make the translations :
as there are no classes available to select individual icons, the theme relies on targeting aria-label
which is language dependant and MAY evolve with different versions. Thus currently, the theme breaks if you are not using ENGLISH or CHINESE SIMPLIFIED.
by default, the theme is designed for english language and text icons will de displayed in english (eg. files
, search
, star
,tags
, backlinks
,outline
)
when using another obsidian language, you need to tweak the css or else the icons will be crooked (see the posts above).
the explanation is lenghty, but it’s actually pretty simple and quicker to do than to read
how to make the theme compatible with your language (other than english) :
open obsidian.css
in a text editor/code editor and look for /*======== replace icons in tab header with text =========*/

1. get correct spacing of the icons:
-
just above this section, where it says
div[aria-label="文件管理器"],
div[aria-label="File explorer"],
you need to duplicate the line and replace the label with the correct translation, eg div[aria-label*="Explorateur de fichiers"],
for french language.
don’t forget the ,
(comma) at the end of the line if you add it above
-
to find the exact aria-label
to use, look in the obsidian-translation github and open the json file corresponding to your language, for instance :
- es.json for spanish
- fr.json for french
- zh-tw.json for canto, etc…,
it’s important to get the correct names for each [aria-label*=…], or else it will fail !
using [arial-label*=…] should be better than [aria-label=…] (note the *
, for more info google css selector contains)
-
then look in your language json file around line 273, where it says
"plugins": {
"name": "...
-
in the json file, search for the section for file-explorer
(line 275) and use what’s after "name:"
as the [aria-label] content, so for french it looks like:
"file-explorer": {
"name": "Explorateur de fichiers",
"desc": "Voir tous les fichiers de votre projet.",
...
-
thus you would use “Explorateur de fichiers” and add this to the obsidian.css around line 1140:
div[aria-label="Explorateur de fichiers"],
div[aria-label="文件管理器"],
div[aria-label="File explorer"],
-
repeat the same process for the search
and starred
lines.
2. replace icons by text icons
around line 1149-1310 of the obsidian css.
-
following the same process that I described above, you need to add definitions for your language everywhere you see a div[aria-label...
-
so for french, where it’s currently (around line 1150):
div[aria-label="文件管理器"] .workspace-tab-header-inner-icon,
div[aria-label="File explorer"] .workspace-tab-header-inner-icon {
display: none;
}
div[aria-label="文件管理器"] .workspace-tab-header-inner:after,
div[aria-label="File explorer"] .workspace-tab-header-inner:after {
content: "FILES";
font-size:12px;
font-weight: 700;
margin-left:-8px;
}
it should become :
div[aria-label="Explorateur de fichiers"] .workspace-tab-header-inner-icon,
div[aria-label="文件管理器"] .workspace-tab-header-inner-icon,
div[aria-label="File explorer"] .workspace-tab-header-inner-icon {
display: none;
}
div[aria-label="Explorateur de fichiers"] .workspace-tab-header-inner:after,
div[aria-label="文件管理器"] .workspace-tab-header-inner:after,
div[aria-label="File explorer"] .workspace-tab-header-inner:after {
content: "FILES";
font-size:12px;
font-weight: 700;
margin-left:-8px;
}
-
in the exemple above, line content: "FILES";
defines the text for the text-icon.
This is where you can change the text to anything you want, eg:
div[aria-label="Explorateur de fichiers"] .workspace-tab-header-inner:after,
div[aria-label="文件管理器"] .workspace-tab-header-inner:after,
div[aria-label="File explorer"] .workspace-tab-header-inner:after {
content: "檔案管理器";
font-size:12px;
font-weight: 700;
margin-left:-8px;
}
will produce (note the top left text label in trad.chinese) :
-
rinse and repeat, look for lines with div[aria-label...
, duplicate and replace with the correct translation. Just make sure to copy/paste each line individually while preserving all the content, make sure there is a comma at the end and doucle-check the aria-label
content with the translation files from the obsidian translation github.
-
if you make the modifications for other languages, please share 