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

Coderxrohan · 2025-01-25T13:46:54Z

📝 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 · 2025-01-25T13:52:07Z

I made changes and also worked on this further.

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 · 2025-01-25T13:53:57Z

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

prem-k-r · 2025-01-25T13:56:47Z

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

index.html

Coderxrohan · 2025-01-25T14:18:58Z

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 · 2025-01-25T15:40:20Z

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 · 2025-01-25T16:30:49Z

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 · 2025-01-25T16:37:02Z

See the working

2025-01-25.22-03-34.mp4

prem-k-r · 2025-01-26T05:40:21Z

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

Thunder-Blaze · 2025-01-26T05:42:01Z

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

Coderxrohan · 2025-01-27T06:48:54Z

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 · 2025-01-27T06:50:42Z

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

itz-rj-here · 2025-01-27T06:56:04Z

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

Coderxrohan · 2025-01-27T09:00:21Z

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

I have tested it on Firefox, working normally.

itz-rj-here · 2025-01-27T09:01:40Z

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 · 2025-01-28T14:52:35Z

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 · 2025-01-28T15:01:01Z

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 · 2025-01-29T03:35:19Z

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.

itz-rj-here · 2025-03-11T15:21:42Z

@prem-k-r wsup with this pr?

prem-k-r · 2025-03-11T15:31:55Z

@prem-k-r wsup with this pr?

It's a great idea, we can go ahead.
Need refactoring, too much duplicate and unnecessary codes.

Copilot

Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

index.html: Language not supported

Comments suppressed due to low confidence (1)

scripts/script.js:1893

There are multiple DOMContentLoaded event listeners binding similar functionality. Consider consolidating them into a single listener to avoid potential conflicts and duplicate event registrations.

document.addEventListener("DOMContentLoaded", () => {

Copilot · 2025-04-06T20:54:05Z

scripts/script.js

+        if (!isDarkModeEnabled) {
+            // If dark mode is disabled, disable scheduling
+            scheduledDarkModeCheckbox.checked = false;
+            localStorage.setItem("darkModeScheduled", false);


This line stores a boolean value while the rest of the code compares against the string "true". Store the value as a string ("false") for consistency and to avoid potential mismatches.

Suggested change

localStorage.setItem("darkModeScheduled", false);

localStorage.setItem("darkModeScheduled", "false");

Coderxrohan added 2 commits January 25, 2025 19:07

Update script.js

6c1421b

Update index.html

20ba807

prem-k-r reviewed Jan 25, 2025

View reviewed changes

index.html Outdated Show resolved Hide resolved

prem-k-r added the enhancement New feature or request label Jan 25, 2025

Coderxrohan added 3 commits January 25, 2025 20:44

Update index.html

fbf3f6c

Update style.css

7d6357a

Create dark-mode.js

9a9d496

prem-k-r added the changes required PR requires updates based on review feedback label Jan 25, 2025

Coderxrohan added 2 commits January 27, 2025 12:16

Update style.css

f309656

Update dark-mode.js

f0adce0

itz-rj-here and others added 2 commits January 27, 2025 15:01

Merge branch 'main' into main

c6090d1

Update index.html

905f8a1

prem-k-r requested a review from XengShi February 3, 2025 11:50

prem-k-r requested a review from Copilot April 6, 2025 20:53

Copilot AI reviewed Apr 6, 2025

View reviewed changes

	localStorage.setItem("darkModeScheduled", false);
	localStorage.setItem("darkModeScheduled", "false");

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

Coderxrohan commented Jan 25, 2025

📝 Description

📸 Screenshots / 📹 Videos

🔗 Related Issues

✅ Checklist

Uh oh!

Coderxrohan commented Jan 25, 2025

Uh oh!

Coderxrohan commented Jan 25, 2025

Uh oh!

prem-k-r commented Jan 25, 2025

Uh oh!

Uh oh!

Coderxrohan commented Jan 25, 2025

Uh oh!

prem-k-r commented Jan 25, 2025

Uh oh!

Coderxrohan commented Jan 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Coderxrohan commented Jan 25, 2025

Uh oh!

prem-k-r commented Jan 26, 2025

Uh oh!

Thunder-Blaze commented Jan 26, 2025

Uh oh!

Coderxrohan commented Jan 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Uh oh!

prem-k-r commented Jan 27, 2025

Uh oh!

itz-rj-here commented Jan 27, 2025

Uh oh!

Coderxrohan commented Jan 27, 2025

Uh oh!

itz-rj-here commented Jan 27, 2025

Uh oh!

prem-k-r commented Jan 28, 2025

Uh oh!

prem-k-r commented Jan 28, 2025

Uh oh!

Coderxrohan commented Jan 29, 2025

Uh oh!

itz-rj-here commented Mar 11, 2025

Uh oh!

prem-k-r commented Mar 11, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Coderxrohan commented Jan 25, 2025 •

edited

Loading

Coderxrohan commented Jan 27, 2025 •

edited

Loading