This site has comments.
And those comments are powered by Remark42. I’ve never received any comments, but if I’m going to go through the process of sharing things I’ve learned on the internet, then I wanted comments to be available . I picked Remark42 because it’s a good combination of simplicity and options, and it includes the non-negotiable option to comment anonymously. The one thing that I’ve wanted to do, but couldn’t, was style the CSS. I’m no CSS guru (I’m pretty bad at it actually) but it would be nice if I could set the styles of my comments to match my site. Thankfully I’ve found a solution.
Thanks to Andrey at agrunev.com
Andrey did the work of finding where a docker install of Remark42 stores its CSS. I’ve adapted the method described on Andrey’s site, and (the most important part of this post) I’ve made a more easily modified CSS file. If you’re trying to modify Remark42, see my method below. This should work for other installations of Remark42 as well, but I can’t say where the CSS file will be located, and I haven’t tested it so YMMV.
1. Access the CSS
Andrey points out that the CSS is located at /srv/web/ inside the container. That means we can map our own file to that location. Simply add a line to the volumes section of your compose file
volumes:
- /var:/srv/var
# Add something like the line below
- /path/on/host/remark.css:/srv/web/remark.css Now whatever you put in the remark.css file at the path on the left side, will be used for the CSS in the container.
Note that this can be done for other CSS files as well such as the last-comments.css but since I’m not using that widget, I haven’t done it.
2. Create your own CSS file
The obvious way to do this is to copy the file that the container creates before mapping your own file. This is where I started, but was shocked to find that this simple widget uses well over 40 different colors. many (but not all) of them are mapped to variables, but those variables use a numbering system that doesn’t describe what the color corresponds to.
I decided to try to map things to variables that make sense. You can find my CSS on my github.
The key section that makes this easy to modify, are these variables right at the top.
/* Modify for Light Theme */
:root {
--theme-primary: #f6eee1;
--theme-secondary: #f5f8c5;
--accent-color: #02270f;
--accent-color-two:#583003;
--text-primary: #0f172a;
--text-secondary: #ddd;
--text-neutral: #555;
--accent-color-three: #dc9891;
}
/* Modify for Dark Theme */
:root .dark {
--theme-primary: #2e3440;
--theme-secondary: #4c566a;
--accent-color: #8fbcbb;
--accent-color-two:#d8dee9;
--text-primary: #ddd;
--text-secondary: #0f172a;
--text-neutral: #555;
--accent-color-three: #ebcb8b;
}The first section in :root is the light theme. The second section in :root .dark is the dark theme. Most of the names should be self explanatory, but I recommend just playing around with it to see what changes when you…
3. Rebuild your docker container
The changes won’t take place until you rebuild the container, then you can see your changes. You can see the results of my own styling on this site at the bottom of this post.
Caveats…
Note that this file is not perfect! I’ve started this project, but I wouldn’t call it done. It works for the use case that I have, but I know there are some colors I haven’t fixed yet, and features that will probably have the original color scheme. I’m also not great at CSS or coding in general. I’m a mechanical engineer not a web developer, but this should be at least a better starting place. That said, I used way less colors than the original CSS. I’ve probably lost some nuance the developers, and many users, liked about the original styling, but the way it was done was too obtuse to modify easily. This is cleaner for someone like me who doesn’t code often. If you find it useful and make improvements, feel free to submit a pull request, I’d appreciate the help for my own installation. If it gains any kind of traction, maybe we can bring it to the attention of the remark42 devs.
Remark42 is great, and still getting better! Hopefully this just makes it a little more usable for some of us who don’t often code.