Dark Mode - follow-up

Hi, a while ago I posted asking if there was a dark mode for Squiffy, and someone said I could just toggle DevTools and adjust the CSS.

The only problem is: I have no idea how that works :P

If anyone is willing to show me what exactly I need to change, I'd be very grateful!

When you click the 'Build' button in the editor, it creates a file called "style.css", in the same directory as the Squiffy project file ("title.sq"). The .css file determines how your game's HTML pages look. You could edit that file, but It gets overwritten every time you 'Build' the game, so changes made to the "style.css" file are very temporary.

To make changes that will remain in place, here's what I do:

  • Go to the Squiffy program directory. On my computer, running Windows 10, the directory is --
    C:\Program Files (x86)\Squiffy\resources\app\node_modules\squiffy

In there is the file "style.template.css".
-- First, change the name of the file to something else -- like "original_style.template.css". (You may need to change the Squiffy directory "permissions" settings first, so files in it aren't "read-only".) This way, you keep the original "default" style.css formatting to go back to if you need it.

-- Open up the file in a text editor. Insert the following at the top of the page:

body {
background-color: black;
color: white;

. . . . for black background with white text.

Now save the file AS . . . "style.template.css". (I also create a shortcut to this file in the game project directory, so it's easier to find and edit.)

But that only changes the game's CSS, not the squiffy editor, right?

Log in to post a reply.