danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Changed theme icon.

Browse source
This commit is contained in:
ArabCoders 2024-03-04 22:47:43 +03:00
parent 3ca1c981d2
commit e0d686f227
2 changed files with 46 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/components/Page-Header.vue
View file

@ -19,9 +19,17 @@
</div> </div>
<div class="navbar-item"> <div class="navbar-item">
<button v-tooltip="'Switch to Light theme'" class="button is-dark has-tooltip-bottom" <button v-tooltip="'Switch to Light theme'" class="button is-dark has-tooltip-bottom"
@click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">🌞</button> @click="selectedTheme = 'light'" v-if="selectedTheme == 'dark'">
<span class="icon is-small is-left has-text-warning">
<font-awesome-icon icon="fa-solid fa-sun" />
</span>
</button>
<button v-tooltip="'Switch to Dark theme'" class="button is-dark has-tooltip-bottom" <button v-tooltip="'Switch to Dark theme'" class="button is-dark has-tooltip-bottom"
@click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">🌚</button> @click="selectedTheme = 'dark'" v-if="selectedTheme == 'light'">
<span class="icon is-small is-left">
<font-awesome-icon icon="fa-solid fa-moon" />
</span>
</button>
</div> </div>
</div> </div>
</nav> </nav>
@ -45,36 +53,39 @@ defineProps({
const applyPreferredColorScheme = (scheme) => { const applyPreferredColorScheme = (scheme) => {
for (var s = 0; s < document.styleSheets.length; s++) { for (var s = 0; s < document.styleSheets.length; s++) {
for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) { for (var i = 0; i < document.styleSheets[s].cssRules.length; i++) {
const rule = document.styleSheets[s].cssRules[i]; try {
const rule = document.styleSheets[s].cssRules[i];
if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) { if (rule && rule.media && rule.media.mediaText.includes("prefers-color-scheme")) {
switch (scheme) { switch (scheme) {
case "light": case "light":
rule.media.appendMedium("original-prefers-color-scheme"); rule.media.appendMedium("original-prefers-color-scheme");
if (rule.media.mediaText.includes("light")) { if (rule.media.mediaText.includes("light")) {
rule.media.deleteMedium("(prefers-color-scheme: light)"); rule.media.deleteMedium("(prefers-color-scheme: light)");
} }
if (rule.media.mediaText.includes("dark")) { if (rule.media.mediaText.includes("dark")) {
rule.media.deleteMedium("(prefers-color-scheme: dark)"); rule.media.deleteMedium("(prefers-color-scheme: dark)");
} }
break; break;
case "dark": case "dark":
rule.media.appendMedium("(prefers-color-scheme: light)"); rule.media.appendMedium("(prefers-color-scheme: light)");
rule.media.appendMedium("(prefers-color-scheme: dark)"); rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("original")) { if (rule.media.mediaText.includes("original")) {
rule.media.deleteMedium("original-prefers-color-scheme"); rule.media.deleteMedium("original-prefers-color-scheme");
} }
break; break;
default: default:
rule.media.appendMedium("(prefers-color-scheme: dark)"); rule.media.appendMedium("(prefers-color-scheme: dark)");
if (rule.media.mediaText.includes("light")) { if (rule.media.mediaText.includes("light")) {
rule.media.deleteMedium("(prefers-color-scheme: light)"); rule.media.deleteMedium("(prefers-color-scheme: light)");
} }
if (rule.media.mediaText.includes("original")) { if (rule.media.mediaText.includes("original")) {
rule.media.deleteMedium("original-prefers-color-scheme"); rule.media.deleteMedium("original-prefers-color-scheme");
} }
break; break;
}
} }
} catch (e) {
console.debug(e);
} }
} }
} }

7
frontend/src/main.js
View file

@ -6,7 +6,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { import {
faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare, faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ, faEject, faGlobe faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ, faEject, faGlobe, faMoon, faSun
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons' import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
@ -17,8 +17,9 @@ import './assets/css/bulma-dark.css'
import './assets/css/style.css' import './assets/css/style.css'
import 'floating-vue/dist/style.css' import 'floating-vue/dist/style.css'
library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare, library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload,
faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ, faArrowDownAZ, faEject, faGlobe) faUpRightFromSquare, faSquare, faSquareCheck, faSpinner, faArrowUp, faArrowDown, faTasks, faCalendar, faArrowUpAZ,
faArrowDownAZ, faEject, faGlobe, faMoon, faSun)
const app = createApp(App); const app = createApp(App);
app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1); app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);