Skip to content

[Feature]: Easy dark/light mode #356

Description

@XurxoMF

Problem

I've been rebuilding my portfolio with Instatic to learn how to use it, discover features...

While working on it I couldn't find how to add a dark/light theme...

Background variables have a base color (light) and an alt color (dark) but I can't find how to add a theme switch or something. Maybe the alt color is not for that neither...

Proposed solution

I don't really know how to improve/solve this as it may be a solution already but I just culdn't find it but I think that adding dark/light filds on the color palette customization and then a button function or something to toggle that theme easily could be amazing!

Also, if you've a light theme like it's my case right now, if you se the bg to white and the fonts to black, if you enable the dashboard dark UI the canvas will change background to black too so you can't see the text on top. I set the body background to --bg-body and text to --text-body but the background is still black but once I open the website then the background is white... is sooo confusing.

Alternatives considered

Couldn't think about any... tried adding class dark/light, data-theme dark/light... to the HTML and body elemento but nothing worked... some times is changes the background only, other changes the font only... I don't understand what's happening...

Area

Visual editor

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions