theme-toggle-example/index.html at master · danielvigaru/theme-toggle-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Raleway&display=swap"
            rel="stylesheet"
        />
        <title>Theme toggler</title>
    </head>
    <body>
        <nav class="theme dark-theme">
            <span class="logo">
                IPSUM NEWS
            </span>

            <button class="theme-toggle-btn" id="theme-toggle-btn">
                <svg
                    class="theme dark-theme"
                    id="theme-toggle"
                    xmlns="http://www.w3.org/2000/svg"
                    width="472.39"
                    height="472.39"
                    viewBox="0 0 472.39 472.39"
                >
                    <g class="icon-star">
                        <path
                            d="M403.21,167V69.18H305.38L236.2,0,167,69.18H69.18V167L0,236.2l69.18,69.18v97.83H167l69.18,69.18,69.18-69.18h97.83V305.38l69.18-69.18Zm-167,198.17a129,129,0,1,1,129-129A129,129,0,0,1,236.2,365.19Z"
                        />
                    </g>
                    <g class="icon-circle">
                        <circle class="cls-1" cx="236.2" cy="236.2" r="103.78" />
                    </g>
                </svg>
            </button>
        </nav>

        <header class="theme dark-theme">
            <h1> Lorem ipsum strikes again</h1>
        </header>

        <main class="theme dark-theme">
            <article>
                <p>
                    Lorem ipsum has been spotted again filling precious space that should have been used by a real
                    article. More details below.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ad nihil commodi odit natus aspernatur,
                    molestiae, voluptate, tempora ea assumenda labore iusto nesciunt itaque voluptatum quos quidem! A,
                    eaque maiores?
                </p>
                <p>
                    Phasellus laoreet ligula et lectus tempus vestibulum. Class aptent taciti sociosqu ad litora
                    torquent per conubia nostra, per inceptos himenaeos. Pellentesque lobortis sapien feugiat egestas
                    fringilla. Donec laoreet condimentum sollicitudin. Nulla mattis tortor sit amet ante pulvinar
                    sagittis. Praesent mollis aliquam mauris nec imperdiet. Etiam nibh erat, consectetur vel consectetur
                    a, aliquam sit amet diam. Nullam mi nunc, rutrum vitae eleifend sed, sollicitudin id odio.
                    Vestibulum faucibus condimentum rutrum.
                </p>
                <p>
                    Phasellus aliquet varius diam quis lobortis. Vestibulum mi urna, malesuada nec posuere vel, porta
                    faucibus sem. Aliquam fringilla arcu dolor, in accumsan nisl mollis id. Fusce volutpat diam
                    consequat, facilisis neque at, egestas risus. Duis ornare condimentum aliquam. Quisque facilisis
                    cursus tortor ut placerat. Praesent dictum lorem et sem egestas elementum. Etiam luctus luctus erat
                    sed volutpat. Vestibulum maximus nunc sit amet ligula dignissim consequat. Curabitur pulvinar dui et
                    dignissim viverra.
                </p>
            </article>
        </main>

        <footer class="theme dark-theme">© 3022 Thomas the Tank Engine</footer>
        <script src="./script.js"></script>
    </body>
</html>