Added more feature in "Dark Mode". i.e. Scheduling Dark Mode

[Coderxrohan]

📝 Description

I have made changes to automate the dark mode. Means the user can be able to schedule the dark mode as his choice.

📸 Screenshots / 📹 Videos

Attached is the screenshot below.

🔗 Related Issues

• I wish the scheduling should pop up when the user enables DAKR mode; otherwise, the scheduling option should be hidden. so it does not consume any sugar.

✅ Checklist

[✅] I have read and followed the [Contributing Guidelines](https://github.com/XengShi/materialYouNewTab/
blob/main/CONTRIBUTING.md).


[✅] I have tested my changes by installing them as an extension (not just running via localhost) to ensure it builds, installs, and works as expected.
[✅] I have tested these changes in at least Chrome and Firefox (other browsers if applicable).
[✅] Attached visual evidence of changes (screenshots or videos), if applicable.

[Coderxrohan]

I made changes and also worked on this further.

1. Scheduling should be enabled when the dark mode setting is enabled. Otherwise, the scheduling should be hidden in the dark mode toggle. So this will consume space in the panel.

[Coderxrohan]

@prem-k-r and @Thunder-Blaze.
Have a look please :)

[prem-k-r]

Hi Rohan, can you please move all newly added code in script.js to dark-mode.js

[Coderxrohan]

Hi Rohan, can you please move all newly added code in script.js to dark-mode.js

I will make a new dark mode file, and move that block of code to that file.

[prem-k-r]

Not like that.
there will be no addition in script.js

in dark-mode.js

document.addEventListener("DOMContentLoaded", function () {
 // Add these new constants with the other element selectors
    const scheduledDarkModeCheckbox = document.getElementById("scheduleDarkModeCheckbox");
    const scheduledDarkModeField = document.getElementById("scheduledDarkModeField");

    // Load saved schedule preferences
    const isDarkModeScheduled = localStorage.getItem("darkModeScheduled") === "true";
    scheduledDarkModeCheckbox.checked = isDarkModeScheduled;

    // Enable/disable schedule checkbox based on dark mode state
    enableDarkModeCheckbox.addEventListener("change", function() {
        const isDarkModeEnabled = this.check
      
      ... ADD REST
      
      // Initial check on page load
    if (isDarkModeScheduled) {
        scheduledDarkModeCheckbox.disabled = !enableDarkModeCheckbox.checked;
        checkAndApplyScheduledDarkMode();
    }
});

// Add these constants at the top with your other constants
const enableDarkModeCheckbox = document.getElementById("enableDarkModeCheckbox");
const scheduledDarkModeCheckbox = document.getElementById("scheduleDarkModeCheckbox");

// Add this HTML after the schedule checkbox in your settings menu
const scheduleSettingsHTML = `
    <div id="scheduleSettings" class="schedule-settings" style="display: none;">
        <div class
        
          ... ADD REST
          
          .time-input::-webkit-calendar-picker-indicator {
            filter: var(--calendar-icon-filter);
        }
    `;
    document.head.appendChild(style);
});

also html and css part here can be moved to index.html and style.css

[Coderxrohan]

I made the new dark-mode.js file and
moved that code in this js.
Moved the unwanted part to css.
As you said.
Take a look.

[Coderxrohan]

See the working

2025-01-25.22-03-34.mp4

[prem-k-r]

Yes, it working, Great work!
But there are lots of unnecessary codes

[Thunder-Blaze]

Yes, it working, Great work!
But there are lots of unnecessary codes

Yeah I thought same but I didn't tested it so idk if they are for same purpose or not

[prem-k-r]

Checked in sandbox
https://githubbox.com/Coderxrohan/materialYouNewTab/tree/main

[Coderxrohan]

Yes, it working, Great work! But there are lots of unnecessary codes

Hi Prem.
I made some changes now.
Removed that CSS or unwanted code from the main style.css file.
Reduced the unwanted code and made some changes in dark mode. js file

---

https://github.com/Coderxrohan/materialYouNewTab/blob/main/scripts/dark-mode.js

Have a look at it and suggest any changes, please!
@prem-k-r & @Thunder-Blaze

