Update to Bulma theme / add dark mode by StefanCodes · Pull Request #1353 · meeb/tubesync

StefanCodes · 2025-12-28T21:42:15Z

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.

Changes

remove Materialize CSS
remove SASS
add Bulma and CSS-based FontAwesome
(the big change) refactor all views to use Bulma CSS and general layout principles
adds cookie-based dark mode persistence
adds dark mode toggle button to main navbar
defines dark mode CSS tokens derived from light mode Tubesync colors

Additional changes

Took a swing at updating the Sources list page. Happy to revert or move to a different PR:

StefanCodes · 2025-12-28T22:02:29Z

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.

StefanCodes · 2025-12-28T22:03:20Z

      }
    </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" />


CDN Bulma. Maybe we should use a local copy?

I absolutely prefer a local copy.

Local would be essential.

Done. I pulled Bulma and a CSS-based FontAwesome to a local vendor directory in ce182dd?w=1 and removed the previous SASS-based FA.

StefanCodes · 2025-12-28T22:07:03Z

    <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>


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.

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.

I don't think a dark mode button needs to sacrifice that design decision! I pulled all the JS and replaced the dark mode toggle with a back end version that sets a cookie instead (2c3cd20?w=1).

That also resolves a fouc issue that the JS solution introduced! 🥂

StefanCodes · 2025-12-28T22:13:32Z

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)

I really dislike the tooltip because it makes copy/paste much more difficult.

Reverted all the nonessential changes to the source add/edit pages. The move to Bulma is already more than enough for one PR.

StefanCodes · 2026-02-04T06:29:49Z

@StefanCodes Heads up. There's a conflict that needs to be resolved.

Thanks! I merged them in.

Co-authored-by: tcely <tcely@users.noreply.github.com>

rockymtngeek · 2026-10-20T16:55:53Z

@StefanCodes — First, I appreciate the work you're doing to test and implement a native dark mode for TubeSync!

I've transitioned to using Devolutions Remote Desktop Manager (RDM) for most of my home-lab management, and its embedded browser doesn't currently offer a native way to apply dark mode to websites that don't support it themselves. This makes a native dark-mode option in TubeSync particularly appealing.

I run TubeSync on Unraid and successfully built and tested the dark_mode branch (ec2e8eab) in a separate Docker container, keeping my production installation untouched.

The good news: The dark/light theme toggle works nicely, including directly within RDM's embedded browser. I particularly like the darker color palette, subtle shadows around the dashboard sections, and muted gold hover effects.

I did encounter two issues while building the image:

FFmpeg build date: FFMPEG_DATE was unset, resulting in a 404 for the autobuild-/checksums.sha256 URL. Supplying --build-arg FFMPEG_DATE=2026-10-19-19-51 resolved the issue.
SCSS compilation: The build failed with Unknown command: 'compilescss'. Although django-sass-processor was included in the Pipfile, sass_processor was missing from Django's INSTALLED_APPS. Adding it to tubesync/tubesync/settings.py resolved the error and allowed the image to build successfully.

The resulting container starts and the interface functions as expected. It identifies itself as TubeSync 0.17.2, so I'm keeping it separate from my current production installation.

I haven't tested actual video downloads yet, but plan to do so with a limited test source.

Thanks again for working on this feature. It's great to see native dark mode functioning in TubeSync, and I hope these build observations are helpful!

tcely · 2026-10-20T20:59:28Z

@rockymtngeek

For a proper integration, you should take this branch, ~~then update the Dockerfile by removing compilescss entirely.~~ which has already removed the compilescss command from the Dockerfile.

After that, you would merge the current main into your branch and build from that for the final image.

It looks like there are going to be a few merge conflicts and new items, since v0.18.0, which will also need to be adjusted for the styles used by this branch.

It's expected and normal for a few build arguments to be required.

tubesync/.github/workflows/release.yaml

Lines 80 to 85 in e5af7bf

    
                 build-args: | 
        
                   IMAGE_NAME=${{ needs.info.outputs.IMAGE_NAME }} 
        
                   FFMPEG_DATE=${{ needs.info.outputs.ffmpeg-date }} 
        
                   FFMPEG_VERSION=${{ needs.info.outputs.ffmpeg-version }} 
        
                   YTDLP_DATE=${{ fromJSON(needs.info.outputs.ytdlp-latest-release).tag.name }} 
        
                   YTDLP_EJS_VERSION=${{ fromJSON(needs.info.outputs.ejs-latest-release).tag.name }}

tcely

This is a new dashboard item introduced in v0.18.1. So, it will need adjustments for the styles on this branch.

tcely · 2026-10-21T00:35:58Z

      </a>
    </div>
  </div>
  <div class="col s12 l6">


Suggested change

<div class="column is-half-desktop">

tcely · 2026-10-21T00:37:20Z

    </div>
  </div>
  <div class="col s12 l6">
    <div class="card dashcard">


Suggested change

<div class="box has-text-centered">

tcely · 2026-10-21T00:44:28Z

            <i class="fa-solid fa-scroll fa-4x"></i>
          </div>
          <div class="desc truncate">Logs</div>
          <div class="truncate">View, search, and/or filter logs</div>


Suggested change

<div class="subtitle is-6">View, search, and/or filter logs</div>

