Skip to content

Commit

Permalink
Add border color customization
Browse files Browse the repository at this point in the history
  • Loading branch information
@one23four56
one23four56 committed Apr 16, 2021
1 parent d5300ca commit 9c9eadd
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 20 deletions.
15 changes: 14 additions & 1 deletion content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,30 @@ chrome.storage.local.get(['canvas_theme'], result=> {
let theme = JSON.parse(result.canvas_theme)
document.querySelector(':root').style.setProperty('--canvas-style-bgc', theme.backgroundcolor)
document.querySelector(':root').style.setProperty('--canvas-style-tc', theme.textcolor)
document.querySelector(':root').style.setProperty('--canvas-style-bc', theme.bordercolor)
console.log("[CANVAS THEMEINATOR] Theme Loaded: " + theme.name)
} else {
chrome.storage.local.set({ 'canvas_theme' : JSON.stringify({
name: "Dark",
backgroundcolor: "rgb(46, 46, 46)",
textcolor: "white"
textcolor: "white",
bordercolor: "white",
})})
document.querySelector(':root').style.setProperty('--canvas-style-bgc', "rgb(46, 46, 46)")
document.querySelector(':root').style.setProperty('--canvas-style-tc', "white")
document.querySelector(':root').style.setProperty('--canvas-style-bc', "white")
console.log("[CANVAS THEMEINATOR] Theme Loaded: Dark")
}
})
chrome.storage.local.get(['canvasborderradius'], result=> {
document.querySelector(':root').style.setProperty('--canvas-border-radius', (result.canvasborderradius) ? (result.canvasborderradius) : ('15px'))
})

chrome.storage.local.get(['boxshadow'], result=>{
if (result.boxshadow===undefined) {
chrome.storage.local.set({ 'boxshadow' : true })
document.querySelector(':root').style.setProperty('--canvas-box-shadow', '0px 2px 10px 0px white')
} else {
document.querySelector(':root').style.setProperty('--canvas-box-shadow', (result.boxshadow) ? '0px 2px 10px 0px white' : 'none')
}
})
6 changes: 5 additions & 1 deletion html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ <h2>Click a button to set the Canvas Theme</h2>
<input type="color" name="bc-input" id="bc-input" required value="#000000"> <br>
<label for="tc-input">Text Color: </label>
<input type="color" name="tc-input" id="tc-input" required value="#ffffff"> <br>
<label for="boc-input">Border Color: </label>
<input type="color" name="boc-input" id="boc-input" required value="#ffffff"> <br>
<label for="name-input">Name: </label>
<input type="text" name="name-input" id="name-input" maxlength="15" minlength="1" value="Custom Theme"> <br>
<input type="submit" value="Save">
Expand All @@ -48,7 +50,9 @@ <h2>Click a button to set the Canvas Theme</h2>
<p>Current Theme: <b id="theme">Dark</b></p>
<hr>
<input type="checkbox" name="rounded" id="rounded">
<label for="rounded">Use Rounded UI</label>
<label for="rounded">Use Rounded UI</label> <br>
<input type="checkbox" name="boxshadow" id="boxshadow">
<label for="boxshadow">Show Box Shadow</label>
<hr>
<p>Reload the page for changes to appear</p>
<hr>
Expand Down
37 changes: 23 additions & 14 deletions html/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@

