GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...) - #6

Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom
gitauto-wes/issue-5-20250215-224410
Open

GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom
gitauto-wes/issue-5-20250215-224410

Conversation

@gitauto-for-dev

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

Copy link
Copy Markdown

Resolves#5

Why is this feature needed?

The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.

What and how are we changing? Why this approach?

We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:

  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).

These changes were selected to provide a striking contrast and bring more energy to the website's design.

What actions are required from users?

Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.

How does it work? (Technical details)

The changes are implemented in the Sass variables file:

  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.

After merging this PR, running the project's build process will apply the new theme automatically.

Is it backwards compatible?

Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.

Any other considerations?

  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)

0 participants

, '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 theme and colors into vivid and bright ones (it is dark and lonly now...) - #6
Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Open
GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#5
Why is this feature needed?
The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.
What and how are we changing? Why this approach?
We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:
  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).
These changes were selected to provide a striking contrast and bring more energy to the website's design.
What actions are required from users?
Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.
How does it work? (Technical details)
The changes are implemented in the Sass variables file:
  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.
After merging this PR, running the project's build process will apply the new theme automatically.
Is it backwards compatible?
Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.
Any other considerations?
  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)


0 participants


, '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 theme and colors into vivid and bright ones (it is dark and lonly now...) - #6
Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Open
GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#5
Why is this feature needed?
The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.
What and how are we changing? Why this approach?
We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:
  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).
These changes were selected to provide a striking contrast and bring more energy to the website's design.
What actions are required from users?
Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.
How does it work? (Technical details)
The changes are implemented in the Sass variables file:
  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.
After merging this PR, running the project's build process will apply the new theme automatically.
Is it backwards compatible?
Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.
Any other considerations?
  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)


0 participants


, '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 theme and colors into vivid and bright ones (it is dark and lonly now...) - #6
Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Open
GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#5
Why is this feature needed?
The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.
What and how are we changing? Why this approach?
We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:
  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).
These changes were selected to provide a striking contrast and bring more energy to the website's design.
What actions are required from users?
Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.
How does it work? (Technical details)
The changes are implemented in the Sass variables file:
  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.
After merging this PR, running the project's build process will apply the new theme automatically.
Is it backwards compatible?
Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.
Any other considerations?
  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)


0 participants


, '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 theme and colors into vivid and bright ones (it is dark and lonly now...) - #6
Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Open
GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#5
Why is this feature needed?
The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.
What and how are we changing? Why this approach?
We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:
  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).
These changes were selected to provide a striking contrast and bring more energy to the website's design.
What actions are required from users?
Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.
How does it work? (Technical details)
The changes are implemented in the Sass variables file:
  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.
After merging this PR, running the project's build process will apply the new theme automatically.
Is it backwards compatible?
Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.
Any other considerations?
  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)


0 participants


, '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 theme and colors into vivid and bright ones (it is dark and lonly now...) - #6
Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Open
GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#5
Why is this feature needed?
The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.
What and how are we changing? Why this approach?
We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:
  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).
These changes were selected to provide a striking contrast and bring more energy to the website's design.
What actions are required from users?
Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.
How does it work? (Technical details)
The changes are implemented in the Sass variables file:
  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.
After merging this PR, running the project's build process will apply the new theme automatically.
Is it backwards compatible?
Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.
Any other considerations?
  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)


0 participants


, '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 theme and colors into vivid and bright ones (it is dark and lonly now...) - #6
Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Open
GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#5
Why is this feature needed?
The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.
What and how are we changing? Why this approach?
We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:
  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).
These changes were selected to provide a striking contrast and bring more energy to the website's design.
What actions are required from users?
Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.
How does it work? (Technical details)
The changes are implemented in the Sass variables file:
  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.
After merging this PR, running the project's build process will apply the new theme automatically.
Is it backwards compatible?
Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.
Any other considerations?
  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)


0 participants


, '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 theme and colors into vivid and bright ones (it is dark and lonly now...) - #6
Open
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Open
GitAuto: Turn this website theme and colors into vivid and bright ones (it is dark and lonly now...)#6
gitauto-for-dev[bot] wants to merge 2 commits into
mainfrom 
gitauto-wes/issue-5-20250215-224410
Conversation
@gitauto-for-dev
@gitauto-for-devgitauto-for-devBot
commented
Feb 16, 2025•

edited

Loading

Copy link


Copy Markdown

Resolves#5
Why is this feature needed?
The website's current theme is dark and somewhat gloomy. This update aims to refresh the look by introducing vivid and bright colors, thereby making the interface more visually appealing and engaging for users.
What and how are we changing? Why this approach?
We modified the Sass variables in the assets/sass/libs/_vars.scss file to update the overall color palette:
  • Changed the wrapper background color from a dark shade (#212931) to a vibrant yellow (#ffeb3b).
  • Updated the accent color from a light blue (#18bfef) to a vivid pink (#e91e63).
These changes were selected to provide a striking contrast and bring more energy to the website's design.
What actions are required from users?
Users should recompile the Sass files or rebuild the website to see the updated theme. No additional configuration changes are required.
How does it work? (Technical details)
The changes are implemented in the Sass variables file:
  • The $palette map now includes brighter color values for key UI elements.
  • The wrapper background and accent colors were the primary focus, ensuring that these update propagate through all components using these variables.
After merging this PR, running the project's build process will apply the new theme automatically.
Is it backwards compatible?
Yes, this update is fully backwards compatible. Only the color definitions have been modified, and there are no breaking changes to the structure or functionality of the website.
Any other considerations?
  • Alternative color schemes were considered, but the selected colors best match the intention to brighten the website.
  • Further adjustments and refinements may follow based on user feedback to balance vibrancy with usability.
  • Please verify the appearance on various devices and browsers to ensure consistent visual performance.
git fetch origin
git checkout gitauto-wes/issue-5-20250215-224410
git pull origin gitauto-wes/issue-5-20250215-224410

@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 6:56am
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@wesnishiowesnishioAwaiting requested review from wesnishio

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 theme and colors into vivid and bright ones (e.g. red, orange, yellow, or something)


0 participants