WIP: Update to Bulma theme / add dark mode #1353
Conversation
StefanCodes
force-pushed
the
dark_mode
branch
from
6ac99de to
aff95a7
Compare
There was a problem hiding this comment.
This is an experiment to see if we can eliminate SASS entirely and rely on pure CSS.
I originally hoped to be able to rely almost entirely on the Bulma styles so TubeSync could have minimal CSS, but this file is still larger than I'd like to really make this pitch.
My motivation here was to facilitate dark mode. I wasn't able to get theme switching to work when SASS variables were involved, but using CSS variables worked. There are some ways to shim in both (basically just redeclaring CSS vars for colours, and leave the SASS otherwise intact), but it seemed brittle to go that route.
Another option would be to let the TubeSync styling change a lot more to fit in with the Bulma defaults. I played with this a little bit and generally just didn't like what it looked like.
I'd love some opinions on this one.
| } | ||
| </style> | ||
| <link type="text/css" rel="stylesheet" href="{% sass_src 'styles/tubesync.scss' %}" media="screen,projection"/> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" /> |
There was a problem hiding this comment.
CDN Bulma. Maybe we should use a local copy?
There was a problem hiding this comment.
I absolutely prefer a local copy.
| <link rel="icon" href="{% static 'images/favicon.ico' %}" sizes="21x21" type="image/x-icon"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <title>TubeSync - {% block headtitle %}Synchronize YouTube to your local media server{% endblock %}</title> | ||
| <script> |
There was a problem hiding this comment.
This is the first of a few JS blocks - I think this is the first script in TubeSync.
I usually prefer implementing the script in TypeScript, but that introduces a bunch of extra build changes. Holding off until there's some consensus on what this should look like.
This script runs on page load to check what the stored theme is. This lives up here to prevent a flash of light mode styles before dark mode is applied.
There was a problem hiding this comment.
Yeah I was a little militant and refused to use any JS at all for tubesync. I'm not opposed to some copy/paste hooks to make Bulma behave though.
| </div> | ||
| </footer> | ||
|
|
||
| <script> |
There was a problem hiding this comment.
This script is doing 2 things:
- Sets up the dark mode toggle button in the header (default styles and click handling)
- Sets up a click handler for the hamburger menu when the viewport is small
There was a problem hiding this comment.
There are some layout changes to the source page that's still not polished (happy to revert this).
There's 2 things I was playing with:
- Allow for more wrapping so the page isn't so tall
- Move the media name variables into a tooltip (instead of a long region at the bottom of the page)
There was a problem hiding this comment.
I really dislike the tooltip because it makes copy/paste much more difficult.
There was a problem hiding this comment.
I think the changes to Makefile and Pipfile and urls.py are only local to get this working under MacOS. Will double check but I think this should be removed from the Bulma branch.
| </style> | ||
| <link type="text/css" rel="stylesheet" href="{% sass_src 'styles/tubesync.scss' %}" media="screen,projection"/> | ||
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css" /> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
There was a problem hiding this comment.
Isn't it just a matter of copying this from the source to the static directory?
3 participants
Closes #457
What does this do?
Removes the Materialize CSS framework and drops in Bulma.
Bulma has a pretty good design system that lets us unlock dark mode without much additional effort.
Unfinished
There are some experiments in here that we could remove: