Skriti mož Posts - Answer Overflow

Skriti mož

•Created by Skriti mož on 2/23/2024 in #front-end

Special button effect on hover

Hi, does anyone have an idea on how to approach this effect for a button: https://www.poppr.be/en; where there is a kind of radial and linar multiple single color effect from the bottom?

20 replies

KPCKevin Powell - Community

•Created by Skriti mož on 2/7/2024 in #front-end

Auto-Scaling SVG TEXT ---> beside auto-scaling svg shapes!

31 replies

KPCKevin Powell - Community

•Created by Skriti mož on 2/6/2024 in #front-end

Text and object together

30 replies

KPCKevin Powell - Community

•Created by Skriti mož on 1/31/2024 in #front-end

THE BEST SECRET EVER:

button{ all:unset; } now you can style your button however you want!

10 replies

KPCKevin Powell - Community

•Created by Skriti mož on 1/24/2024 in #front-end

svg with color-scheme: dark light, automatic BUT BACKGROUND!

Hi, I have this website https://goetzeiscool.github.io/presernove-poezije/. color-scheme: dark light; is used, so I don't have to set any variables for colors. with the svg-s (for bottom navigation) having svg path{ fill:currentColor } the svg-s also change color, which is what I want! However!!!! The problem: I want the transparent parts of the svg-s to have the opposite color of fill:currentColor, meaning that when the font/svg is white, the background should be the opposite color, black; and vice versa, which is based on hte color-scheme

66 replies

KPCKevin Powell - Community

•Created by Skriti mož on 1/22/2024 in #front-end

color-scheme: dark light; and user enabled theme change with JS

Hi, I want to ask what the best way to do the following is: 1. I want to use

color-scheme: dark light;

color-scheme: dark light;

, 2. have JS recognize which scheme the user has enabled 3. based on which scheme the user has, a button would be used to change to the opposite theme. 4. I do not want to additionally define what dark/light theme would be like, like we would usually do without color-scheme in CSS. so I have this code

html {
  color-scheme: dark light;
}

html {
  color-scheme: dark light;
}

ChatGPT says I should have additionally defined what dark/light theme would be like, like we would usually do without color-scheme in CSS - which I do not want.

        html[data-theme="light"] {
            background-color: white;
            color: black;
        }

        html[data-theme="dark"] {
            background-color: black;
            color: white;
        }

        html[data-theme="light"] {
            background-color: white;
            color: black;
        }

        html[data-theme="dark"] {
            background-color: black;
            color: white;
        }

so with JS , I would detect their scheme and change the theme, but now it is made by calling to "data-theme" (which I don't know what it is) and calling on the additionally CSS definitions of dark and light (which I do not want to use).

// Detect the user's preferred color scheme
        var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

        // Set the initial theme
        var currentTheme = prefersDarkScheme ? "dark" : "light";
        document.html.setAttribute("data-theme", currentTheme);

        // Add a listener for the button click
        document.getElementById("theme-switcher").addEventListener("click", function() {
            // Toggle the color scheme
            currentTheme = currentTheme === "dark" ? "light" : "dark";
            document.html.setAttribute("data-theme", currentTheme);
        });

// Detect the user's preferred color scheme
        var prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;

        // Set the initial theme
        var currentTheme = prefersDarkScheme ? "dark" : "light";
        document.html.setAttribute("data-theme", currentTheme);

        // Add a listener for the button click
        document.getElementById("theme-switcher").addEventListener("click", function() {
            // Toggle the color scheme
            currentTheme = currentTheme === "dark" ? "light" : "dark";
            document.html.setAttribute("data-theme", currentTheme);
        });

8 replies

Gaming

Programming