From 6e8790079b09b8551b7ca3c5fc4c0271dea1a688 Mon Sep 17 00:00:00 2001 From: Aban Muhammed C P Date: Wed, 14 May 2025 10:58:19 +0530 Subject: [PATCH 1/6] low battery alert --- app.ts | 5 ++- style.scss | 1 + styles/Bar.scss | 2 +- styles/Charging.scss | 2 +- styles/DesktopClock.scss | 2 +- styles/LowBatteryAlert.scss | 14 +++++++ widget/ChargingAlert.tsx | 7 ++-- widget/LowBatteryAlert.tsx | 74 +++++++++++++++++++++++++++++++++++++ 8 files changed, 100 insertions(+), 7 deletions(-) create mode 100644 styles/LowBatteryAlert.scss create mode 100644 widget/LowBatteryAlert.tsx diff --git a/app.ts b/app.ts index 37fe76f..12ddcf2 100644 --- a/app.ts +++ b/app.ts @@ -3,14 +3,17 @@ import style from "./style.scss"; import DesktopClock from "./widget/DesktopClock"; import Bar from "./widget/Bar"; import ChargingAlert from "./widget/ChargingAlert"; +import LowBatteryAlert from "./widget/LowBatteryAlert"; + App.start({ css: style, main() { App.get_monitors().forEach((gdkmonitor) => { - Bar(gdkmonitor); + // Bar(gdkmonitor); DesktopClock(gdkmonitor); ChargingAlert(gdkmonitor); + LowBatteryAlert(gdkmonitor); }); }, }); diff --git a/style.scss b/style.scss index 742918e..b03c8c2 100644 --- a/style.scss +++ b/style.scss @@ -1,6 +1,7 @@ @use "./styles/DesktopClock.scss"; @use "./styles/Bar.scss"; @use "./styles/Charging.scss"; +@use "./styles/LowBatteryAlert.scss"; window.Bar { background: transparent; diff --git a/styles/Bar.scss b/styles/Bar.scss index 389b9d3..93804f0 100644 --- a/styles/Bar.scss +++ b/styles/Bar.scss @@ -1,4 +1,4 @@ -@use "/home/shreyas/.cache/wal/colors.scss" as wal; +@use "/home/abancp/.cache/wal/colors.scss" as wal; .bar-container { background: wal.$background; diff --git a/styles/Charging.scss b/styles/Charging.scss index e441105..dca31db 100644 --- a/styles/Charging.scss +++ b/styles/Charging.scss @@ -1,4 +1,4 @@ -@use "/home/shreyas/.cache/wal/colors.scss" as wal; +@use "/home/abancp/.cache/wal/colors.scss" as wal; .charging-box { border: 1px solid rgba(wal.$foreground, 0.3); diff --git a/styles/DesktopClock.scss b/styles/DesktopClock.scss index c3716fb..ca2d9ba 100644 --- a/styles/DesktopClock.scss +++ b/styles/DesktopClock.scss @@ -1,4 +1,4 @@ -@use "/home/shreyas/.cache/wal/colors.scss" as wal; +@use "/home/abancp/.cache/wal/colors.scss" as wal; .clock-container { font-weight: bold; diff --git a/styles/LowBatteryAlert.scss b/styles/LowBatteryAlert.scss new file mode 100644 index 0000000..6f623f1 --- /dev/null +++ b/styles/LowBatteryAlert.scss @@ -0,0 +1,14 @@ +@use "/home/abancp/.cache/wal/colors.scss" as wal; + +.low-battery-box { + border: 4px solid rgba(#ff0000, 0.3); + background: wal.$background; + min-width: 200px; + min-height: 200px; + border-radius: 50%; + label { + font-family: "Electroharmonix", Times, serif; + color: wal.$color6; + font-size: 3rem; + } +} diff --git a/widget/ChargingAlert.tsx b/widget/ChargingAlert.tsx index a99b6a6..c8fcec7 100644 --- a/widget/ChargingAlert.tsx +++ b/widget/ChargingAlert.tsx @@ -32,7 +32,7 @@ function stopAnimations() { fadeInId = fadeOutId = timeoutId = 0; } -function fadeIn(window: Gtk.Window) { +export function fadeIn(window: Gtk.Window) { stopAnimations(); window.opacity = 0; window.visible = true; @@ -53,7 +53,7 @@ function fadeIn(window: Gtk.Window) { }); } -function fadeOut(window: Gtk.Window) { +export function fadeOut(window: Gtk.Window) { let opacity = 1; const interval = 20; const step = 0.05; @@ -125,12 +125,13 @@ export default function ChargingAlert(gdkmonitor: Gdk.Monitor) { fadeIn(alertWindow); - timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2500, () => { + timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2000, () => { fadeOut(alertWindow); timeoutId = 0; return GLib.SOURCE_REMOVE; }); }); + return alertWindow; } diff --git a/widget/LowBatteryAlert.tsx b/widget/LowBatteryAlert.tsx new file mode 100644 index 0000000..e8e1da1 --- /dev/null +++ b/widget/LowBatteryAlert.tsx @@ -0,0 +1,74 @@ +import { App, Astal, Gtk, Gdk } from "astal/gtk3"; +import Battery from "gi://AstalBattery"; +import { bind } from "astal"; +import Gio from "gi://Gio"; +import GLib from "gi://GLib"; +import {playSound,fadeIn,fadeOut,exec} from "./ChargingAlert.tsx" + + +const battery = Battery.get_default() +let alertWindow = null; +let fadeInId = 0; +let fadeOutId = 0; +let timeoutId = 0; + +export default function LowBatteryAlert(gdkmonitor: Gdk.Monitor) { + const battery = Battery.get_default(); + const homeDir = GLib.get_home_dir(); + + const batteryPercentage = bind(battery, "percentage").as( + (val) => `${(val * 100).toFixed(0)}%`, + ); + + const chargingIcon = bind(battery, "charging").as((val) => (val ? "󰂄" : "󰚦")); + + const labelClass = bind(battery, "charging").as( + (val) => `charging-label${val ? "" : " not"}`, + ); + + alertWindow = ( + + + + + + + ); + + + battery.connect("notify::percentage", () => { + const per = battery.percentage; + log(per) + if(per === 0.15 && !battery.charging){ + playSound(`~/.config/ags/audio/unplug.mp3`); + + fadeIn(alertWindow); + + timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2000, () => { + fadeOut(alertWindow); + timeoutId = 0; + return GLib.SOURCE_REMOVE; + }); + } + }); + + + return alertWindow; +} From f762b553bb8a21d82736277a3bbc59c48e370ae2 Mon Sep 17 00:00:00 2001 From: Aban Muhammed C P <132763024+abancp@users.noreply.github.com> Date: Wed, 14 May 2025 11:38:00 +0530 Subject: [PATCH 2/6] Update app.ts --- app.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.ts b/app.ts index 12ddcf2..b7d3640 100644 --- a/app.ts +++ b/app.ts @@ -10,7 +10,7 @@ App.start({ css: style, main() { App.get_monitors().forEach((gdkmonitor) => { - // Bar(gdkmonitor); + Bar(gdkmonitor); DesktopClock(gdkmonitor); ChargingAlert(gdkmonitor); LowBatteryAlert(gdkmonitor); From efae82988e6eb79e2e0d93c7b1767878017fdf87 Mon Sep 17 00:00:00 2001 From: Aban Muhammed C P Date: Wed, 14 May 2025 18:09:41 +0530 Subject: [PATCH 3/6] creating color from wallpaper --- README.md | 2 +- app.ts | 2 ++ init.sh | 5 +++ make-colors.sh | 18 ++++++++++ styles/Bar.scss | 2 +- styles/Charging.scss | 2 +- styles/DesktopClock.scss | 2 +- styles/LowBatteryAlert.scss | 2 +- styles/colors.Xresources | 68 +++++++++++++++++++++++++++++++++++++ styles/colors.css | 28 +++++++++++++++ styles/colors.hs | 37 ++++++++++++++++++++ styles/colors.json | 28 +++++++++++++++ styles/colors.scss | 26 ++++++++++++++ styles/colors.sh | 36 ++++++++++++++++++++ styles/colors.yml | 24 +++++++++++++ widget/ChargingAlert.tsx | 2 +- widget/LowBatteryAlert.tsx | 4 +-- 17 files changed, 280 insertions(+), 8 deletions(-) create mode 100644 init.sh create mode 100755 make-colors.sh create mode 100644 styles/colors.Xresources create mode 100644 styles/colors.css create mode 100644 styles/colors.hs create mode 100644 styles/colors.json create mode 100644 styles/colors.scss create mode 100644 styles/colors.sh create mode 100644 styles/colors.yml diff --git a/README.md b/README.md index 4a79dbd..e79dc30 100644 --- a/README.md +++ b/README.md @@ -49,5 +49,5 @@ Includes a Desktop clock, sidebar, and a charging animation. Once everything is set up, you can run the widgets with: ```bash -ags run +. ~/.config/ags/init.sh ``` diff --git a/app.ts b/app.ts index b7d3640..e98c825 100644 --- a/app.ts +++ b/app.ts @@ -6,6 +6,8 @@ import ChargingAlert from "./widget/ChargingAlert"; import LowBatteryAlert from "./widget/LowBatteryAlert"; + + App.start({ css: style, main() { diff --git a/init.sh b/init.sh new file mode 100644 index 0000000..24de75a --- /dev/null +++ b/init.sh @@ -0,0 +1,5 @@ +#!/bin/bash + +bash ./make-colors.sh + +ags run diff --git a/make-colors.sh b/make-colors.sh new file mode 100755 index 0000000..99f1e06 --- /dev/null +++ b/make-colors.sh @@ -0,0 +1,18 @@ +#!/bin/bash + +# Get the current wallpaper path from swww +wallpaper_path=$(swww query | grep -oP 'image: \K.*') + +# Check if the file exists +if [[ -f "$wallpaper_path" ]]; then + echo "Using wallpaper: $wallpaper_path" + + # Generate color scheme using wal + wal -i "$wallpaper_path" --backend auto + mv ~/.cache/wal/colors.* ./styles/ + + echo "Color scheme generated with wal." +else + echo "Wallpaper not found or swww not running properly." + exit 1 +fi diff --git a/styles/Bar.scss b/styles/Bar.scss index 93804f0..10ed5f2 100644 --- a/styles/Bar.scss +++ b/styles/Bar.scss @@ -1,4 +1,4 @@ -@use "/home/abancp/.cache/wal/colors.scss" as wal; +@use "./colors.scss" as wal; .bar-container { background: wal.$background; diff --git a/styles/Charging.scss b/styles/Charging.scss index dca31db..97b4f06 100644 --- a/styles/Charging.scss +++ b/styles/Charging.scss @@ -1,4 +1,4 @@ -@use "/home/abancp/.cache/wal/colors.scss" as wal; +@use "./colors.scss" as wal; .charging-box { border: 1px solid rgba(wal.$foreground, 0.3); diff --git a/styles/DesktopClock.scss b/styles/DesktopClock.scss index ca2d9ba..633d520 100644 --- a/styles/DesktopClock.scss +++ b/styles/DesktopClock.scss @@ -1,4 +1,4 @@ -@use "/home/abancp/.cache/wal/colors.scss" as wal; +@use "./colors.scss" as wal; .clock-container { font-weight: bold; diff --git a/styles/LowBatteryAlert.scss b/styles/LowBatteryAlert.scss index 6f623f1..3c2f24d 100644 --- a/styles/LowBatteryAlert.scss +++ b/styles/LowBatteryAlert.scss @@ -1,4 +1,4 @@ -@use "/home/abancp/.cache/wal/colors.scss" as wal; +@use "./colors.scss" as wal; .low-battery-box { border: 4px solid rgba(#ff0000, 0.3); diff --git a/styles/colors.Xresources b/styles/colors.Xresources new file mode 100644 index 0000000..136fbb2 --- /dev/null +++ b/styles/colors.Xresources @@ -0,0 +1,68 @@ +! X colors. +! Generated by 'wal' +*foreground: #d0a7c7 +*background: #050308 +*.foreground: #d0a7c7 +*.background: #050308 +emacs*foreground: #d0a7c7 +emacs*background: #050308 +URxvt*foreground: #d0a7c7 +XTerm*foreground: #d0a7c7 +UXTerm*foreground: #d0a7c7 +URxvt*background: [100]#050308 +XTerm*background: #050308 +UXTerm*background: #050308 +URxvt*cursorColor: #d0a7c7 +XTerm*cursorColor: #d0a7c7 +UXTerm*cursorColor: #d0a7c7 +URxvt*borderColor: [100]#050308 + +! Colors 0-15. +*.color0: #050308 +*color0: #050308 +*.color1: #3D02BD +*color1: #3D02BD +*.color2: #4D0EB5 +*color2: #4D0EB5 +*.color3: #6B2CA7 +*color3: #6B2CA7 +*.color4: #5C07D7 +*color4: #5C07D7 +*.color5: #5321C4 +*color5: #5321C4 +*.color6: #9B5591 +*color6: #9B5591 +*.color7: #d0a7c7 +*color7: #d0a7c7 +*.color8: #91748b +*color8: #91748b +*.color9: #3D02BD +*color9: #3D02BD +*.color10: #4D0EB5 +*color10: #4D0EB5 +*.color11: #6B2CA7 +*color11: #6B2CA7 +*.color12: #5C07D7 +*color12: #5C07D7 +*.color13: #5321C4 +*color13: #5321C4 +*.color14: #9B5591 +*color14: #9B5591 +*.color15: #d0a7c7 +*color15: #d0a7c7 + +! Black color that will not be affected by bold highlighting. +*.color66: #050308 +*color66: #050308 + +! Xclock colors. +XClock*foreground: #d0a7c7 +XClock*background: #050308 +XClock*majorColor: rgba:d0/a7/c7/ff +XClock*minorColor: rgba:d0/a7/c7/ff +XClock*hourColor: rgba:d0/a7/c7/ff +XClock*minuteColor: rgba:d0/a7/c7/ff +XClock*secondColor: rgba:d0/a7/c7/ff + +! Set depth to make transparency work. +URxvt*depth: 32 diff --git a/styles/colors.css b/styles/colors.css new file mode 100644 index 0000000..abbfa45 --- /dev/null +++ b/styles/colors.css @@ -0,0 +1,28 @@ +/* CSS variables + Generated by 'wal' */ +:root { + --wallpaper: url("/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png"); + + /* Special */ + --background: #050308; + --foreground: #d0a7c7; + --cursor: #d0a7c7; + + /* Colors */ + --color0: #050308; + --color1: #3D02BD; + --color2: #4D0EB5; + --color3: #6B2CA7; + --color4: #5C07D7; + --color5: #5321C4; + --color6: #9B5591; + --color7: #d0a7c7; + --color8: #91748b; + --color9: #3D02BD; + --color10: #4D0EB5; + --color11: #6B2CA7; + --color12: #5C07D7; + --color13: #5321C4; + --color14: #9B5591; + --color15: #d0a7c7; +} diff --git a/styles/colors.hs b/styles/colors.hs new file mode 100644 index 0000000..92b2e10 --- /dev/null +++ b/styles/colors.hs @@ -0,0 +1,37 @@ +--Place this file in your .xmonad/lib directory and import module Colors into .xmonad/xmonad.hs config +--The easy way is to create a soft link from this file to the file in .xmonad/lib using ln -s +--Then recompile and restart xmonad. + +module Colors + ( wallpaper + , background, foreground, cursor + , color0, color1, color2, color3, color4, color5, color6, color7 + , color8, color9, color10, color11, color12, color13, color14, color15 + ) where + +-- Shell variables +-- Generated by 'wal' +wallpaper="/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png" + +-- Special +background="#050308" +foreground="#d0a7c7" +cursor="#d0a7c7" + +-- Colors +color0="#050308" +color1="#3D02BD" +color2="#4D0EB5" +color3="#6B2CA7" +color4="#5C07D7" +color5="#5321C4" +color6="#9B5591" +color7="#d0a7c7" +color8="#91748b" +color9="#3D02BD" +color10="#4D0EB5" +color11="#6B2CA7" +color12="#5C07D7" +color13="#5321C4" +color14="#9B5591" +color15="#d0a7c7" diff --git a/styles/colors.json b/styles/colors.json new file mode 100644 index 0000000..bc4aede --- /dev/null +++ b/styles/colors.json @@ -0,0 +1,28 @@ +{ + "wallpaper": "/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png", + "alpha": "100", + + "special": { + "background": "#050308", + "foreground": "#d0a7c7", + "cursor": "#d0a7c7" + }, + "colors": { + "color0": "#050308", + "color1": "#3D02BD", + "color2": "#4D0EB5", + "color3": "#6B2CA7", + "color4": "#5C07D7", + "color5": "#5321C4", + "color6": "#9B5591", + "color7": "#d0a7c7", + "color8": "#91748b", + "color9": "#3D02BD", + "color10": "#4D0EB5", + "color11": "#6B2CA7", + "color12": "#5C07D7", + "color13": "#5321C4", + "color14": "#9B5591", + "color15": "#d0a7c7" + } +} diff --git a/styles/colors.scss b/styles/colors.scss new file mode 100644 index 0000000..5a492e1 --- /dev/null +++ b/styles/colors.scss @@ -0,0 +1,26 @@ +// SCSS Variables +// Generated by 'wal' +$wallpaper: "/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png"; + +// Special +$background: #050308; +$foreground: #d0a7c7; +$cursor: #d0a7c7; + +// Colors +$color0: #050308; +$color1: #3D02BD; +$color2: #4D0EB5; +$color3: #6B2CA7; +$color4: #5C07D7; +$color5: #5321C4; +$color6: #9B5591; +$color7: #d0a7c7; +$color8: #91748b; +$color9: #3D02BD; +$color10: #4D0EB5; +$color11: #6B2CA7; +$color12: #5C07D7; +$color13: #5321C4; +$color14: #9B5591; +$color15: #d0a7c7; diff --git a/styles/colors.sh b/styles/colors.sh new file mode 100644 index 0000000..8686a3f --- /dev/null +++ b/styles/colors.sh @@ -0,0 +1,36 @@ +# Shell variables +# Generated by 'wal' +wallpaper='/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png' + +# Special +background='#050308' +foreground='#d0a7c7' +cursor='#d0a7c7' + +# Colors +color0='#050308' +color1='#3D02BD' +color2='#4D0EB5' +color3='#6B2CA7' +color4='#5C07D7' +color5='#5321C4' +color6='#9B5591' +color7='#d0a7c7' +color8='#91748b' +color9='#3D02BD' +color10='#4D0EB5' +color11='#6B2CA7' +color12='#5C07D7' +color13='#5321C4' +color14='#9B5591' +color15='#d0a7c7' + +# FZF colors +export FZF_DEFAULT_OPTS=" + $FZF_DEFAULT_OPTS + --color fg:7,bg:0,hl:1,fg+:232,bg+:1,hl+:255 + --color info:7,prompt:2,spinner:1,pointer:232,marker:1 +" + +# Fix LS_COLORS being unreadable. +export LS_COLORS="${LS_COLORS}:su=30;41:ow=30;42:st=30;44:" diff --git a/styles/colors.yml b/styles/colors.yml new file mode 100644 index 0000000..366c586 --- /dev/null +++ b/styles/colors.yml @@ -0,0 +1,24 @@ +wallpaper: "/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png" + +special: + background: "#050308" + foreground: "#d0a7c7" + cursor: "#d0a7c7" + +colors: + color0: "#050308" + color1: "#3D02BD" + color2: "#4D0EB5" + color3: "#6B2CA7" + color4: "#5C07D7" + color5: "#5321C4" + color6: "#9B5591" + color7: "#d0a7c7" + color8: "#91748b" + color9: "#3D02BD" + color10: "#4D0EB5" + color11: "#6B2CA7" + color12: "#5C07D7" + color13: "#5321C4" + color14: "#9B5591" + color15: "#d0a7c7" diff --git a/widget/ChargingAlert.tsx b/widget/ChargingAlert.tsx index c8fcec7..6eb6d12 100644 --- a/widget/ChargingAlert.tsx +++ b/widget/ChargingAlert.tsx @@ -125,7 +125,7 @@ export default function ChargingAlert(gdkmonitor: Gdk.Monitor) { fadeIn(alertWindow); - timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2000, () => { + timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2500, () => { fadeOut(alertWindow); timeoutId = 0; return GLib.SOURCE_REMOVE; diff --git a/widget/LowBatteryAlert.tsx b/widget/LowBatteryAlert.tsx index e8e1da1..8c0a16f 100644 --- a/widget/LowBatteryAlert.tsx +++ b/widget/LowBatteryAlert.tsx @@ -56,12 +56,12 @@ export default function LowBatteryAlert(gdkmonitor: Gdk.Monitor) { battery.connect("notify::percentage", () => { const per = battery.percentage; log(per) - if(per === 0.15 && !battery.charging){ + if(per == 0.15 && !battery.charging){ playSound(`~/.config/ags/audio/unplug.mp3`); fadeIn(alertWindow); - timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2000, () => { + timeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 2500, () => { fadeOut(alertWindow); timeoutId = 0; return GLib.SOURCE_REMOVE; From 97b2958f839af8da9f34641b64677485cc587120 Mon Sep 17 00:00:00 2001 From: Aban Muhammed C P Date: Wed, 14 May 2025 18:21:09 +0530 Subject: [PATCH 4/6] cloning from my repo --- README.md | 2 +- make-colors.sh | 2 +- styles/colors.Xresources | 68 ---------------------------------------- styles/colors.css | 28 ----------------- styles/colors.hs | 37 ---------------------- styles/colors.json | 28 ----------------- styles/colors.sh | 36 --------------------- styles/colors.yml | 24 -------------- 8 files changed, 2 insertions(+), 223 deletions(-) delete mode 100644 styles/colors.Xresources delete mode 100644 styles/colors.css delete mode 100644 styles/colors.hs delete mode 100644 styles/colors.json delete mode 100644 styles/colors.sh delete mode 100644 styles/colors.yml diff --git a/README.md b/README.md index e79dc30..a0ed882 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ Includes a Desktop clock, sidebar, and a charging animation. 1. Clone the repository to your configuration directory: ```bash - git clone https://github.com/shreyasskdev/hypr-widgets.git ~/.config/ags + git clone https://github.com/abancp/hypr-widgets.git ~/.config/ags ``` 2. Enable shaders with animation in your **Hyprland** configuration. This step is necessary because, for now, shaders with animation are required. diff --git a/make-colors.sh b/make-colors.sh index 99f1e06..2ee8c39 100755 --- a/make-colors.sh +++ b/make-colors.sh @@ -9,7 +9,7 @@ if [[ -f "$wallpaper_path" ]]; then # Generate color scheme using wal wal -i "$wallpaper_path" --backend auto - mv ~/.cache/wal/colors.* ./styles/ + mv ~/.cache/wal/colors.scss ./styles/colors.scss echo "Color scheme generated with wal." else diff --git a/styles/colors.Xresources b/styles/colors.Xresources deleted file mode 100644 index 136fbb2..0000000 --- a/styles/colors.Xresources +++ /dev/null @@ -1,68 +0,0 @@ -! X colors. -! Generated by 'wal' -*foreground: #d0a7c7 -*background: #050308 -*.foreground: #d0a7c7 -*.background: #050308 -emacs*foreground: #d0a7c7 -emacs*background: #050308 -URxvt*foreground: #d0a7c7 -XTerm*foreground: #d0a7c7 -UXTerm*foreground: #d0a7c7 -URxvt*background: [100]#050308 -XTerm*background: #050308 -UXTerm*background: #050308 -URxvt*cursorColor: #d0a7c7 -XTerm*cursorColor: #d0a7c7 -UXTerm*cursorColor: #d0a7c7 -URxvt*borderColor: [100]#050308 - -! Colors 0-15. -*.color0: #050308 -*color0: #050308 -*.color1: #3D02BD -*color1: #3D02BD -*.color2: #4D0EB5 -*color2: #4D0EB5 -*.color3: #6B2CA7 -*color3: #6B2CA7 -*.color4: #5C07D7 -*color4: #5C07D7 -*.color5: #5321C4 -*color5: #5321C4 -*.color6: #9B5591 -*color6: #9B5591 -*.color7: #d0a7c7 -*color7: #d0a7c7 -*.color8: #91748b -*color8: #91748b -*.color9: #3D02BD -*color9: #3D02BD -*.color10: #4D0EB5 -*color10: #4D0EB5 -*.color11: #6B2CA7 -*color11: #6B2CA7 -*.color12: #5C07D7 -*color12: #5C07D7 -*.color13: #5321C4 -*color13: #5321C4 -*.color14: #9B5591 -*color14: #9B5591 -*.color15: #d0a7c7 -*color15: #d0a7c7 - -! Black color that will not be affected by bold highlighting. -*.color66: #050308 -*color66: #050308 - -! Xclock colors. -XClock*foreground: #d0a7c7 -XClock*background: #050308 -XClock*majorColor: rgba:d0/a7/c7/ff -XClock*minorColor: rgba:d0/a7/c7/ff -XClock*hourColor: rgba:d0/a7/c7/ff -XClock*minuteColor: rgba:d0/a7/c7/ff -XClock*secondColor: rgba:d0/a7/c7/ff - -! Set depth to make transparency work. -URxvt*depth: 32 diff --git a/styles/colors.css b/styles/colors.css deleted file mode 100644 index abbfa45..0000000 --- a/styles/colors.css +++ /dev/null @@ -1,28 +0,0 @@ -/* CSS variables - Generated by 'wal' */ -:root { - --wallpaper: url("/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png"); - - /* Special */ - --background: #050308; - --foreground: #d0a7c7; - --cursor: #d0a7c7; - - /* Colors */ - --color0: #050308; - --color1: #3D02BD; - --color2: #4D0EB5; - --color3: #6B2CA7; - --color4: #5C07D7; - --color5: #5321C4; - --color6: #9B5591; - --color7: #d0a7c7; - --color8: #91748b; - --color9: #3D02BD; - --color10: #4D0EB5; - --color11: #6B2CA7; - --color12: #5C07D7; - --color13: #5321C4; - --color14: #9B5591; - --color15: #d0a7c7; -} diff --git a/styles/colors.hs b/styles/colors.hs deleted file mode 100644 index 92b2e10..0000000 --- a/styles/colors.hs +++ /dev/null @@ -1,37 +0,0 @@ ---Place this file in your .xmonad/lib directory and import module Colors into .xmonad/xmonad.hs config ---The easy way is to create a soft link from this file to the file in .xmonad/lib using ln -s ---Then recompile and restart xmonad. - -module Colors - ( wallpaper - , background, foreground, cursor - , color0, color1, color2, color3, color4, color5, color6, color7 - , color8, color9, color10, color11, color12, color13, color14, color15 - ) where - --- Shell variables --- Generated by 'wal' -wallpaper="/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png" - --- Special -background="#050308" -foreground="#d0a7c7" -cursor="#d0a7c7" - --- Colors -color0="#050308" -color1="#3D02BD" -color2="#4D0EB5" -color3="#6B2CA7" -color4="#5C07D7" -color5="#5321C4" -color6="#9B5591" -color7="#d0a7c7" -color8="#91748b" -color9="#3D02BD" -color10="#4D0EB5" -color11="#6B2CA7" -color12="#5C07D7" -color13="#5321C4" -color14="#9B5591" -color15="#d0a7c7" diff --git a/styles/colors.json b/styles/colors.json deleted file mode 100644 index bc4aede..0000000 --- a/styles/colors.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "wallpaper": "/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png", - "alpha": "100", - - "special": { - "background": "#050308", - "foreground": "#d0a7c7", - "cursor": "#d0a7c7" - }, - "colors": { - "color0": "#050308", - "color1": "#3D02BD", - "color2": "#4D0EB5", - "color3": "#6B2CA7", - "color4": "#5C07D7", - "color5": "#5321C4", - "color6": "#9B5591", - "color7": "#d0a7c7", - "color8": "#91748b", - "color9": "#3D02BD", - "color10": "#4D0EB5", - "color11": "#6B2CA7", - "color12": "#5C07D7", - "color13": "#5321C4", - "color14": "#9B5591", - "color15": "#d0a7c7" - } -} diff --git a/styles/colors.sh b/styles/colors.sh deleted file mode 100644 index 8686a3f..0000000 --- a/styles/colors.sh +++ /dev/null @@ -1,36 +0,0 @@ -# Shell variables -# Generated by 'wal' -wallpaper='/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png' - -# Special -background='#050308' -foreground='#d0a7c7' -cursor='#d0a7c7' - -# Colors -color0='#050308' -color1='#3D02BD' -color2='#4D0EB5' -color3='#6B2CA7' -color4='#5C07D7' -color5='#5321C4' -color6='#9B5591' -color7='#d0a7c7' -color8='#91748b' -color9='#3D02BD' -color10='#4D0EB5' -color11='#6B2CA7' -color12='#5C07D7' -color13='#5321C4' -color14='#9B5591' -color15='#d0a7c7' - -# FZF colors -export FZF_DEFAULT_OPTS=" - $FZF_DEFAULT_OPTS - --color fg:7,bg:0,hl:1,fg+:232,bg+:1,hl+:255 - --color info:7,prompt:2,spinner:1,pointer:232,marker:1 -" - -# Fix LS_COLORS being unreadable. -export LS_COLORS="${LS_COLORS}:su=30;41:ow=30;42:st=30;44:" diff --git a/styles/colors.yml b/styles/colors.yml deleted file mode 100644 index 366c586..0000000 --- a/styles/colors.yml +++ /dev/null @@ -1,24 +0,0 @@ -wallpaper: "/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png" - -special: - background: "#050308" - foreground: "#d0a7c7" - cursor: "#d0a7c7" - -colors: - color0: "#050308" - color1: "#3D02BD" - color2: "#4D0EB5" - color3: "#6B2CA7" - color4: "#5C07D7" - color5: "#5321C4" - color6: "#9B5591" - color7: "#d0a7c7" - color8: "#91748b" - color9: "#3D02BD" - color10: "#4D0EB5" - color11: "#6B2CA7" - color12: "#5C07D7" - color13: "#5321C4" - color14: "#9B5591" - color15: "#d0a7c7" From 1806ff9e663e942620bc2bf890c0edf62455427f Mon Sep 17 00:00:00 2001 From: Aban Muhammed C P Date: Wed, 14 May 2025 18:32:39 +0530 Subject: [PATCH 5/6] default color in styles --- README.md | 8 +++++--- init.sh | 5 ----- make-colors.sh | 18 ------------------ 3 files changed, 5 insertions(+), 26 deletions(-) delete mode 100644 init.sh delete mode 100755 make-colors.sh diff --git a/README.md b/README.md index a0ed882..0aa238a 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,8 @@ Includes a Desktop clock, sidebar, and a charging animation. > **Important**: Before proceeding, open all SCSS files in the project and replace any reference to `colors` with your **username**. Since I haven't found a way to reference the home folder relatively, you'll need to make this change manually to ensure the color scheme is applied correctly. +> **Important**: hypr-widgets have a default color theme But if you need costom colors . create color with pywal and replace in styles/colors.scss + > **Warning**: Make sure you have **pywal16** installed and properly configured to generate colors. The widgets rely on the color scheme generated by **pywal16**, so ensure it is set up before using the widgets. ## Installation @@ -29,7 +31,7 @@ Includes a Desktop clock, sidebar, and a charging animation. 1. Clone the repository to your configuration directory: ```bash - git clone https://github.com/abancp/hypr-widgets.git ~/.config/ags + git clone https://github.com/shreyasskdev/hypr-widgets.git ~/.config/ags ``` 2. Enable shaders with animation in your **Hyprland** configuration. This step is necessary because, for now, shaders with animation are required. @@ -43,11 +45,11 @@ Includes a Desktop clock, sidebar, and a charging animation. **Note**: If you already have shaders enabled in your Hyprland setup, this may cause a conflict. Ensure to resolve any potential conflicts accordingly. - ## Running the Widgets Once everything is set up, you can run the widgets with: ```bash -. ~/.config/ags/init.sh +ags run ``` + diff --git a/init.sh b/init.sh deleted file mode 100644 index 24de75a..0000000 --- a/init.sh +++ /dev/null @@ -1,5 +0,0 @@ -#!/bin/bash - -bash ./make-colors.sh - -ags run diff --git a/make-colors.sh b/make-colors.sh deleted file mode 100755 index 2ee8c39..0000000 --- a/make-colors.sh +++ /dev/null @@ -1,18 +0,0 @@ -#!/bin/bash - -# Get the current wallpaper path from swww -wallpaper_path=$(swww query | grep -oP 'image: \K.*') - -# Check if the file exists -if [[ -f "$wallpaper_path" ]]; then - echo "Using wallpaper: $wallpaper_path" - - # Generate color scheme using wal - wal -i "$wallpaper_path" --backend auto - mv ~/.cache/wal/colors.scss ./styles/colors.scss - - echo "Color scheme generated with wal." -else - echo "Wallpaper not found or swww not running properly." - exit 1 -fi From 17b3a9f3beb80ad35a12775b16f415547220713d Mon Sep 17 00:00:00 2001 From: Aban Muhammed C P Date: Fri, 16 May 2025 08:21:40 +0530 Subject: [PATCH 6/6] text stroke for clock for better visibility --- app.ts | 2 +- styles/DesktopClock.scss | 14 +++++++++++++- styles/colors.scss | 40 ++++++++++++++++++++-------------------- 3 files changed, 34 insertions(+), 22 deletions(-) diff --git a/app.ts b/app.ts index e98c825..7745582 100644 --- a/app.ts +++ b/app.ts @@ -12,7 +12,7 @@ App.start({ css: style, main() { App.get_monitors().forEach((gdkmonitor) => { - Bar(gdkmonitor); + //Bar(gdkmonitor); DesktopClock(gdkmonitor); ChargingAlert(gdkmonitor); LowBatteryAlert(gdkmonitor); diff --git a/styles/DesktopClock.scss b/styles/DesktopClock.scss index 633d520..17be149 100644 --- a/styles/DesktopClock.scss +++ b/styles/DesktopClock.scss @@ -4,10 +4,22 @@ font-weight: bold; font-family: Electroharmonix; color: wal.$background; + + } .clock-time { - font-size: 100px; + font-size: 75px; + text-shadow: + -1px -1px 0 wal.$foreground, + 1px -1px 0 wal.$foreground, + -1px 1px 0 wal.$foreground, + 1px 1px 0 wal.$foreground; } .clock-date { font-size: 25px; + text-shadow: + -1px -1px 0 rgba(wal.$foreground,0.5), + 1px -1px 0 rgba(wal.$foreground,0.5), + -1px 1px 0 rgba(wal.$foreground,0.5), + 1px 1px 0 rgba(wal.$foreground,0.5); } diff --git a/styles/colors.scss b/styles/colors.scss index 5a492e1..8835be4 100644 --- a/styles/colors.scss +++ b/styles/colors.scss @@ -1,26 +1,26 @@ // SCSS Variables // Generated by 'wal' -$wallpaper: "/home/abancp/Pictures/wallpapers/Dynamic-Wallpapers/Dark/Beach-Dark.png"; +$wallpaper: "/home/abancp/Pictures/wallpapers/wallpapers/City/m01.jpg"; // Special -$background: #050308; -$foreground: #d0a7c7; -$cursor: #d0a7c7; +$background: #071F34; +$foreground: #dba089; +$cursor: #dba089; // Colors -$color0: #050308; -$color1: #3D02BD; -$color2: #4D0EB5; -$color3: #6B2CA7; -$color4: #5C07D7; -$color5: #5321C4; -$color6: #9B5591; -$color7: #d0a7c7; -$color8: #91748b; -$color9: #3D02BD; -$color10: #4D0EB5; -$color11: #6B2CA7; -$color12: #5C07D7; -$color13: #5321C4; -$color14: #9B5591; -$color15: #d0a7c7; +$color0: #071F34; +$color1: #302F41; +$color2: #4B3641; +$color3: #6B4243; +$color4: #865636; +$color5: #AE4C2D; +$color6: #85613B; +$color7: #dba089; +$color8: #99705f; +$color9: #302F41; +$color10: #4B3641; +$color11: #6B4243; +$color12: #865636; +$color13: #AE4C2D; +$color14: #85613B; +$color15: #dba089;