mirror of
https://github.com/flickowoa/dotfiles.git
synced 2026-04-06 00:32:09 +02:00
auto change text color(dark|light) when moosic
This commit is contained in:
flick0
@@ -1,14 +1,7 @@
|
||||
// importing
|
||||
import { Hyprland, Notifications, Mpris, Audio, Battery, SystemTray, App, Widget, Utils, Variable} from './imports.js';
|
||||
// import Notifications from './imports.js';
|
||||
// import Mpris from './imports.js';
|
||||
// import Audio from './imports.js';
|
||||
// import Battery from './imports.js';
|
||||
// import SystemTray from './imports.js';
|
||||
// import App from './imports.js';
|
||||
// import Widget from './imports.js';
|
||||
// import { Utils } from './imports.js';
|
||||
import nowplaying from './service/nowplaying.js'; //;
|
||||
|
||||
import nowplaying from './service/nowplaying.js';
|
||||
|
||||
// widgets can be only assigned as a child in one container
|
||||
// so to make a reuseable widget, just make it a function
|
||||
@@ -31,7 +24,35 @@ const battery = Variable(false,{
|
||||
}]
|
||||
})
|
||||
|
||||
const dominant_color = Variable("#000000",{});
|
||||
|
||||
function dark_text(color){
|
||||
//check limunosity of color and determine if white text will be visible
|
||||
let tolerence = 0.5;
|
||||
let r = parseInt(color.slice(1,3),16);
|
||||
let g = parseInt(color.slice(3,5),16);
|
||||
let b = parseInt(color.slice(5,7),16);
|
||||
let limunosity = 0.2126*r + 0.7152*g + 0.0722*b;
|
||||
return limunosity > 255*tolerence;
|
||||
}
|
||||
|
||||
function arrremove(arr, value) {
|
||||
return arr.filter(function(ele){
|
||||
return ele != value;
|
||||
});
|
||||
}
|
||||
|
||||
function arradd(arr, value) {
|
||||
if (arr.includes(value)){
|
||||
return arr;
|
||||
}
|
||||
arr.push(value);
|
||||
return arr;
|
||||
}
|
||||
|
||||
|
||||
globalThis.battery = battery;
|
||||
globalThis.dominant_color = dominant_color;
|
||||
|
||||
let prev_battery = false
|
||||
battery.connect('changed', ({ value }) => {
|
||||
@@ -51,18 +72,16 @@ battery.connect('changed', ({ value }) => {
|
||||
function get_color(){
|
||||
return Utils.readFileAsync(home + '/.config/hypr/themes/uicolors')
|
||||
.then(content => {
|
||||
var colors = {}
|
||||
let colors = {}
|
||||
//split into lines
|
||||
let lines = content.split('\n');
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
let [key, value] = lines[i].split(':');
|
||||
for (const element of lines) {
|
||||
let [key, value] = element.split(':');
|
||||
if (key == undefined || value == undefined){
|
||||
continue;
|
||||
}
|
||||
//strip
|
||||
key = key.trim();
|
||||
value = value.trim();
|
||||
|
||||
colors[key] = value;
|
||||
}
|
||||
console.log(colors)
|
||||
@@ -106,31 +125,52 @@ const Workspaces = () => Widget.Box({
|
||||
className: 'workspaces',
|
||||
|
||||
children: Array.from({ length: 10 }, (_, i) => i + 1).map(i => Widget.Button({
|
||||
child:Widget.Label({label:`${i}`}),
|
||||
child:Widget.Label({label:`${i}`,}),
|
||||
className: "workspace",
|
||||
onClicked: () => Utils.execAsync(`hyprctl dispatch workspace ${i}`),
|
||||
})
|
||||
),
|
||||
connections: [[Hyprland, box => {
|
||||
connections: [
|
||||
|
||||
[dominant_color, self => {
|
||||
if (dark_text(dominant_color.value)){
|
||||
self.className = arrremove(self.className,"light");
|
||||
self.className = arradd(self.className,"dark");
|
||||
} else {
|
||||
self.className = arrremove(self.className,"dark");
|
||||
self.className = arradd(self.className,"light");
|
||||
}
|
||||
|
||||
}],
|
||||
[Hyprland, box => {
|
||||
|
||||
//loop through children
|
||||
for (let i = 0; i < box.children.length; i++) {
|
||||
for (const element of box.children) {
|
||||
//set the label of the child to the name of the workspace
|
||||
if(box.children[i].child.label == Hyprland.active.workspace.id){
|
||||
box.children[i].className = ["active","workspace"];
|
||||
if(element.child.label == Hyprland.active.workspace.id){
|
||||
element.className = ["active","workspace"];
|
||||
} else {
|
||||
box.children[i].className = ["workspace"];
|
||||
element.className = ["workspace"];
|
||||
}
|
||||
}
|
||||
}
|
||||
]]});
|
||||
|
||||
const Clock = () => Widget.Label({
|
||||
className: 'clock',
|
||||
className: ['clock'],
|
||||
connections: [
|
||||
// this is what you should do
|
||||
[1000, self => Utils.execAsync(['date', '+%I:%M'])
|
||||
[1000, self => Utils.execAsync(['date', '+%I : %M'])
|
||||
.then(date => self.label = date).catch(console.error)],
|
||||
[dominant_color, self => {
|
||||
if (dark_text(dominant_color.value)){
|
||||
self.className = arrremove(self.className,"light");
|
||||
self.className = arradd(self.className,"dark");
|
||||
} else {
|
||||
self.className = arrremove(self.className,"dark");
|
||||
self.className = arradd(self.className,"light");
|
||||
}
|
||||
}],
|
||||
],
|
||||
});
|
||||
|
||||
@@ -149,7 +189,18 @@ const Notification = () => Widget.Box({
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
self.label = Notifications.popups[0]?.summary
|
||||
}
|
||||
}]],
|
||||
}],
|
||||
[dominant_color, self => {
|
||||
if (dark_text(dominant_color.value)){
|
||||
self.className = arrremove(self.className,"light");
|
||||
self.className = arradd(self.className,"dark");
|
||||
} else {
|
||||
self.className = arrremove(self.className,"dark");
|
||||
self.className = arradd(self.className,"light");
|
||||
}
|
||||
|
||||
}],
|
||||
],
|
||||
}),
|
||||
],
|
||||
connections: [[Notifications, self => {
|
||||
@@ -162,7 +213,8 @@ const Notification = () => Widget.Box({
|
||||
} else {
|
||||
self.className = ['notification'];
|
||||
}
|
||||
}]],
|
||||
}],
|
||||
],
|
||||
});
|
||||
|
||||
const is_it_playing = (self) => {
|
||||
@@ -183,7 +235,7 @@ const is_it_playing = (self) => {
|
||||
let NO = false;
|
||||
|
||||
const Media = () => Widget.Button({
|
||||
className: 'media',
|
||||
className: ['media'],
|
||||
onPrimaryClick: () => Mpris.getPlayer('')?.playPause(),
|
||||
onScrollUp: async (self) => {
|
||||
if (NO){
|
||||
@@ -220,7 +272,7 @@ const Media = () => Widget.Button({
|
||||
nowplaying.now_playing = nowplaying.now_playing.slice(1,-1);
|
||||
await new Promise(r => setTimeout(r, 50));
|
||||
}
|
||||
await new Promise(r => setTimeout(r, 2000))
|
||||
await new Promise(r => setTimeout(r, 1000))
|
||||
if (nowplaying.now_playing.length == 0){
|
||||
Utils.execAsync([`${themedir}/scripts/pywal_set`, `--reset`])
|
||||
.then(out => console.log(out))
|
||||
@@ -230,7 +282,22 @@ const Media = () => Widget.Button({
|
||||
}],
|
||||
[nowplaying, self => {
|
||||
self.label = nowplaying.now_playing;
|
||||
}]
|
||||
}],
|
||||
[dominant_color, self => {
|
||||
if (dark_text(dominant_color.value)){
|
||||
self.className = arrremove(self.className,"light");
|
||||
self.className = arradd(self.className,"dark");
|
||||
} else {
|
||||
self.className = arrremove(self.className,"dark");
|
||||
self.className = arradd(self.className,"light");
|
||||
}
|
||||
|
||||
}],
|
||||
// [100, self => {
|
||||
// console.log(arradd(self.className,"light"));
|
||||
// self.className = arradd(self.className,"light");
|
||||
// console.log(self.className);
|
||||
// }]
|
||||
],
|
||||
}),
|
||||
]
|
||||
@@ -367,8 +434,8 @@ const Bar = ({ monitor } = {}) => Widget.Window({
|
||||
monitor,
|
||||
margin: [0, 20],
|
||||
anchor: ['top', 'left', 'right'],
|
||||
exclusive: true,
|
||||
layer: "bottom",
|
||||
exclusive: false,
|
||||
layer: "top",
|
||||
child: Widget.CenterBox({
|
||||
startWidget: Left(),
|
||||
centerWidget: Center(),
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
* {
|
||||
all:unset;
|
||||
padding: 2px;
|
||||
/* padding: 1px; */
|
||||
}
|
||||
|
||||
/* Defaults */
|
||||
@@ -10,6 +10,34 @@ label {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.workspaces.dark .active{
|
||||
color: @cbackground;
|
||||
text-shadow: 0 0 4px alpha(@cforeground,0.7);
|
||||
}
|
||||
|
||||
.workspaces.light .active{
|
||||
color: @cforeground;
|
||||
text-shadow: 0 0 4px alpha(@cbackground,0.7);
|
||||
}
|
||||
|
||||
.workspaces.light,
|
||||
.workspaces.dark,
|
||||
.media.paused
|
||||
.media{
|
||||
color: @cforeground;
|
||||
text-shadow: 0 0 4px alpha(@cbackground,0.7);
|
||||
}
|
||||
|
||||
.dark{
|
||||
color: @cbackground;
|
||||
text-shadow: 0 0 4px alpha(@cforeground,0.7);
|
||||
}
|
||||
|
||||
.light{
|
||||
color: @cforeground;
|
||||
text-shadow: 0 0 4px alpha(@cbackground,0.7);
|
||||
}
|
||||
|
||||
.trayitem{
|
||||
all: unset;
|
||||
}
|
||||
@@ -19,6 +47,7 @@ label {
|
||||
.workspaces button,
|
||||
.notification,
|
||||
.trayitem {
|
||||
min-width: 20px;
|
||||
background-color: alpha(@cbackground,0.7) ;
|
||||
box-shadow: alpha(@cbackground,0.2) 2 2 5 2px;
|
||||
border-radius: 15px;
|
||||
@@ -27,12 +56,11 @@ label {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 2px;
|
||||
font-weight: bolder;
|
||||
color: @cforeground ;
|
||||
/* color: @cforeground ; */
|
||||
background-size: 100% 100%;
|
||||
background-position: 0% 0%;
|
||||
text-shadow: 0 0 5px alpha(@cbackground,0.2);
|
||||
font-size: 15px;
|
||||
transition: padding 0.4s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in;
|
||||
font-size: 16px;
|
||||
transition: padding 0.4s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in,all 0.3s cubic-bezier(.55,-0.68,.48,1.68);
|
||||
}
|
||||
|
||||
/* Notification */
|
||||
@@ -86,11 +114,11 @@ label {
|
||||
background-color: #32325c;
|
||||
transition: background 0.3s ease-in;
|
||||
}
|
||||
|
||||
.workspaces button.active {
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
padding-bottom: 3px;
|
||||
color: @cbackground;
|
||||
background-position: 0% 200%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
@@ -116,7 +144,7 @@ label {
|
||||
@c12 100%);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient_f 20s ease-in-out infinite;
|
||||
transition: padding 0.3s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in-out;
|
||||
transition: padding 0.3s cubic-bezier(.55,-0.68,.48,1.68),background 0.7s ease-in-out,all 0.3s cubic-bezier(.55,-0.68,.48,1.68);
|
||||
}
|
||||
|
||||
/* Center Pill Thing™ */
|
||||
@@ -137,7 +165,7 @@ label {
|
||||
background-size: 400% 400%;
|
||||
animation: gradient_back 2s cubic-bezier(.72,.39,.21,1) infinite;
|
||||
text-shadow: 0 0 5px alpha(@cbackground,0.2);
|
||||
color: @cforeground ;
|
||||
/* color: @cforeground ; */
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 2;
|
||||
@@ -151,7 +179,7 @@ label {
|
||||
background-size: 400% 400%;
|
||||
animation: gradient_next 2s cubic-bezier(.72,.39,.21,1) infinite;
|
||||
text-shadow: 0 0 5px alpha(@cbackground,0.2);
|
||||
color: @cforeground ;
|
||||
/* color: @cforeground ; */
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 2;
|
||||
@@ -163,8 +191,6 @@ label {
|
||||
background-image: cross-fade(50% image(radial-gradient(circle, @c2 0%, @c2 6%, @c3 14%, @c4 14%, @c5 18%, @c6 28%, @c6 28%, @c9 58%, @c10 69%, @c11 72%, @c12 73%, @c13 78%, @c14 100%)),url("../../texture.png"));
|
||||
background-size: 400% 400%;
|
||||
animation: gradient_f 9s cubic-bezier(.72,.39,.21,1) infinite;
|
||||
text-shadow: 0 0 5px alpha(@cforeground,0.4);
|
||||
color: @cbackground ;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-bottom: 2;
|
||||
@@ -174,12 +200,11 @@ label {
|
||||
}
|
||||
|
||||
.media.paused {
|
||||
background: @cbackground;
|
||||
background: alpha(@cbackground,0.7);
|
||||
background-size: 400% 400%;
|
||||
animation: gradient_f 9s cubic-bezier(.72,.39,.21,1) infinite;
|
||||
text-shadow: 0 0 5px alpha(@cbackground,0.2);
|
||||
color: @c4 ;
|
||||
font-size: 13px;
|
||||
/* color: @c4 ; */
|
||||
/* font-size: 13px; */
|
||||
transition-delay: 250ms;
|
||||
transition: padding 1s cubic-bezier(0,1.77,.08,1.49),background 0.2s ease-in-out,font-size 0.5s ease-out;
|
||||
}
|
||||
@@ -257,17 +282,39 @@ label {
|
||||
}
|
||||
|
||||
.clock {
|
||||
font-weight: bolder;
|
||||
background: @cforeground;
|
||||
color: @cbackground;
|
||||
text-shadow: 0 0 5px alpha(@cforeground,0.2);
|
||||
background: linear-gradient(118deg, @cforeground 5%, @c1 5%, @c1 20%, @cforeground 20%, @cforeground 40%, @c1 40%, @c1 60%, @cforeground 60%, @cforeground 80%, @c1 80%, @c1 95%, @cforeground 95%);
|
||||
|
||||
background-size: 200% 300%;
|
||||
|
||||
animation: gradient_f_nh 4s linear infinite;
|
||||
padding-top: 5px;
|
||||
/* color: @cforeground; */
|
||||
background-position: 0% 200%;
|
||||
background: linear-gradient(118deg, @c5 5%, @c3 5%, @c3 20%, @c5 20%, @c5 40%, @c3 40%, @c3 60%, @c5 60%, @c5 80%, @c3 80%, @c3 95%, @c5 95%);
|
||||
/* background: radial-gradient(
|
||||
circle,
|
||||
@c1 0%,
|
||||
@c2 12%,
|
||||
@c3 19%,
|
||||
@c4 20%,
|
||||
@c5 24%,
|
||||
@c6 36%,
|
||||
@c1 37%,
|
||||
@c2 48%,
|
||||
@c3 52%,
|
||||
@c13 52%,
|
||||
@c14 59%,
|
||||
@c6 66%,
|
||||
@c7 67%,
|
||||
@c8 68%,
|
||||
@c9 77%,
|
||||
@c10 78%,
|
||||
@c11 82%,
|
||||
@c12 83%,
|
||||
@c13 90%,
|
||||
@c14 100%); */
|
||||
background-size: 400% 400%;
|
||||
animation: gradient_f_nh 20s ease-in-out infinite;
|
||||
/* padding-top: 5px;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
padding-left: 20px; */
|
||||
}
|
||||
|
||||
.progress progress {
|
||||
|
||||
@@ -61,6 +61,8 @@ fi
|
||||
convert /tmp/texture.png -alpha set -channel A -evaluate set 5% /tmp/texture.png
|
||||
convert /tmp/bg.png /tmp/texture.png -gravity center -compose overlay -composite /tmp/bg.png
|
||||
|
||||
ags -r "dominant_color.value = '$color';"
|
||||
|
||||
$HYPRLAND_THEME/scripts/apply_wall /tmp/bg.png
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user