[prem-k-r]

Ok
I'll check it in the evening, rn I am busy in work

[itz-rj-here]

Just need to check if it works properly on the firefox browser....

[Coderxrohan]

Just need to check if it works properly on the firefox browser....

I have tested it on Firefox, working normally.

[itz-rj-here]

Just need to check if it works properly on the firefox browser....

I have tested it on Firefox, working normally.

fine then...

[prem-k-r]

Actually, #284 was before the dark mode toogle, it was to switch between light theme and black theme.
I think, for now we can go with this, later we have to store last light theme and last dark theme, coz same color's dark mode one might not like it.

We will be removing dark mode toggle from there to place near color palatte without text.

Auto dark mode should be hidden in dark mode on Google. If the user wants dark mode, only then will the Dakt mode schedule option be visible. This will save space in the control panel of the extension.

not really, like if someone want to edit in between,
but maybe we can make the time selector collapsable

[prem-k-r]

As for code, you have html and css in js that can be easily move to resp. files

and better to use function-based approach over class-based approach.

code by chatgpt (need reworking and adjustment):
in css

.dark-mode-schedule-settings {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: var(--accentLightTint-blue);
    border-radius: 15px;
    display: none;
}

.time-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.time-input input[type="time"] {
    padding: 5px 10px;
    border: 1px solid var(--darkColor-blue);
    border-radius: 8px;
    background-color: var(--whitishColor-blue);
    color: var(--textColorDark-blue);
    font-size: 14px;
}

.time-input input[type="time"]:focus {
    outline: none;
    border-color: var(--darkerColor-blue);
}

in dark-mode.js

document.addEventListener('DOMContentLoaded', () => {
    const storageKey = 'darkModeScheduleConfig';
    const defaultConfig = {
        enabled: false,
        start: '20:00',
        end: '06:00',
    };

    // DOM Elements
    const toggle = document.getElementById('darkModeSchedule');
    const settings = document.getElementById('darkModeScheduleSettings');
    const startInput = document.getElementById('darkModeStart');
    const endInput = document.getElementById('darkModeEnd');
    const darkModeToggle = document.getElementById('enableDarkModeCheckbox');

    let config = { ...defaultConfig };
    let checkInterval;

    function initializeScheduler() {
        // Load and apply settings
        const savedConfig = JSON.parse(localStorage.getItem(storageKey)) || defaultConfig;
        config = { ...config, ...savedConfig };

        // Set up UI
        toggle.checked = config.enabled;
        settings.style.display = config.enabled ? 'block' : 'none';
        startInput.value = config.start;
        endInput.value = config.end;

        // Add event listeners
        toggle.addEventListener('change', () => handleUpdate('toggle'));
        startInput.addEventListener('input', () => handleUpdate('time'));
        endInput.addEventListener('input', () => handleUpdate('time'));

        // Start schedule if enabled
        if (config.enabled) {
            updateDarkMode();
            startChecking();
        }
    }

    function handleUpdate(type) {
        if (type === 'toggle') {
            config.enabled = toggle.checked;
            settings.style.display = config.enabled ? 'block' : 'none';

            if (config.enabled) {
                updateDarkMode();
                startChecking();
            } else {
                stopChecking();
                setDarkMode(false);
            }
        } else if (type === 'time') {
            config.start = startInput.value;
            config.end = endInput.value;
            updateDarkMode();
        }

        saveConfig();
    }

    function updateDarkMode() {
        if (!config.enabled) return;

        const now = new Date();
        const currentTime = toMinutes(`${now.getHours()}:${now.getMinutes()}`);
        const startTime = toMinutes(config.start);
        const endTime = toMinutes(config.end);

        const isDark = startTime <= endTime
            ? currentTime >= startTime && currentTime <= endTime
            : currentTime >= startTime || currentTime <= endTime;

        setDarkMode(isDark);
    }

    function saveConfig() {
        localStorage.setItem(storageKey, JSON.stringify(config));
    }

    function setDarkMode(isActive) {
        document.documentElement.classList.toggle('dark-theme', isActive);
    }

    function toMinutes(time) {
        const [hours, minutes] = time.split(':').map(Number);
        return hours * 60 + minutes;
    }

    function startChecking() {
        if (checkInterval) clearInterval(checkInterval);
        checkInterval = setInterval(updateDarkMode, 60000); // Check every minute
    }

    function stopChecking() {
        if (checkInterval) clearInterval(checkInterval);
    }

    initializeScheduler();
});

