kiwiirc-plugins/darkmode.html at master · CoryChaplin/kiwiirc-plugins · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template id="darkmode">
  <div class="kiwi-statebrowser-btnChgTheme">
    <a @click="buttonClicked" :title="title" data-step="5">
        <i class="fa" :class="iconClass" aria-hidden="true"></i>
    </a>
  </div>
</template>

<script>
    // Color-mode toggle for the EuropNet theme.
    // The plugin owns the logic and writes a single resolved attribute on <html>:
    //   document.documentElement.dataset.mode = "light" | "dark"
    // The theme CSS only reads :root[data-mode="dark"] — no theme swapping.
    // Mode is persisted in localStorage; dark is opt-in via the manual toggle.
    //
    // OS auto-switch TEMPORARILY DISABLED (founder: don't surprise existing users by
    // flipping them to dark from their system setting). The auto machinery below is
    // kept dormant — to re-enable later: add 'auto' back to MODES and default to it.
    kiwi.plugin('darkmode', function(kiwi, log) {
        const STORAGE_KEY = 'europnet-color-mode';
        const DARK_MEDIA = '(prefers-color-scheme: dark)';
        const MODES = ['light', 'dark']; // 'auto' removed for now — manual light/dark only
        const DEFAULT_MODE = 'light';

        function getMode() {
            let stored;
            try { stored = window.localStorage.getItem(STORAGE_KEY); } catch (e) { stored = null; }
            return MODES.includes(stored) ? stored : DEFAULT_MODE;
        }

        function setMode(mode) {
            try { window.localStorage.setItem(STORAGE_KEY, mode); } catch (e) { /* storage blocked — session only */ }
        }

        function osIsDark() {
            return !!(window.matchMedia && window.matchMedia(DARK_MEDIA).matches);
        }

        function resolve(mode) {
            return mode === 'auto' ? (osIsDark() ? 'dark' : 'light') : mode;
        }

        // Apply the resolved mode to <html> so the theme CSS can react.
        function apply(mode) {
            document.documentElement.dataset.mode = resolve(mode);
        }

        // Resolve + apply on startup before the button mounts.
        apply(getMode());

        const button = new kiwi.Vue({
            template: '#darkmode',
            data: {
                mode: getMode(),
            },
            computed: {
                // Icon shows the action (what a click switches TO), not the current mode:
                // light → moon (click to go dark), dark → sun (click to go light).
                iconClass() {
                    if (this.mode === 'light') return 'fa-moon-o';
                    if (this.mode === 'dark') return 'fa-sun-o';
                    return 'fa-adjust';
                },
                // Text matches the icon: it announces the action, not the current mode.
                title() {
                    if (this.mode === 'auto') return 'Thème : automatique (suit le système)';
                    return this.mode === 'dark' ? 'Passer en clair' : 'Passer en sombre';
                },
            },
            methods: {
                // Cycle auto → sombre → clair → auto. Manual choice overrides the OS.
                buttonClicked() {
                    const next = MODES[(MODES.indexOf(this.mode) + 1) % MODES.length];
                    this.mode = next;
                    setMode(next);
                    apply(next);
                    if (kiwi.state.ui.is_narrow) {
                        kiwi.state.$emit('statebrowser.hide');
                    }
                },
            },
        });

        // Follow the OS only while in auto (the icon shows the chosen mode, not the OS state).
        const mql = window.matchMedia(DARK_MEDIA);
        const onOsChange = () => {
            if (getMode() === 'auto') apply('auto');
        };
        if (mql.addEventListener) {
            mql.addEventListener('change', onOsChange);
        } else if (mql.addListener) {
            mql.addListener(onOsChange); // older Safari
        }

        kiwi.addUi('browser', button.$mount().$el);
    });
</script>
<style media="screen">
/* Absolute top-rail control, mirroring the native settings cog
   (.kiwi-statebrowser-appsettings, also absolute at top:0 in StateBrowser.vue).
   The tools container has no layout, so flowing isn't an option here.
   left clears the cog (32px) + usermenu — hand-tuned offset, no flex source to hook. */
.kiwi-statebrowser-btnChgTheme {
    position: absolute;
    top: 0;
    left: 86px;
    z-index: 1;
    width: 32px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

/* Rail ink tokens — the rail stays dark in both color modes, so --rail-fg reads in either.
   Muted at rest, full on hover, matching the rest of the rail's icon idiom. */
.kiwi-statebrowser-btnChgTheme .fa {
    font-size: 17px;
    color: var(--rail-muted);
    transition: color .2s;
}

.kiwi-statebrowser-btnChgTheme a:hover .fa {
    color: var(--rail-fg);
}
</style>