Starflight

[shawnb61]

Link to the theme


Starflight

Overview:
Starflight is a dark theme, with a background animation mimicking interstellar flight.  Maybe helpful for Star Trek, Star Wars, Babylon 5, etc., tv show or movie-oriented sites.  Maybe even NASA, astronomy or even astrology sites.  Or if you just want to zone out & pretend you're flying through space.  Whatever works.  

This theme is built up from the 2.1 Curve2 theme, with several features added for flexibility.

The goal is to provide a single very flexible, usable and feature-rich theme.  A theme that is usable right out of the box - no need to even build a custom banner, it dynamically builds one for you.

This theme is, in part, a demo.  Theme designers should feel free to borrow code & ideas.  It is very straightforward to copy these features over to any theme.

Features:

• Background animations.  A simple framework is provided for animations.
• Simplified yet flexible color palette.  The forum's entire palette of colors may be updated on the Current Theme admin screen.
• Even the colors for checkboxes and radio buttons are under user control.  Including their backgrounds...  No more blinding white squares on dark themes...
• Real-time color updates.
• SVG graphics can use style elements from the theme.  E.g., the hamburger icon is dynamically colored to match your palette.
• Dynamically built SVG forum banners, guaranteed to match your forum color scheme.
• Color palette is automatically propagated down into the sceditor as well.

Requirements:

• The Color Changer mod must be installed.  Or bad things happen.
• Javascript must be enabled for any of the js to work, including some admin functions as well as the animations.
• 2.1 only.

Limitations:

• Some browsers handle the animations much better than others...  Modern browsers will be fine.  This was tested with Firefox, Pale Moon, Chrome, Edge and Safari (iPhone only).

Releases:
 - v1.4 Initial release
 - v1.5 Enhance flight physics
 - v1.6 Ensure proper defaults used on initial load
 - v1.7 Color enhancements; more user control & fix some contrast issues
 - v1.8 SMF 2.1.4 enhancements
 - v1.9 Improve contrast, consistency, user control
 - v1.10 Fix typo, address console error
 - v1.11 Fix stray checkbox bug

[TwitchisMental]

Great work .

[Steve]

Indeed!

Although not my kind of style as is, it looks awesome with the Dark Reader add-on enabled in Firefox and Chrome!

[Doug Heffernan]

Definitely great work. Well done

[Antechinus]

Interesting coding exercise. Might take a look inside it.

[shawnb61]

Updated.  Enhanced the flight physics. 

(Improved scaling of star size & speed at various resolutions!)

[Steve]

Any idea why this shows as a light theme on my forum? (Does it in Firefox and Chrome)

You cannot view this attachment.

Edit: shows correctly in Edge.

[shawnb61]

Any idea why this shows as a light theme on my forum? (Does it in Firefox and Chrome)

That's bug.

To fix, go to Admin | Configuration | Current Theme.  Click on the "Reset all to default" link (at the top of the color selectors) & press SAVE.

You only need to do this once.

I have seen this a couple times.  Going from an existing CC theme to a newly installed Starflight, it sometimes retains the old CC colors.  I'm looking into that. 

[Steve]

I'm sorry Shawn, I'm just not seeing the option you're talking about, or an color selectors for that matter.

[Sir Osis of Liver]

Nor I.  Today's package in FF102.

[TwitchisMental]

Did y'all read the read me ?

Y'all will need to install this mod for it to function properly - https://custom.simplemachines.org/index.php?mod=4231

I am just guessing that this is the reason, if you do have this installed already, ignore me .

[shawnb61]

This is a bug, I can reproduce it.

The link I referred to is here... Click on this & press SAVE:
You cannot view this attachment.

[Steve]

Awesome! Installing the mod and following your instructions corrected the situation.

@TwitchisMental - of course I didn't read the read me file ... men don't read instructions ... 

[shawnb61]

 New version uploaded that should take care of the default color issue.

[Steve]

Thanks shawn. 

[shawnb61]

I think it would be fairly straightforward to add this background animation to other themes, e.g., if you already have a highly customized theme for your forum.

3 steps:
 - Add the canvas & canvas-wrapper div to your template, below the body, just like in this theme.  (Don't forget the closing div.)
 - Copy over the canvas & canvas-wrapper css.  Note that adding the canvas initially disrupted some of the stylings applied to the body, since it changed some sibling & parent-child relationships between elements; this was fixed in this theme by adding the canvas-wrapper and moving those stylings there from the body element in the css.  If your existing theme has a lot of references to the body element, bear this in mind.
 - Copy over the animation code from this theme.js into your theme.js.  Any chunk of code where you see "animation" in the comments.  Same location/sequence.

Enjoy!

[shawnb61]

I recently learned that Drake shares my thoughts on using the browser default foreground/background colors for checkboxes & radio buttons...  Ideally, they match the theme.

You cannot view this attachment.

[shawnb61]

v1.7 uploaded - Color enhancements; more user control & fix some contrast issues

[W2NAP]

Question, on responsive side of things using a test phone old iphone6 with safari and ff the post text is unreadable (its really dark) but on desktop the same text is white, is there a way to make the post text white across the platforms?

[Diego Andrés]

Which text, could you attach a screenshot?