in script.js nothing will be added

[Coderxrohan]

As for code, you have html and css in js that can be easily move to resp. files

and better to use function-based approach over class-based approach.

code by chatgpt (need reworking and adjustment): in css

.dark-mode-schedule-settings {
    margin-top: 15px;
    padding: 10px 15px;
    background-color: var(--accentLightTint-blue);
    border-radius: 15px;
    display: none;
}

.time-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.time-input input[type="time"] {
    padding: 5px 10px;
    border: 1px solid var(--darkColor-blue);
    border-radius: 8px;
    background-color: var(--whitishColor-blue);
    color: var(--textColorDark-blue);
    font-size: 14px;
}

.time-input input[type="time"]:focus {
    outline: none;
    border-color: var(--darkerColor-blue);
}

in dark-mode.js

document.addEventListener('DOMContentLoaded', () => {
    const storageKey = 'darkModeScheduleConfig';
    const defaultConfig = {
        enabled: false,
        start: '20:00',
        end: '06:00',
    };

    // DOM Elements
    const toggle = document.getElementById('darkModeSchedule');
    const settings = document.getElementById('darkModeScheduleSettings');
    const startInput = document.getElementById('darkModeStart');
    const endInput = document.getElementById('darkModeEnd');
    const darkModeToggle = document.getElementById('enableDarkModeCheckbox');

    let config = { ...defaultConfig };
    let checkInterval;

    function initializeScheduler() {
        // Load and apply settings
        const savedConfig = JSON.parse(localStorage.getItem(storageKey)) || defaultConfig;
        config = { ...config, ...savedConfig };

        // Set up UI
        toggle.checked = config.enabled;
        settings.style.display = config.enabled ? 'block' : 'none';
        startInput.value = config.start;
        endInput.value = config.end;

        // Add event listeners
        toggle.addEventListener('change', () => handleUpdate('toggle'));
        startInput.addEventListener('input', () => handleUpdate('time'));
        endInput.addEventListener('input', () => handleUpdate('time'));

        // Start schedule if enabled
        if (config.enabled) {
            updateDarkMode();
            startChecking();
        }
    }

    function handleUpdate(type) {
        if (type === 'toggle') {
            config.enabled = toggle.checked;
            settings.style.display = config.enabled ? 'block' : 'none';

            if (config.enabled) {
                updateDarkMode();
                startChecking();
            } else {
                stopChecking();
                setDarkMode(false);
            }
        } else if (type === 'time') {
            config.start = startInput.value;
            config.end = endInput.value;
            updateDarkMode();
        }

        saveConfig();
    }

    function updateDarkMode() {
        if (!config.enabled) return;

        const now = new Date();
        const currentTime = toMinutes(`${now.getHours()}:${now.getMinutes()}`);
        const startTime = toMinutes(config.start);
        const endTime = toMinutes(config.end);

        const isDark = startTime <= endTime
            ? currentTime >= startTime && currentTime <= endTime
            : currentTime >= startTime || currentTime <= endTime;

        setDarkMode(isDark);
    }

    function saveConfig() {
        localStorage.setItem(storageKey, JSON.stringify(config));
    }

    function setDarkMode(isActive) {
        document.documentElement.classList.toggle('dark-theme', isActive);
    }

    function toMinutes(time) {
        const [hours, minutes] = time.split(':').map(Number);
        return hours * 60 + minutes;
    }

    function startChecking() {
        if (checkInterval) clearInterval(checkInterval);
        checkInterval = setInterval(updateDarkMode, 60000); // Check every minute
    }

    function stopChecking() {
        if (checkInterval) clearInterval(checkInterval);
    }

    initializeScheduler();
});

in script.js nothing will be added

Thanks for reviewing code. I will make changes myself and updates it.