tcely · 2026-10-21T00:45:12Z

          <div class="center-align">
            <i class="fa-solid fa-scroll fa-4x"></i>
          </div>
          <div class="desc truncate">Logs</div>


Suggested change

<div class="title is-3">Logs</div>

tcely · 2026-10-21T01:08:46Z

This entire file needs to be reviewed and converted to the styles on this branch.

github-project-automation Bot added this to Status Dec 28, 2025

StefanCodes added 3 commits December 28, 2025 13:55

wip

e3c0f95

wip

d6ccad5

Final batch of CSS fixes to try to better match the original layout

aff95a7

StefanCodes force-pushed the dark_mode branch from 6ac99de to aff95a7 Compare December 28, 2025 21:55

StefanCodes commented Dec 28, 2025

View reviewed changes

StefanCodes mentioned this pull request Dec 28, 2025

Feature Request: Dark Mode 🕶 #457

Open

tcely moved this to In Progress in Status Dec 28, 2025

tcely reviewed Dec 28, 2025

View reviewed changes

Comment thread tubesync/common/templates/base.html Outdated

tcely assigned StefanCodes Jan 31, 2026

This comment was marked as resolved.

Sign in to view

StefanCodes added 11 commits February 2, 2026 21:07

Add local Bulma and FontAwesome

ce182dd

Remove old SASS FA assets

8c2fc11

Remove JS-based theme selection in favour of server side + cookie

2c3cd20

Revert source add/edit layout changes

1ecb622

Make button label/icon positions consistent

c361c1e

Revert unrelated changes to Makefile, Pipfile, urls.py

2f0816e

Fix media item table layout

c7be202

Remove Js=S hamburger menu

812dbe7

Merge upstream/main into dark_mode

d2d08ca

Tone down some of the dark mode colors

984b3c0

Merge changes from upstream

076097b

tcely reviewed Feb 4, 2026

View reviewed changes

Comment thread tubesync/sync/templates/sync/tasks.html Outdated

tcely reviewed Feb 4, 2026

View reviewed changes

Comment thread tubesync/sync/templates/sync/tasks.html Outdated

tcely reviewed Feb 4, 2026

View reviewed changes

Comment thread tubesync/sync/templates/sync/tasks.html Outdated

tcely reviewed Feb 4, 2026

View reviewed changes

Comment thread tubesync/sync/templates/sync/tasks.html Outdated

StefanCodes and others added 4 commits February 4, 2026 21:19

Update tubesync/sync/templates/sync/tasks.html

0e769f6

Co-authored-by: tcely <tcely@users.noreply.github.com>

Update tubesync/sync/templates/sync/tasks.html

0f7ea26

Co-authored-by: tcely <tcely@users.noreply.github.com>

Update tubesync/sync/templates/sync/tasks.html

a911e65

Co-authored-by: tcely <tcely@users.noreply.github.com>

Update tubesync/sync/templates/sync/tasks.html

aa6f635

Co-authored-by: tcely <tcely@users.noreply.github.com>

meeb mentioned this pull request Mar 22, 2026

Modernize TubeSync Frontend & Codebase Cleanup #1402

Open

4 of 7 tasks

tcely added 3 commits April 27, 2026 01:59

Merge branch 'main' into dark_mode

0abd13a

Use the (previous) local FontAwesome

36b81e8

Restructure the local Bulma

85d07be

tcely changed the base branch from main to test-StefanCodes-pr-1353 April 27, 2026 22:16

tcely marked this pull request as ready for review April 27, 2026 22:17

fix: rename the middleware class

ec2e8ea

tcely changed the title ~~WIP: Update to Bulma theme / add dark mode~~ Update to Bulma theme / add dark mode Apr 27, 2026

chore: remove compilescss command from the Dockerfile

302a359

tcely changed the base branch from test-StefanCodes-pr-1353 to main October 20, 2026 21:16

tcely changed the base branch from main to test-StefanCodes-pr-1353 October 20, 2026 21:20

tcely added 2 commits October 20, 2026 17:29

Merge branch 'test-StefanCodes-pr-1353' into dark_mode

50ab22c

chore: avoid ruff default rules expansion

e746d0e

tcely force-pushed the dark_mode branch from ad227dc to e746d0e Compare October 20, 2026 23:16

tcely added 3 commits October 20, 2026 19:31

Merge branch 'test-StefanCodes-pr-1353' into dark_mode

5d7f93f

Merge branch 'test-StefanCodes-pr-1353' into dark_mode

c26b8f4

Merge branch 'test-StefanCodes-pr-1353' into dark_mode

ed415ed

tcely requested changes Oct 21, 2026

View reviewed changes

chore: clean up white-space

c3e64a1

tcely reviewed Oct 21, 2026

View reviewed changes

tcely added the help wanted Extra attention is needed label Oct 21, 2026


	<div class="subtitle is-6">View, search, and/or filter logs</div>

Conversation

StefanCodes commented Dec 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this do?

Changes

Additional changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This comment was marked as resolved.

StefanCodes commented Feb 4, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rockymtngeek commented Oct 20, 2026

Uh oh!

tcely commented Oct 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tcely left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

StefanCodes commented Dec 28, 2025 •

edited

Loading

tcely commented Oct 20, 2026 •

edited

Loading