From the simple customisation being applied I cannot see why it is not working. Those lines work in my userstyle.css file with v1.6.7 and the default light theme.
Please do not take offence if you have checked all the below but when trying to help users I have found that these are probably the most common reasons for css customisation not working.
If Joplin itself is not used to create and open the css files then they must be placed in <users_home_path>/.config/joplin-desktop folder. I'm not a Mac user so I am assuming that the MacOS path is the same as for Windows / Linux.
The Markdown editor pane and Joplin interface is controlled by userchrome.css and the rendered Markdown view by userstyle.css. Sometimes people have used the wrong css file.
userstyle.css does not work with the WYSIWYG editor. You have to be using the Markdown editor / viewer.
The user mis-names the file, such as, userstyles.css.
When pasting css into the file the user mistakenly copies extra text that invalidates the css.
Users will declare they have fully restarted Joplin but have still just caused the program to minmise to the system tray. File > Quit or Right-click taskbar icon > Quit has to be used.
In fact, that was my issue. I switched to the Markdown editor/viewer to finally see the positive result. I'm not very fancy using this two-pane mode when writing because it consumes lots of space.
I use Typora and I like its “real live preview” as I type. Woundn't it be possible to use that kind of mode under Joplin so I only have one pane?