function createSetThemeListener(elemid, name, color, textcolor) {
function createSetThemeListener(elemid, name, color, textcolor, bordercolor) {
let elem = document.getElementById(elemid)
elem.addEventListener('click', () => {
document.getElementById("custom-form").style.display = 'none'
chrome.storage.local.set({ 'canvas_theme' : JSON.stringify({
name: name,
backgroundcolor: color,
textcolor: textcolor
textcolor: textcolor,
bordercolor: bordercolor,
})})
document.getElementById('theme').innerText = name
document.getElementById('theme').style.color = textcolor
Expand All @@ -15,15 +16,15 @@ function createSetThemeListener(elemid, name, color, textcolor) {
}

{
createSetThemeListener('dark', 'Dark', 'rgb(46, 46, 46)', 'white')
createSetThemeListener('amoled', 'AMOLED Dark', 'rgb(0, 0, 0)', 'white')
createSetThemeListener('purple', 'Purple', 'rgb(103, 7, 192)', 'white')
createSetThemeListener('blue', 'Blue', 'rgb(62, 91, 255)', 'white')
createSetThemeListener('green', 'Green', 'rgb(0, 197, 105)', 'white')
createSetThemeListener('orange', 'Orange', 'rgb(236, 143, 22)', 'white')
createSetThemeListener('darkpurple', 'Dark Purple', 'rgb(59, 0, 114)', 'white')
createSetThemeListener('darkblue', 'Dark Blue', 'rgb(0, 19, 124)', 'white')
createSetThemeListener('light', 'Light', 'white', 'black')
createSetThemeListener('dark', 'Dark', 'rgb(46, 46, 46)', 'white', 'white')
createSetThemeListener('amoled', 'AMOLED Dark', 'rgb(0, 0, 0)', 'white', 'white')
createSetThemeListener('purple', 'Purple', 'rgb(103, 7, 192)', 'white', 'white')
createSetThemeListener('blue', 'Blue', 'rgb(62, 91, 255)', 'white', 'white')
createSetThemeListener('green', 'Green', 'rgb(0, 197, 105)', 'white', 'white')
createSetThemeListener('orange', 'Orange', 'rgb(236, 143, 22)', 'white', 'white')
createSetThemeListener('darkpurple', 'Dark Purple', 'rgb(59, 0, 114)', 'white', 'white')
createSetThemeListener('darkblue', 'Dark Blue', 'rgb(0, 19, 124)', 'white', 'white')
createSetThemeListener('light', 'Light', 'white', 'black', 'black')

document.getElementById("custom-form").style.display = 'none'
document.getElementById('custom').addEventListener('click', ()=>{
Expand All @@ -39,12 +40,14 @@ function createSetThemeListener(elemid, name, color, textcolor) {
let formData = new FormData(document.getElementById("custom-form"))
let name = formData.get("name-input")
let textcolor = formData.get("tc-input")
let bordercolor = formData.get("boc-input")
let color = formData.get("bc-input")
document.getElementById("custom-form").style.display = 'none'
chrome.storage.local.set({ 'canvas_theme' : JSON.stringify({
name: name,
backgroundcolor: color,
textcolor: textcolor
textcolor: textcolor,
bordercolor: bordercolor,
})})
document.getElementById('theme').innerText = name
document.getElementById('theme').style.color = textcolor
Expand All @@ -56,12 +59,15 @@ function createSetThemeListener(elemid, name, color, textcolor) {
document.getElementById('rounded').addEventListener('change', () => {
chrome.storage.local.set({ 'canvasborderradius': (document.getElementById('rounded').checked) ? '15px' : '0' })
})
document.getElementById('boxshadow').addEventListener('change', ()=>{
chrome.storage.local.set({ 'boxshadow' : document.getElementById('boxshadow').checked})
})
}

{
chrome.storage.local.get(['canvas_theme'], result=>{
let theme = JSON.parse(result.canvas_theme)
if (theme) {
if (result.canvas_theme) {
let theme = JSON.parse(result.canvas_theme)
document.getElementById('theme').innerText = theme.name
document.getElementById('theme').style.color = theme.textcolor
document.getElementById('theme').style.backgroundColor = theme.backgroundcolor
Expand All @@ -75,4 +81,7 @@ function createSetThemeListener(elemid, name, color, textcolor) {
if (result.canvasborderradius == '15px') document.getElementById("rounded").checked = true
if (result.canvasborderradius === undefined) document.getElementById("rounded").checked = true
})
chrome.storage.local.get(['boxshadow'], result=>{
if (result.boxshadow == true || result.boxshadow === undefined) document.getElementById("boxshadow").checked = true
})
}
10 changes: 6 additions & 4 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
--canvas-style-bgc: rgb(46, 46, 46);
--canvas-border-radius: 15px;
--canvas-style-tc: white;
--cavnas-style-bc: white;
--canvas-box-shadow: 0px 2px 10px 0px white;
}

:not(.Grouping-styles__overlay, .ic-DashboardCard__header_hero, .ic-DashboardCard__header_image) {
background-color: var(--canvas-style-bgc) !important;
color: var(--canvas-style-tc) !important;
border-color: var(--canvas-style-tc) !important;
border-color: var(--canvas-style-bc) !important;
background-image: none !important;
border-radius: var(--canvas-border-radius) !important;
}
Expand Down Expand Up @@ -38,7 +40,7 @@ svg {

.Grouping-styles__overlay {
border-style: solid !important;
box-shadow: -1px 1px 11px 1px white !important;
box-shadow: var(--canvas-box-shadow) !important;
border-radius: var(--canvas-border-radius) !important;
}

Expand All @@ -52,8 +54,8 @@ svg {

ol.Grouping-styles__items {
margin-left: 15px !important;
border: 2px solid var(--canvas-style-tc) !important;
box-shadow: 0px 2px 10px 0px white !important;
border: 2px solid var(--canvas-style-bc) !important;
box-shadow: var(--canvas-box-shadow) !important;
}

.NotificationBadge-styles__activityIndicator.NotificationBadge-styles__hasBadge {
Expand Down

0 comments on commit 9c9eadd

Please sign in to comment.