GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4

Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom
gitauto-wes/issue-3-20250215-215001
Open

GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom
gitauto-wes/issue-3-20250215-215001

Conversation

@gitauto-for-dev

@gitauto-for-devgitauto-for-devBot commented Feb 16, 2025•
edited
Loading

Copy link
Copy Markdown

Resolves#3

Why is this feature needed?

The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.

What and how are we changing? Why this approach?

We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.

What actions are required from users?

There is no immediate action required from users. However, developers should:

  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.

How does it work? (Technical details)

This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:

  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.

The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.

Is it backwards compatible?

Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.

Any other considerations?

  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot mentioned this pull request Feb 16, 2025
Open
@vercel

vercelBot commented Feb 16, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am

wesnishio
wesnishio reviewed Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)

1 participant

@wesnishio
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4
Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Open
GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#3
Why is this feature needed?
The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.
What and how are we changing? Why this approach?
We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.
What actions are required from users?
There is no immediate action required from users. However, developers should:
  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.
How does it work? (Technical details)
This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:
  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.
The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.
Is it backwards compatible?
Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.
Any other considerations?
  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot
mentioned this pull request
Feb 16, 2025

Open

@vercel
vercelBot
commented
Feb 16, 2025

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am
wesnishio
wesnishio
reviewed
Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)


1 participant

@wesnishio

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4
Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Open
GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#3
Why is this feature needed?
The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.
What and how are we changing? Why this approach?
We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.
What actions are required from users?
There is no immediate action required from users. However, developers should:
  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.
How does it work? (Technical details)
This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:
  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.
The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.
Is it backwards compatible?
Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.
Any other considerations?
  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot
mentioned this pull request
Feb 16, 2025

Open

@vercel
vercelBot
commented
Feb 16, 2025

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am
wesnishio
wesnishio
reviewed
Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)


1 participant

@wesnishio

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4
Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Open
GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#3
Why is this feature needed?
The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.
What and how are we changing? Why this approach?
We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.
What actions are required from users?
There is no immediate action required from users. However, developers should:
  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.
How does it work? (Technical details)
This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:
  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.
The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.
Is it backwards compatible?
Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.
Any other considerations?
  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot
mentioned this pull request
Feb 16, 2025

Open

@vercel
vercelBot
commented
Feb 16, 2025

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am
wesnishio
wesnishio
reviewed
Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)


1 participant

@wesnishio

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4
Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Open
GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#3
Why is this feature needed?
The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.
What and how are we changing? Why this approach?
We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.
What actions are required from users?
There is no immediate action required from users. However, developers should:
  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.
How does it work? (Technical details)
This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:
  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.
The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.
Is it backwards compatible?
Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.
Any other considerations?
  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot
mentioned this pull request
Feb 16, 2025

Open

@vercel
vercelBot
commented
Feb 16, 2025

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am
wesnishio
wesnishio
reviewed
Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)


1 participant

@wesnishio

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4
Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Open
GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#3
Why is this feature needed?
The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.
What and how are we changing? Why this approach?
We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.
What actions are required from users?
There is no immediate action required from users. However, developers should:
  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.
How does it work? (Technical details)
This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:
  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.
The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.
Is it backwards compatible?
Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.
Any other considerations?
  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot
mentioned this pull request
Feb 16, 2025

Open

@vercel
vercelBot
commented
Feb 16, 2025

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am
wesnishio
wesnishio
reviewed
Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)


1 participant

@wesnishio

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4
Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Open
GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#3
Why is this feature needed?
The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.
What and how are we changing? Why this approach?
We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.
What actions are required from users?
There is no immediate action required from users. However, developers should:
  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.
How does it work? (Technical details)
This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:
  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.
The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.
Is it backwards compatible?
Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.
Any other considerations?
  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot
mentioned this pull request
Feb 16, 2025

Open

@vercel
vercelBot
commented
Feb 16, 2025

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am
wesnishio
wesnishio
reviewed
Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)


1 participant

@wesnishio

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
GitAuto: Turn this website color into warmer (it is dark and lonly now...) - #4
Open
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Open
GitAuto: Turn this website color into warmer (it is dark and lonly now...)#4
gitauto-for-dev[bot] wants to merge 1 commit into
mainfrom 
gitauto-wes/issue-3-20250215-215001
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#3
Why is this feature needed?
The website currently uses a very dark color tone that makes it feel cold and uninviting. By introducing warmer background colors, we aim to create a more welcoming and visually pleasant experience for users.
What and how are we changing? Why this approach?
We are updating the color variables in the assets/sass/libs/_vars.scss file. Specifically, the background colors for the "invert" theme have been changed from a dark shade (#1e252d) to a warmer tone (#331e1e). This approach was chosen because it directly targets the underlying Sass variables responsible for the website's color palette, ensuring a consistent change across all impacted components while keeping the codebase clean and maintainable.
What actions are required from users?
There is no immediate action required from users. However, developers should:
  • Recompile the Sass files to reflect the updated variables.
  • Clear any relevant caches if the changes do not appear immediately.
How does it work? (Technical details)
This pull request modifies the SCSS variables in the assets/sass/libs/_vars.scss file under the "invert" theme section:
  • The "bg" and "bg-alt" values have been updated from #1e252d to #331e1e.
  • These variables are used throughout the site to set the background color of various elements.
The change ensures that the website adopts a warmer appearance without impacting the overall structure or functionality of the design.
Is it backwards compatible?
Yes, this change is fully backwards compatible. It is a purely cosmetic update that adjusts the color scheme without altering any functionality or layout.
Any other considerations?
  • After merging the change, please ensure to rebuild the CSS to apply the new styles across the website.
  • Be mindful of any browser caching issues that might cause the old styles to persist.
  • Further adjustments or refinements to the palette may be considered in future updates if necessary.
git fetch origin
git checkout gitauto-wes/issue-3-20250215-215001
git pull origin gitauto-wes/issue-3-20250215-215001

@gitauto-for-devgitauto-for-devBot
mentioned this pull request
Feb 16, 2025

Open

@vercel
vercelBot
commented
Feb 16, 2025

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎
NameStatusPreviewCommentsUpdated (UTC)
sample-html-css-website✅ Ready (Inspect)Visit Preview💬 Add feedbackFeb 16, 2025 5:55am
wesnishio
wesnishio
reviewed
Feb 16, 2025
View reviewed changes
Comment threadassets/sass/libs/_vars.scss
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishiowesnishio left review comments

Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Turn this website color into warmer (it is dark and lonly now...)


1 participant

@wesnishio