Import and Export Themes
-
EDIT: See original post of this thread for latest version, the code in this post is outdated!!
Ok then, new version: This exports the theme by copying the theme code to your clipboard. From there you can paste it into Vivaldi Notes to have it readily available and backed up by Sync. Instead of the import button we have an import field now, where you can either paste or drag and drop a theme code.
/* Theme Import and Export */ function _importTheme() { event.stopPropagation(); event.preventDefault(); if (_eventType === 'paste') { var clipboardData = event.clipboardData || window.clipboardData; var themeCode = clipboardData.getData('text'); } else { var themeCode = event.dataTransfer.getData('text'); } var set = JSON.parse(themeCode); _themeName.select(); document.execCommand('insertText', false, set.themeName); setTimeout(function() { _themeBg.select(); document.execCommand('insertText', false, set.themeBg); }, 200); setTimeout(function() { _themeFg.select(); document.execCommand('insertText', false, set.themeFg); }, 400); setTimeout(function() { _themeHi.select(); document.execCommand('insertText', false, set.themeHi); }, 600); setTimeout(function() { _themeAc.select(); document.execCommand('insertText', false, set.themeAc); }, 800); if ((set.themePage === 1 && !_themePage.checked) || (set.themePage === 0 && _themePage.checked)) { setTimeout(function() { _themePage.click(); }, 1000); } if ((set.themeWin === 1 && !_themeWin.checked) || (set.themeWin === 0 && _themeWin.checked)) { setTimeout(function() { _themeWin.click(); }, 1200); } if ((set.themeTabs === 1 && !_themeTabs.checked) || (set.themeTabs === 0 && _themeTabs.checked)) { setTimeout(function() { _themeTabs.click(); }, 1400); } setTimeout(function () { const disp = document.querySelector('.border-radius label span'); if (set.themeRound === '-1') { disp.innerText = 'Disabled'; } else if (set.themeRound === '0') { disp.innerText = 'Default'; } else { disp.innerText = set.themeRound + 'px'; } _themeRound.value = set.themeRound; _themeRound.focus(); }, 1600); }; function _exportTheme() { if (_themePage.checked === true) { var checkPage = 1; } else { var checkPage = 0; } if (_themeWin.checked === true) { var checkWin = 1; } else { var checkWin = 0; } if (_themeTabs.checked === true) { var checkTabs = 1; } else { var checkTabs = 0; } const share = {'themeName': _themeName.value, 'themeBg': _themeBg.value, 'themeFg': _themeFg.value, 'themeHi': _themeHi.value, 'themeAc': _themeAc.value, 'themePage': checkPage, 'themeWin': checkWin, 'themeTabs': checkTabs, 'themeRound': _themeRound.value}; const themeCode = JSON.stringify(share); navigator.clipboard.writeText(themeCode); const confirm = document.createElement('span'); confirm.innerText = 'Theme code copied to clipboard.'; confirm.style = 'color: var(--colorHighlightBg); margin-left: 6px; margin-top: 6px;)'; confirm.id = 'confirmExport'; const confirmExport = document.getElementById('confirmExport'); if (!confirmExport) { _cont.appendChild(confirm); setTimeout(function() { _cont.removeChild(confirm); }, 3500); } }; function _buttons() { const check = document.getElementById('importTheme'); _cont = document.querySelector('.theme-metadata'); if (_cont && !check) { _themeName = document.querySelector('.theme-name'); _themeBg = document.querySelector('.theme-colors div:nth-of-type(1) input'); _themeFg = document.querySelector('.theme-colors div:nth-of-type(2) input'); _themeHi = document.querySelector('.theme-colors div:nth-of-type(3) input'); _themeAc = document.querySelector('.theme-colors div:nth-of-type(4) input'); _themePage = document.querySelector('.theme-settings div div:nth-of-type(1) label input'); _themeWin = document.querySelector('.theme-settings div div:nth-of-type(2) label input'); _themeTabs = document.querySelector('.theme-settings div div:nth-of-type(3) label input'); _themeRound = document.querySelector('.border-radius label input'); var importBtn = document.createElement('input'); importBtn.setAttribute('type', 'text'); importBtn.setAttribute('placeholder', 'Import'); importBtn.style = 'margin-left: 6px; '; importBtn.id = 'importTheme'; _cont.appendChild(importBtn); const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '#importTheme {width: 80px;} #importTheme::-webkit-input-placeholder {opacity: 1; color: var(--colorHighlightBg); text-align: center;}'; document.getElementsByTagName('head')[0].appendChild(style); var exportBtn = document.createElement('input'); exportBtn.setAttribute('type', 'submit'); exportBtn.classList.add('primary'); exportBtn.setAttribute('value', 'Export'); exportBtn.style.marginLeft = '6px'; exportBtn.id = 'exportTheme'; _cont.appendChild(exportBtn); document.getElementById('exportTheme').addEventListener('click', _exportTheme); const importInput = document.getElementById('importTheme'); importInput.addEventListener('paste', function() { _eventType = 'paste'; _importTheme(event); }); importInput.addEventListener('drop', function() { _eventType = 'drop'; _importTheme(event); }); } }; function portThemes() { var edit = document.querySelector('.button-toolbar.edit'); if (edit) { var add = document.querySelector('.button-toolbar.add'); if (!edit.hasAttribute('id')) { edit.id = "eventOn"; edit.addEventListener('click', function() { setTimeout(_buttons, 50); }); } if (!add.hasAttribute('id')) { add.id = "eventOn2"; add.addEventListener('click', function() { setTimeout(_buttons, 50); }); } } }; setTimeout(function wait() { const browser = document.getElementById('browser'); if (browser) { document.body.addEventListener('click', function() { setTimeout(portThemes, 500); }); } else { setTimeout(wait, 300); } }, 300);
-
@luetage Great! Very handy (actually, perfect) for importing/exporting themes between my stable and snapshot. Thanks you for this amazing gift.
-
@hlehyaric said in Import and Export Themes:
Very handy
But... but... but... HOW did you get it? The extension is still not yet updated on the Chrome store, even after 10 hours?
-
-
@hlehyaric Oh, whoops, blush - thank you!
I was waiting for the new version because...
Ok then, new version
-
@Steffie It's a new version compared to the one in the first post of this topic. There the traditional way of importing/exporting is used – doing it with files, but I think the theme code method already used in the forum mod is more user friendly. And yeah, this is about Vivaldi browser themes, not forum mod themes, although some parts of the code are eerily similar. I have in mind to sue myself for this, my lawyers are already on it…
-
@luetage said in Import and Export Themes:
this is about Vivaldi browser themes, not forum mod themes
Exactly! Utterly my silliness in misunderstanding; for inexplicable reasons i was fixated on the extension, despite that being clearly OT to this thread. Once your legal eagles are finished with you, i need them to take me down too.
-
@luetage
So..this new version acts slightly different than the previous one?
It "just" export the json to clipboard or also have the export to file function?
Why it changes to the new theme?
To allow updating its data in V storage, I presume? (Didn't test yet ^^) -
@Hadden89 No export to file function, you will have to use the original version for that. I don't really understand the 2nd question. When you import a theme, the only way to save the theme is to force Vivaldi to commit the values to storage and of course the theme is activated then. It's the same as if you'd be changing colors, attributes directly, Vivaldi saves every change immediately.
-
@luetage said in Import and Export Themes:
When you import a theme, the only way to save the theme is to force Vivaldi to commit the values to storage and of course the theme is activated then [...] Vivaldi saves every change immediately.
That's what I meant
Tnx for new version ^^, -
I got annoyed by the fact the export button provides no feedback, while backing up all of my themes. It will show a little notice beside the button when an export happens from now on. Post has been updated.
-
Dracula
{"themeName":"Dracula","themeBg":"282a36","themeFg":"c7cedf","themeHi":"e2d774","themeAc":"4a5066","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"3"}
-
Thanks to @LonM, who pointed me at an easy way to check the contents of local storage in another topic, I've been able to automatically set and save the corner rounding while importing themes. This means this mod is finally fully functional!!! The original post has been updated, please use the new version. I also removed the version, which exported to and imported from files and exchanged it for the arguably more user-friendly way of copying and pasting theme codes. I think it makes sense to "force" everyone to use the same version, as it makes sharing themes easier.
What would be possible too is exporting and importing all user created themes at once. It's pretty straightforward actually.
-
Same theme set, but for V2 version
Few of them were slightly retouched for better contrast.{"themeName":"BigG","themeBg":"b91b1f","themeFg":"ffd719","themeHi":"84c3fe","themeAc":"4bb847","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Blorange","themeBg":"b82501","themeFg":"fffcfc","themeHi":"dfacab","themeAc":"1f1d68","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Blue Velvet","themeBg":"003066","themeFg":"fdfdfd","themeHi":"1d67c8","themeAc":"1d67c8","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"BoJack","themeBg":"773c00","themeFg":"ffffff","themeHi":"f07800","themeAc":"512800","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"CGA","themeBg":"b000af","themeFg":"ffffff","themeHi":"01efef","themeAc":"09b9b9","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Cloudy","themeBg":"398abc","themeFg":"fffcfc","themeHi":"dfacab","themeAc":"7da4bc","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Cold","themeBg":"1c1c1c","themeFg":"01ffff","themeHi":"019494","themeAc":"017f7f","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Danger","themeBg":"171717","themeFg":"ffff2d","themeHi":"ff8000","themeAc":"363632","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"DarkOrange","themeBg":"2b2a2a","themeFg":"97ddf1","themeHi":"e35501","themeAc":"c24a03","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Eggplant","themeBg":"2d2233","themeFg":"fffcfc","themeHi":"aa8db3","themeAc":"7a4782","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Foxy","themeBg":"b51d3c","themeFg":"fff14f","themeHi":"7ab0fe","themeAc":"0086fe","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Galaxy","themeBg":"251a48","themeFg":"78cbda","themeHi":"e302b7","themeAc":"b6349d","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Glacial","themeBg":"141414","themeFg":"ffffff","themeHi":"01efef","themeAc":"09b9b9","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Gold","themeBg":"141414","themeFg":"ffffff","themeHi":"ffcc0e","themeAc":"bf9701","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Gyello","themeBg":"274e43","themeFg":"e4dd45","themeHi":"fdf645","themeAc":"709b4e","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Italy","themeBg":"006d33","themeFg":"f3e9e9","themeHi":"e7eb13","themeAc":"cf2734","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Jam","themeBg":"010000","themeFg":"fcbd36","themeHi":"00bc08","themeAc":"009e07","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Leaf","themeBg":"004903","themeFg":"ffffff","themeHi":"00bc08","themeAc":"009e07","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Mint","themeBg":"f2f2f2","themeFg":"008000","themeHi":"8f8f8f","themeAc":"005900","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Morty","themeBg":"fffefe","themeFg":"0e0e0e","themeHi":"c9c759","themeAc":"976231","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"OldBook","themeBg":"392e2a","themeFg":"fbc5ab","themeHi":"f2cb94","themeAc":"5f4d46","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Pinky","themeBg":"800040","themeFg":"fdfdfd","themeHi":"fe34fe","themeAc":"ff0080","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Term","themeBg":"191919","themeFg":"00ff00","themeHi":"ffffff","themeAc":"008a00","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Win9x","themeBg":"c1c1c1","themeFg":"151414","themeHi":"010081","themeAc":"f9fefe","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
{"themeName":"Zoid","themeBg":"860000","themeFg":"ffffff","themeHi":"fbfbfb","themeAc":"d20300","themePage":0,"themeWin":0,"themeTabs":0,"themeRound":"0"}
(The post is also a good example why we need a true spoiler tag :P)
-
@Hadden89 Nice collection, I especially like Cold and Win9x. The last theme is incomplete.
-
@luetage Yeah, w9x is a bit
uglystrange. It had a 9x blue accent but several texts were poorly readble -
@Hadden89 No, I like that one, lol. With incomplete I meant the last theme, Zoid, it misses the corner rounding and the bracket and therefore doesn't import.
-
@luetage Whoops. Tnx, fixed
-
-
What do you say about this one (created very simple way—pressing random keys)?
{"themeName":"Terrible","themeBg":"541654","themeFg":"146543","themeHi":"196845","themeAc":"896749","themePage":0,"themeWin":1,"themeTabs":1,"themeRound":"3"}