forked from Shinonome/dots-hyprland
Added color Schemes support. Added settings GUI in colorscheme-osd
This commit is contained in:
@@ -120,7 +120,53 @@ export const ConfigSegmentedSelection = ({
|
||||
|
||||
}
|
||||
|
||||
export const ConfigMulipleSelection = ({
|
||||
icon, name, desc = '',
|
||||
optionsArr = [
|
||||
[ { name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 } ],
|
||||
[ { name: 'Option 3', value: 0 }, { name: 'Option 4', value: 1 } ],
|
||||
],
|
||||
initIndex = [0, 0],
|
||||
onChange,
|
||||
...rest
|
||||
}) => {
|
||||
let lastSelected = initIndex;
|
||||
let value = optionsArr[initIndex[0]][initIndex[1]].value;
|
||||
const widget = Box({
|
||||
tooltipText: desc,
|
||||
className: 'multipleselection-container spacing-v-3',
|
||||
//homogeneous: true,
|
||||
vertical: true,
|
||||
children: optionsArr.map((options, grp) => {
|
||||
return Box({
|
||||
className: 'spacing-h-5',
|
||||
hpack: 'center',
|
||||
children: options.map((option, id) => {
|
||||
return Button({
|
||||
setup: setupCursorHover,
|
||||
className: `multipleselection-btn ${id == initIndex[1] && grp == initIndex[0] ? 'multipleselection-btn-enabled' : ''}`,
|
||||
label: option.name,
|
||||
onClicked: (self) => {
|
||||
const kidsg = widget.get_children();
|
||||
const kids = kidsg.flatMap(widget => widget.get_children());
|
||||
kids.forEach(kid => {
|
||||
kid.toggleClassName('multipleselection-btn-enabled', false);
|
||||
});
|
||||
lastSelected = id;
|
||||
self.toggleClassName('multipleselection-btn-enabled', true);
|
||||
onChange(option.value, option.name);
|
||||
}
|
||||
})
|
||||
}),
|
||||
})
|
||||
}),
|
||||
...rest,
|
||||
});
|
||||
return widget;
|
||||
|
||||
}
|
||||
|
||||
export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
|
||||
className: `gap-${vertical ? 'v' : 'h'}-${size}`,
|
||||
...rest,
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,51 +1,206 @@
|
||||
const { Gio, GLib } = imports.gi;
|
||||
import Variable from 'resource:///com/github/Aylur/ags/variable.js';
|
||||
import Widget from 'resource:///com/github/Aylur/ags/widget.js';
|
||||
|
||||
const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
|
||||
import { ConfigToggle, ConfigMulipleSelection } from '../.commonwidgets/configwidgets.js';
|
||||
import * as Utils from 'resource:///com/github/Aylur/ags/utils.js';
|
||||
const { execAsync } = Utils;
|
||||
import { setupCursorHover } from '../.widgetutils/cursorhover.js';
|
||||
import { showColorScheme } from '../../variables.js';
|
||||
import { MaterialIcon } from '../.commonwidgets/materialicon.js';
|
||||
|
||||
const ColorBox = ({
|
||||
name = 'Color',
|
||||
...rest
|
||||
}) => Box({
|
||||
}) => Widget.Box({
|
||||
...rest,
|
||||
homogeneous: true,
|
||||
children: [
|
||||
Label({
|
||||
Widget.Label({
|
||||
label: `${name}`,
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
const ColorschemeContent = () => Box({
|
||||
const ColorSchemeSettingsRevealer = () => {
|
||||
const headerButtonIcon = MaterialIcon('expand_more', 'norm');
|
||||
const header = Widget.Button({
|
||||
className: 'osd-settings-btn-arrow',
|
||||
onClicked: () => {
|
||||
content.revealChild = !content.revealChild;
|
||||
headerButtonIcon.label = content.revealChild ? 'expand_less' : 'expand_more';
|
||||
},
|
||||
setup: setupCursorHover,
|
||||
hpack: 'end',
|
||||
child: headerButtonIcon,
|
||||
});
|
||||
const content = Widget.Revealer({
|
||||
revealChild: false,
|
||||
transition: 'slide_down',
|
||||
transitionDuration: 200,
|
||||
child: ColorSchemeSettings(),
|
||||
setup: (self) => self.hook(isHoveredColorschemeSettings, (revealer) => {
|
||||
if (isHoveredColorschemeSettings.value == false) {
|
||||
setTimeout(() => {
|
||||
if (isHoveredColorschemeSettings.value == false)
|
||||
revealer.revealChild = false;
|
||||
headerButtonIcon.label = 'expand_more';
|
||||
}, 1500);
|
||||
}
|
||||
}),
|
||||
});
|
||||
return Widget.EventBox({
|
||||
onHover: (self) => {
|
||||
isHoveredColorschemeSettings.setValue(true);
|
||||
},
|
||||
onHoverLost: (self) => {
|
||||
isHoveredColorschemeSettings.setValue(false);
|
||||
},
|
||||
child: Widget.Box({
|
||||
vertical: true,
|
||||
children: [
|
||||
header,
|
||||
content,
|
||||
]
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
function calculateSchemeInitIndex(optionsArr, searchValue = 'monochrome') {
|
||||
const flatArray = optionsArr.flatMap(subArray => subArray);
|
||||
const result = flatArray.findIndex(element => element.value === searchValue);
|
||||
const rowIndex = Math.floor(result / optionsArr[0].length);
|
||||
const columnIndex = result % optionsArr[0].length;
|
||||
return [rowIndex, columnIndex];
|
||||
}
|
||||
|
||||
const schemeOptionsArr = [
|
||||
[
|
||||
{ name: 'Tonal Spot', value: 'tonalspot' },
|
||||
{ name: 'Fruit Salad', value: 'fruitsalad' },
|
||||
{ name: 'Fidelity', value: 'fidelity' },
|
||||
{ name: 'Rainbow', value: 'rainbow' },
|
||||
],
|
||||
[
|
||||
{ name: 'Neutral', value: 'neutral' },
|
||||
{ name: 'Monochrome', value: 'monochrome' },
|
||||
{ name: 'Expressive', value: 'expressive' },
|
||||
{ name: 'Vibrant', value: 'vibrant' },
|
||||
],
|
||||
//[
|
||||
// { name: 'Content', value: 'content' },
|
||||
//]
|
||||
];
|
||||
|
||||
const initColorMode = Utils.exec('bash -c "sed -n \'1p\' $HOME/.cache/ags/user/colormode.txt"');
|
||||
const initColorVal = (initColorMode == "dark") ? 1 : 0;
|
||||
const initTransperancy = Utils.exec('bash -c "sed -n \'2p\' $HOME/.cache/ags/user/colormode.txt"');
|
||||
const initTransperancyVal = (initTransperancy == "transparent") ? 1 : 0;
|
||||
const initScheme = Utils.exec('bash -c "sed -n \'3p\' $HOME/.cache/ags/user/colormode.txt"');
|
||||
const initSchemeIndex = calculateSchemeInitIndex(schemeOptionsArr, initScheme);
|
||||
|
||||
const ColorSchemeSettings = () => Widget.Box({
|
||||
className: 'osd-colorscheme-settings spacing-v-5',
|
||||
vertical: true,
|
||||
vpack: 'center',
|
||||
children: [
|
||||
Widget.Box({
|
||||
children: [
|
||||
ConfigToggle({
|
||||
name: 'Dark Mode',
|
||||
initValue: initColorVal,
|
||||
onChange: (self, newValue) => {
|
||||
let lightdark = newValue == 0 ? "light" : "dark";
|
||||
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "1s/.*/${lightdark}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||
.catch(print);
|
||||
},
|
||||
}),
|
||||
ConfigToggle({
|
||||
name: 'Transperancy',
|
||||
initValue: initTransperancyVal,
|
||||
onChange: (self, newValue) => {
|
||||
let transperancy = newValue == 0 ? "opaque" : "transparent";
|
||||
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "2s/.*/${transperancy}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||
.catch(print);
|
||||
},
|
||||
}),
|
||||
]
|
||||
}),
|
||||
ConfigMulipleSelection({
|
||||
hpack: 'center',
|
||||
vpack: 'center',
|
||||
optionsArr: schemeOptionsArr,
|
||||
initIndex: initSchemeIndex,
|
||||
onChange: (value, name) => {
|
||||
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && sed -i "3s/.*/${value}/" ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||
.then(execAsync(['bash', '-c', `${App.configDir}/scripts/color_generation/switchcolor.sh`]))
|
||||
.catch(print);
|
||||
},
|
||||
}),
|
||||
]
|
||||
});
|
||||
|
||||
const ColorschemeContent = () => Widget.Box({
|
||||
className: 'osd-colorscheme spacing-v-5',
|
||||
vertical: true,
|
||||
hpack: 'center',
|
||||
children: [
|
||||
Label({
|
||||
Widget.Label({
|
||||
xalign: 0,
|
||||
className: 'txt-norm titlefont txt',
|
||||
label: 'Colorscheme',
|
||||
hpack: 'center',
|
||||
}),
|
||||
Box({
|
||||
Widget.Box({
|
||||
className: 'spacing-h-5',
|
||||
hpack: 'center',
|
||||
children: [
|
||||
ColorBox({ name: 'P', className: 'osd-color osd-color-primary' }),
|
||||
ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }),
|
||||
ColorBox({ name: 'S', className: 'osd-color osd-color-secondary' }),
|
||||
ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
|
||||
ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
|
||||
ColorBox({ name: 'T', className: 'osd-color osd-color-tertiary' }),
|
||||
ColorBox({ name: 'Sf', className: 'osd-color osd-color-surface' }),
|
||||
ColorBox({ name: 'Bg', className: 'osd-color osd-color-background' }),
|
||||
ColorBox({ name: 'Sf-i', className: 'osd-color osd-color-inverseSurface' }),
|
||||
ColorBox({ name: 'E', className: 'osd-color osd-color-error' }),
|
||||
]
|
||||
})
|
||||
}),
|
||||
Widget.Box({
|
||||
className: 'spacing-h-5',
|
||||
hpack: 'center',
|
||||
children: [
|
||||
ColorBox({ name: 'P-c', className: 'osd-color osd-color-primaryContainer' }),
|
||||
ColorBox({ name: 'S-c', className: 'osd-color osd-color-secondaryContainer' }),
|
||||
ColorBox({ name: 'T-c', className: 'osd-color osd-color-tertiaryContainer' }),
|
||||
ColorBox({ name: 'Sf-c', className: 'osd-color osd-color-surfaceContainer' }),
|
||||
ColorBox({ name: 'Sf-v', className: 'osd-color osd-color-surfaceVariant' }),
|
||||
ColorBox({ name: 'E-c', className: 'osd-color osd-color-errorContainer' }),
|
||||
]
|
||||
}),
|
||||
ColorSchemeSettingsRevealer(),
|
||||
]
|
||||
});
|
||||
|
||||
const isHoveredColorschemeSettings = Variable(false);
|
||||
|
||||
export default () => Widget.Revealer({
|
||||
transition: 'slide_down',
|
||||
transitionDuration: 200,
|
||||
child: ColorschemeContent(),
|
||||
setup: (self) => self.hook(showColorScheme, (revealer) => {
|
||||
revealer.revealChild = showColorScheme.value;
|
||||
}),
|
||||
setup: (self) => {
|
||||
self
|
||||
.hook(showColorScheme, (revealer) => {
|
||||
if (showColorScheme.value == true)
|
||||
revealer.revealChild = true;
|
||||
else
|
||||
revealer.revealChild = isHoveredColorschemeSettings.value;
|
||||
})
|
||||
.hook(isHoveredColorschemeSettings, (revealer) => {
|
||||
if (isHoveredColorschemeSettings.value == false) {
|
||||
setTimeout(() => {
|
||||
if (isHoveredColorschemeSettings.value == false)
|
||||
revealer.revealChild = showColorScheme.value;
|
||||
}, 2000);
|
||||
}
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
@@ -19,7 +19,7 @@ export function launchCustomCommand(command) {
|
||||
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchwall.sh`, `&`]).catch(print);
|
||||
}
|
||||
else if (args[0] == '>color') { // Generate colorscheme from color picker
|
||||
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh`, `&`]).catch(print);
|
||||
execAsync([`bash`, `-c`, `${App.configDir}/scripts/color_generation/switchcolor.sh --pick`, `&`]).catch(print);
|
||||
}
|
||||
else if (args[0] == '>light') { // Light mode
|
||||
execAsync([`bash`, `-c`, `mkdir -p ${GLib.get_user_cache_dir()}/ags/user && echo "-l" > ${GLib.get_user_cache_dir()}/ags/user/colormode.txt`])
|
||||
@@ -138,4 +138,4 @@ export function ls({ path = '~', silent = false }) {
|
||||
if (!silent) console.log(e);
|
||||
}
|
||||
return contents;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -53,4 +53,4 @@ export default ({
|
||||
content,
|
||||
]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -90,4 +90,4 @@ export default () => SidebarModule({
|
||||
})
|
||||
}),
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
term_alpha=100 #Set this to < 100 make all your terminals transparent
|
||||
term_alpha=80 #Set this to < 100 make all your terminals transparent
|
||||
# sleep 0 # idk i wanted some delay or colors dont get applied properly
|
||||
if [ ! -d "$HOME"/.cache/ags/user/generated ]; then
|
||||
mkdir -p "$HOME"/.cache/ags/user/generated
|
||||
@@ -52,7 +52,7 @@ get_light_dark() {
|
||||
if [ ! -f "$HOME"/.cache/ags/user/colormode.txt ]; then
|
||||
echo "" > "$HOME"/.cache/ags/user/colormode.txt
|
||||
else
|
||||
lightdark=$(cat "$HOME"/.cache/ags/user/colormode.txt) # either "" or "-l"
|
||||
lightdark=$(sed -n '1p' "$HOME/.cache/ags/user/colormode.txt")
|
||||
fi
|
||||
echo "$lightdark"
|
||||
}
|
||||
@@ -163,7 +163,7 @@ apply_gtk() { # Using gradience-cli
|
||||
# Set light/dark preference
|
||||
# And set GTK theme manually as Gradience defaults to light adw-gtk3
|
||||
# (which is unreadable when broken when you use dark mode)
|
||||
if [ "$lightdark" = "-l" ]; then
|
||||
if [ "$lightdark" = "light" ]; then
|
||||
gsettings set org.gnome.desktop.interface gtk-theme 'adw-gtk3'
|
||||
gsettings set org.gnome.desktop.interface color-scheme 'prefer-light'
|
||||
else
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
source ${HOME}/virtualenvs/my_project_venv/bin/activate
|
||||
|
||||
# check if no arguments
|
||||
if [ $# -eq 0 ]; then
|
||||
@@ -9,11 +8,15 @@ if [ $# -eq 0 ]; then
|
||||
fi
|
||||
|
||||
# check if the file ~/.cache/ags/user/colormode.txt exists. if not, create it. else, read it to $lightdark
|
||||
lightdark=""
|
||||
lightdark="dark"
|
||||
transparency="opaque"
|
||||
materialscheme="tonalspot"
|
||||
if [ ! -f "$HOME/.cache/ags/user/colormode.txt" ]; then
|
||||
echo "" > "$HOME/.cache/ags/user/colormode.txt"
|
||||
echo "dark\nopaque\ntonalspot" > "$HOME/.cache/ags/user/colormode.txt"
|
||||
else
|
||||
lightdark=$(cat "$HOME/.cache/ags/user/colormode.txt") # either "" or "-l"
|
||||
lightdark=$(sed -n '1p' "$HOME/.cache/ags/user/colormode.txt")
|
||||
transparency=$(sed -n '2p' "$HOME/.cache/ags/user/colormode.txt")
|
||||
materialscheme=$(sed -n '3p' "$HOME/.cache/ags/user/colormode.txt")
|
||||
fi
|
||||
backend="material" # color generator backend
|
||||
if [ ! -f "$HOME/.cache/ags/user/colorbackend.txt" ]; then
|
||||
@@ -24,13 +27,17 @@ fi
|
||||
|
||||
cd "$HOME/.config/ags/scripts/" || exit
|
||||
if [[ "$1" = "#"* ]]; then # this is a color
|
||||
color_generation/generate_colors_material.py --color "$1" "$lightdark" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
||||
source ${HOME}/virtualenvs/my_project_venv/bin/activate
|
||||
color_generation/generate_colors_material.py --color "$1" --mode "$lightdark" --scheme "$materialscheme" --transparency "$transparency" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
||||
deactivate
|
||||
if [ "$2" = "--apply" ]; then
|
||||
cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss"
|
||||
color_generation/applycolor.sh
|
||||
fi
|
||||
elif [ "$backend" = "material" ]; then
|
||||
color_generation/generate_colors_material.py --path "$1" "$lightdark" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
||||
source ${HOME}/virtualenvs/my_project_venv/bin/activate
|
||||
color_generation/generate_colors_material.py --path "$1" --mode "$lightdark" --scheme "$materialscheme" --transparency "$transparency" > "$HOME"/.cache/ags/user/generated/material_colors.scss
|
||||
deactivate
|
||||
if [ "$2" = "--apply" ]; then
|
||||
cp "$HOME"/.cache/ags/user/generated/material_colors.scss "$HOME/.config/ags/scss/_material.scss"
|
||||
color_generation/applycolor.sh
|
||||
|
||||
@@ -3,159 +3,82 @@ from material_color_utilities_python import *
|
||||
from pathlib import Path
|
||||
import sys
|
||||
import subprocess
|
||||
import argparse
|
||||
import os
|
||||
|
||||
# Color in hue, chroma, tone form
|
||||
from materialyoucolor.hct import Hct
|
||||
from materialyoucolor.dynamiccolor.material_dynamic_colors import MaterialDynamicColors
|
||||
# There are 9 different variants of scheme.
|
||||
|
||||
parser = argparse.ArgumentParser(description='Color generation script')
|
||||
parser.add_argument('--path', type=str, default=None, help='generate colorscheme from image')
|
||||
parser.add_argument('--color', type=str, default=None, help='generate colorscheme from color')
|
||||
parser.add_argument('--mode', type=str , choices=['dark', 'light'], default='dark', help='dark or light mode')
|
||||
parser.add_argument('--scheme', type=str, default=None, help='material scheme to use')
|
||||
parser.add_argument('--transparency', type=str , choices=['opaque', 'transparent'], default='opaque', help='enable transparency')
|
||||
parser.add_argument('--debug', action='store_true', default=False, help='debug mode')
|
||||
args = parser.parse_args()
|
||||
|
||||
export_color_file=os.environ['HOME']+"/.cache/ags/user/color.txt"
|
||||
|
||||
# Default scheme -> Tonal Spot (Android Default)
|
||||
from materialyoucolor.scheme.scheme_tonal_spot import SchemeTonalSpot as Scheme
|
||||
#from materialyoucolor.scheme.scheme_fruit_salad import SchemeFruitSalad as Scheme
|
||||
#from materialyoucolor.scheme.scheme_expressive import SchemeExpressive as Scheme
|
||||
#from materialyoucolor.scheme.scheme_monochrome import SchemeMonochrome as Scheme
|
||||
#from materialyoucolor.scheme.scheme_rainbow import SchemeRainbow as Scheme
|
||||
#from materialyoucolor.scheme.scheme_vibrant import SchemeVibrant as Scheme
|
||||
#from materialyoucolor.scheme.scheme_neutral import SchemeNeutral as Scheme
|
||||
#from materialyoucolor.scheme.scheme_fidelity import SchemeFidelity as Scheme
|
||||
#from materialyoucolor.scheme.scheme_content import SchemeContent as Scheme
|
||||
# Others you can import: SchemeExpressive, SchemeFruitSalad, SchemeMonochrome, SchemeRainbow, SchemeVibrant, SchemeNeutral, SchemeFidelity and SchemeContent
|
||||
if args.scheme is not None:
|
||||
if args.scheme == 'fruitsalad':
|
||||
from materialyoucolor.scheme.scheme_fruit_salad import SchemeFruitSalad as Scheme
|
||||
elif args.scheme == 'expressive':
|
||||
from materialyoucolor.scheme.scheme_expressive import SchemeExpressive as Scheme
|
||||
elif args.scheme == 'monochrome':
|
||||
from materialyoucolor.scheme.scheme_monochrome import SchemeMonochrome as Scheme
|
||||
elif args.scheme == 'rainbow':
|
||||
from materialyoucolor.scheme.scheme_rainbow import SchemeRainbow as Scheme
|
||||
elif args.scheme == 'vibrant':
|
||||
from materialyoucolor.scheme.scheme_vibrant import SchemeVibrant as Scheme
|
||||
elif args.scheme == 'neutral':
|
||||
from materialyoucolor.scheme.scheme_neutral import SchemeNeutral as Scheme
|
||||
elif args.scheme == 'fidelity':
|
||||
from materialyoucolor.scheme.scheme_fidelity import SchemeFidelity as Scheme
|
||||
elif args.scheme == 'content':
|
||||
from materialyoucolor.scheme.scheme_content import SchemeContent as Scheme
|
||||
|
||||
def darken(hex_color, factor=0.7):
|
||||
if not (hex_color.startswith('#') and len(hex_color) in (4, 7)):
|
||||
raise ValueError("Invalid hex color format")
|
||||
hex_color = hex_color.lstrip('#')
|
||||
rgb = tuple(int(hex_color[i:i + 2], 16) for i in (0, 2, 4))
|
||||
darkened_rgb = tuple(int(max(0, val * factor)) for val in rgb)
|
||||
darkened_hex = "#{:02X}{:02X}{:02X}".format(*darkened_rgb)
|
||||
return darkened_hex
|
||||
def hex_to_argb(hex_color):
|
||||
color = hex_color.lstrip('#')
|
||||
if len(color) != 6:
|
||||
raise ValueError("Invalid color code!")
|
||||
r = int(color[:2], 16)
|
||||
g = int(color[2:4], 16)
|
||||
b = int(color[4:], 16)
|
||||
a = 255
|
||||
argb = (a << 24) | (r << 16) | (g << 8) | b
|
||||
return argb
|
||||
|
||||
img = 0
|
||||
newtheme=0
|
||||
if len(sys.argv) > 1 and sys.argv[1] == '--path':
|
||||
# try:
|
||||
img = Image.open(sys.argv[2])
|
||||
def argb_to_hex(argb_value):
|
||||
r = (argb_value >> 16) & 0xff
|
||||
g = (argb_value >> 8) & 0xff
|
||||
b = argb_value & 0xff
|
||||
hex_r = format(r, '02x')
|
||||
hex_g = format(g, '02x')
|
||||
hex_b = format(b, '02x')
|
||||
hex_color = f"#{hex_r}{hex_g}{hex_b}"
|
||||
return hex_color
|
||||
|
||||
darkmode = (args.mode == 'dark')
|
||||
transparent = (args.transparency == 'transparent')
|
||||
print(f"$darkmode: {darkmode};")
|
||||
print(f"$transparent: {transparent};")
|
||||
|
||||
if args.path is not None:
|
||||
img = Image.open(args.path)
|
||||
basewidth = 64
|
||||
wpercent = (basewidth/float(img.size[0]))
|
||||
hsize = int((float(img.size[1])*float(wpercent)))
|
||||
img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
|
||||
newtheme = themeFromImage(img)
|
||||
argb = sourceColorFromImage(img)
|
||||
with open(export_color_file, 'w') as file:
|
||||
file.write(argb_to_hex(argb))
|
||||
elif args.color is not None:
|
||||
argb = hex_to_argb(args.color)
|
||||
|
||||
scheme = Scheme(Hct.from_int(argb), True, 0.0)
|
||||
|
||||
# except FileNotFoundError:
|
||||
# print('[generate_colors_material.py] File not found', file=sys.stderr);
|
||||
# exit()
|
||||
# except:
|
||||
# print('[generate_colors_material.py] Something went wrong', file=sys.stderr);
|
||||
# exit()
|
||||
elif len(sys.argv) > 1 and sys.argv[1] == '--color':
|
||||
colorstr = sys.argv[2]
|
||||
newtheme = themeFromSourceColor(argbFromHex(colorstr))
|
||||
else:
|
||||
# try:
|
||||
# imagePath = subprocess.check_output("ags run-js 'wallpaper.get(0)'", shell=True)
|
||||
imagePath = subprocess.check_output("swww query | awk -F 'image: ' '{print $2}'", shell=True)
|
||||
imagePath = imagePath[:-1].decode("utf-8")
|
||||
img = Image.open(imagePath)
|
||||
basewidth = 64
|
||||
wpercent = (basewidth/float(img.size[0]))
|
||||
hsize = int((float(img.size[1])*float(wpercent)))
|
||||
img = img.resize((basewidth,hsize),Image.Resampling.LANCZOS)
|
||||
newtheme = themeFromImage(img)
|
||||
# except FileNotFoundError:
|
||||
# print('[generate_colors_material.py] File not found', file=sys.stderr)
|
||||
# exit()
|
||||
# except:
|
||||
# print('[generate_colors_material.py] Something went wrong', file=sys.stderr);
|
||||
# exit()
|
||||
|
||||
colorscheme=0
|
||||
darkmode = True
|
||||
if("-l" in sys.argv):
|
||||
darkmode = False
|
||||
colorscheme = newtheme.get('schemes').get('light')
|
||||
print('$darkmode: false;')
|
||||
else:
|
||||
colorscheme = newtheme.get('schemes').get('dark')
|
||||
print('$darkmode: true;')
|
||||
|
||||
#primary = hexFromArgb(colorscheme.get_primary())
|
||||
#onPrimary = hexFromArgb(colorscheme.get_onPrimary())
|
||||
#primaryContainer = hexFromArgb(colorscheme.get_primaryContainer())
|
||||
#onPrimaryContainer = hexFromArgb(colorscheme.get_onPrimaryContainer())
|
||||
#secondary = hexFromArgb(colorscheme.get_secondary())
|
||||
#onSecondary = hexFromArgb(colorscheme.get_onSecondary())
|
||||
#secondaryContainer = hexFromArgb(colorscheme.get_secondaryContainer())
|
||||
#onSecondaryContainer = hexFromArgb(colorscheme.get_onSecondaryContainer())
|
||||
#tertiary = hexFromArgb(colorscheme.get_tertiary())
|
||||
#onTertiary = hexFromArgb(colorscheme.get_onTertiary())
|
||||
#tertiaryContainer = hexFromArgb(colorscheme.get_tertiaryContainer())
|
||||
#onTertiaryContainer = hexFromArgb(colorscheme.get_onTertiaryContainer())
|
||||
#error = hexFromArgb(colorscheme.get_error())
|
||||
#onError = hexFromArgb(colorscheme.get_onError())
|
||||
#errorContainer = hexFromArgb(colorscheme.get_errorContainer())
|
||||
#onErrorContainer = hexFromArgb(colorscheme.get_onErrorContainer())
|
||||
#background = hexFromArgb(colorscheme.get_background())
|
||||
#onBackground = hexFromArgb(colorscheme.get_onBackground())
|
||||
#surface = hexFromArgb(colorscheme.get_surface())
|
||||
#onSurface = hexFromArgb(colorscheme.get_onSurface())
|
||||
#surfaceVariant = hexFromArgb(colorscheme.get_surfaceVariant())
|
||||
#onSurfaceVariant = hexFromArgb(colorscheme.get_onSurfaceVariant())
|
||||
#outline = hexFromArgb(colorscheme.get_outline())
|
||||
#shadow = hexFromArgb(colorscheme.get_shadow())
|
||||
#inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
|
||||
#inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
|
||||
#inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
|
||||
|
||||
|
||||
# make material less boring
|
||||
#if darkmode:
|
||||
# background = darken(background, 0.6)
|
||||
|
||||
#print('$primary: ' + primary + ';')
|
||||
#print('$onPrimary: ' + onPrimary + ';')
|
||||
#print('$primaryContainer: ' + primaryContainer + ';')
|
||||
#print('$onPrimaryContainer: ' + onPrimaryContainer + ';')
|
||||
#print('$secondary: ' + secondary + ';')
|
||||
#print('$onSecondary: ' + onSecondary + ';')
|
||||
#print('$secondaryContainer: ' + secondaryContainer + ';')
|
||||
#print('$onSecondaryContainer: ' + onSecondaryContainer + ';')
|
||||
#print('$tertiary: ' + tertiary + ';')
|
||||
#print('$onTertiary: ' + onTertiary + ';')
|
||||
#print('$tertiaryContainer: ' + tertiaryContainer + ';')
|
||||
#print('$onTertiaryContainer: ' + onTertiaryContainer + ';')
|
||||
#print('$error: ' + error + ';')
|
||||
#print('$onError: ' + onError + ';')
|
||||
#print('$errorContainer: ' + errorContainer + ';')
|
||||
#print('$onErrorContainer: ' + onErrorContainer + ';')
|
||||
#print('$colorbarbg: ' + background + ';')
|
||||
#print('$background: ' + background + ';')
|
||||
#print('$onBackground: ' + onBackground + ';')
|
||||
#print('$surface: ' + surface + ';')
|
||||
#print('$onSurface: ' + onSurface + ';')
|
||||
#print('$surfaceVariant: ' + surfaceVariant + ';')
|
||||
#print('$onSurfaceVariant: ' + onSurfaceVariant + ';')
|
||||
#print('$outline: ' + outline + ';')
|
||||
#print('$shadow: ' + shadow + ';')
|
||||
#print('$inverseSurface: ' + inverseSurface + ';')
|
||||
#print('$inverseOnSurface: ' + inverseOnSurface + ';')
|
||||
#print('$inversePrimary: ' + inversePrimary + ';')
|
||||
#print('$indsddsdversePrimary: ' + inversePrimary + ';')
|
||||
|
||||
|
||||
|
||||
if len(sys.argv) > 4:
|
||||
if sys.argv[4] == '--debug':
|
||||
for color in vars(MaterialDynamicColors).keys():
|
||||
color_name = getattr(MaterialDynamicColors, color)
|
||||
if hasattr(color_name, "get_hct"):
|
||||
rgba = color_name.get_hct(scheme).to_rgba()
|
||||
r, g, b, a = rgba
|
||||
hex_color = f"#{r:02X}{g:02X}{b:02X}"
|
||||
print(color.ljust(32), "\x1B[38;2;{};{};{}m{}\x1B[0m".format(rgba[0], rgba[1], rgba[2], "\x1b[7m \x1b[7m"), hex_color)
|
||||
|
||||
print('\nHey :\n')
|
||||
|
||||
scheme = Scheme(Hct.from_int(argb), darkmode, 0.0)
|
||||
|
||||
for color in vars(MaterialDynamicColors).keys():
|
||||
color_name = getattr(MaterialDynamicColors, color)
|
||||
@@ -165,4 +88,11 @@ for color in vars(MaterialDynamicColors).keys():
|
||||
hex_color = f"#{r:02X}{g:02X}{b:02X}"
|
||||
print('$' + color + ': ' + hex_color + ';')
|
||||
|
||||
print('$colorbarbg: ' + '#000000' + ';')
|
||||
if args.debug == True:
|
||||
for color in vars(MaterialDynamicColors).keys():
|
||||
color_name = getattr(MaterialDynamicColors, color)
|
||||
if hasattr(color_name, "get_hct"):
|
||||
rgba = color_name.get_hct(scheme).to_rgba()
|
||||
r, g, b, a = rgba
|
||||
hex_color = f"#{r:02X}{g:02X}{b:02X}"
|
||||
print(color.ljust(32), "\x1B[38;2;{};{};{}m{}\x1B[0m".format(rgba[0], rgba[1], rgba[2], "\x1b[7m \x1b[7m"), hex_color)
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
color=$(hyprpicker --no-fancy)
|
||||
if [ "$1" == "--pick" ]; then
|
||||
color=$(hyprpicker --no-fancy)
|
||||
else
|
||||
color=$(cut -f1 "${HOME}/.cache/ags/user/color.txt")
|
||||
fi
|
||||
|
||||
# Generate colors for ags n stuff
|
||||
"$HOME"/.config/ags/scripts/color_generation/colorgen.sh "${color}" --apply
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
if [ "$1" == "--noswitch" ]; then
|
||||
imgpath=$(swww query | awk -F 'image: ' '{print $2}')
|
||||
imgpath=$(swww query | awk -F 'image: ' '{print $2}' | head -n 1)
|
||||
# imgpath=$(ags run-js 'wallpaper.get(0)')
|
||||
else
|
||||
# Select and set image (hyprland)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
///////////// COLOR MODIFICATIONS /////////////
|
||||
// Material colors provide excellent readability, but can be uninteresting.
|
||||
// This is an attempt to improve that.
|
||||
$transparency_enabled: false;
|
||||
//$transparency_enabled: false;
|
||||
|
||||
//@if $transparency_enabled ==false {
|
||||
// @if $darkmode ==true {
|
||||
@@ -35,6 +35,7 @@ $transparency_enabled: false;
|
||||
//}
|
||||
//
|
||||
//// Amounts
|
||||
$transparency: 0.7;
|
||||
$transparentize_amount: 0.3;
|
||||
$transparentize_surface_amount_less: 0.6;
|
||||
$transparentize_surface_amount_less_less: 0.55;
|
||||
@@ -62,7 +63,7 @@ $onSuccess: #ffffff;
|
||||
$successContainer: #d1e8d5;
|
||||
$onSuccessContainer: #0c1f13;
|
||||
|
||||
@if $darkmode ==true {
|
||||
@if $darkmode == True {
|
||||
// Dark variant
|
||||
$success: #b5ccba;
|
||||
$onSuccess: #213528;
|
||||
@@ -70,6 +71,22 @@ $onSuccessContainer: #0c1f13;
|
||||
$onSuccessContainer: #d1e9d6;
|
||||
}
|
||||
|
||||
@if $transparent == True {
|
||||
|
||||
$background: transparentize($background, $transparency);
|
||||
$surface: transparentize($surface, $transparency);
|
||||
$surfaceDim: transparentize($surfaceDim, $transparency);
|
||||
$surfaceBright: transparentize($surfaceBright, $transparency);
|
||||
$surfaceContainerLowest: transparentize($surfaceContainerLowest, $transparency);
|
||||
$surfaceContainerLow: transparentize($surfaceContainerLow, $transparency);
|
||||
$surfaceContainer: transparentize($surfaceContainer, $transparency);
|
||||
$surfaceContainerHigh: transparentize($surfaceContainerHigh, $transparency);
|
||||
$surfaceContainerHighest: transparentize($surfaceContainerHighest, $transparency);
|
||||
$surfaceVariant: transparentize($surfaceVariant, $transparency);
|
||||
$inverseSurface: transparentize($inverseSurface, $transparency);
|
||||
$surfaceTint: transparentize($surfaceTint, $transparency);
|
||||
}
|
||||
|
||||
// Transparent versions
|
||||
$t_primary: transparentize($primary, $transparentize_amount);
|
||||
$t_onPrimary: transparentize($onPrimary, $transparentize_amount);
|
||||
@@ -89,7 +106,6 @@ $t_error: transparentize($error, $transparentize_amount);
|
||||
$t_onError: transparentize($onError, $transparentize_amount);
|
||||
$t_errorContainer: transparentize($errorContainer, $transparentize_amount);
|
||||
$t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
|
||||
$t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
|
||||
$t_background: transparentize($background, $transparentize_amount);
|
||||
$t_t_background: transparentize($background, $transparentize_surface_amount_more);
|
||||
$t_onBackground: transparentize($onBackground, $transparentize_amount);
|
||||
|
||||
@@ -209,6 +209,31 @@ popover {
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.multipleselection-container {
|
||||
}
|
||||
|
||||
.multipleselection-btn {
|
||||
@include small-rounding;
|
||||
padding: 0rem 0.341rem;
|
||||
border: 0.034rem solid $outlineVariant;
|
||||
}
|
||||
|
||||
.multipleselection-btn:focus,
|
||||
.multipleselection-btn:hover {
|
||||
background-color: $hovercolor;
|
||||
}
|
||||
|
||||
.multipleselection-btn-enabled {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.multipleselection-btn-enabled:hover,
|
||||
.multipleselection-btn-enabled:focus {
|
||||
background-color: $secondaryContainer;
|
||||
color: $onSecondaryContainer;
|
||||
}
|
||||
|
||||
.gap-v-5 {
|
||||
min-height: 0.341rem;
|
||||
}
|
||||
@@ -231,4 +256,4 @@ popover {
|
||||
|
||||
.gap-h-15 {
|
||||
min-width: 1.023rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,30 +1,56 @@
|
||||
$darkmode: true;
|
||||
$primary: #e2e2e2;
|
||||
$onPrimary: #000000;
|
||||
$primaryContainer: #6b6b6b;
|
||||
$onPrimaryContainer: #e2e2e2;
|
||||
$secondary: #e2e2e2;
|
||||
$onSecondary: #000000;
|
||||
$secondaryContainer: #313131;
|
||||
$onSecondaryContainer: #e2e2e2;
|
||||
$tertiary: #e2e2e2;
|
||||
$onTertiary: #000000;
|
||||
$tertiaryContainer: #000000;
|
||||
$onTertiaryContainer: #e2e2e2;
|
||||
$error: #e2e2e2;
|
||||
$onError: #000000;
|
||||
$errorContainer: #000000;
|
||||
$onErrorContainer: #e2e2e2;
|
||||
$colorbarbg: #000000;
|
||||
$background: #000000;
|
||||
$onBackground: #e2e2e2;
|
||||
$surface: #161616;
|
||||
$onSurface: #e2e2e2;
|
||||
$surfaceVariant: #242424;
|
||||
$onSurfaceVariant: #e2e2e2;
|
||||
$outline: #a1a1a1;
|
||||
$darkmode: True;
|
||||
$transparent: False;
|
||||
$primary_paletteKeyColor: #977126;
|
||||
$secondary_paletteKeyColor: #877456;
|
||||
$tertiary_paletteKeyColor: #657E5B;
|
||||
$neutral_paletteKeyColor: #7E766B;
|
||||
$neutral_variant_paletteKeyColor: #807667;
|
||||
$background: #17130B;
|
||||
$onBackground: #ECE1D4;
|
||||
$surface: #17130B;
|
||||
$surfaceDim: #17130B;
|
||||
$surfaceBright: #3E382F;
|
||||
$surfaceContainerLowest: #FFFFFF;
|
||||
$surfaceContainerLow: #201B13;
|
||||
$surfaceContainer: #241F17;
|
||||
$surfaceContainerHigh: #2F2921;
|
||||
$surfaceContainerHighest: #3A342B;
|
||||
$onSurface: #ECE1D4;
|
||||
$surfaceVariant: #4E4639;
|
||||
$onSurfaceVariant: #D1C5B4;
|
||||
$inverseSurface: #ECE1D4;
|
||||
$inverseOnSurface: #353027;
|
||||
$outline: #9A8F80;
|
||||
$outlineVariant: #4E4639;
|
||||
$shadow: #000000;
|
||||
$inverseSurface: #e2e2e2;
|
||||
$inverseOnSurface: #000000;
|
||||
$inversePrimary: #e2e2e2;
|
||||
|
||||
$scrim: #000000;
|
||||
$surfaceTint: #EEBF6D;
|
||||
$primary: #EEBF6D;
|
||||
$onPrimary: #422C00;
|
||||
$primaryContainer: #5E4100;
|
||||
$onPrimaryContainer: #FFDEA9;
|
||||
$inversePrimary: #7B580D;
|
||||
$secondary: #DAC3A1;
|
||||
$onSecondary: #3C2E16;
|
||||
$secondaryContainer: #57472C;
|
||||
$onSecondaryContainer: #F9E1BC;
|
||||
$tertiary: #B4CEA6;
|
||||
$onTertiary: #203619;
|
||||
$tertiaryContainer: #7F9873;
|
||||
$onTertiaryContainer: #000000;
|
||||
$error: #FFB4AB;
|
||||
$onError: #690005;
|
||||
$errorContainer: #93000A;
|
||||
$onErrorContainer: #FFDAD6;
|
||||
$primaryFixed: #FFDEA9;
|
||||
$primaryFixedDim: #EEBF6D;
|
||||
$onPrimaryFixed: #271900;
|
||||
$onPrimaryFixedVariant: #5E4100;
|
||||
$secondaryFixed: #F7DFBB;
|
||||
$secondaryFixedDim: #DAC3A1;
|
||||
$onSecondaryFixed: #251A04;
|
||||
$onSecondaryFixedVariant: #54442A;
|
||||
$tertiaryFixed: #CFEBC0;
|
||||
$tertiaryFixedDim: #B4CEA6;
|
||||
$onTertiaryFixed: #0B2006;
|
||||
$onTertiaryFixedVariant: #364D2D;
|
||||
|
||||
+70
-11
@@ -10,7 +10,7 @@
|
||||
.osd-value {
|
||||
@include elevation-border;
|
||||
@include elevation2;
|
||||
background-color: $t_background;
|
||||
background-color: $background;
|
||||
border-radius: 1.023rem;
|
||||
padding: 0.625rem 1.023rem;
|
||||
padding-top: 0.313rem;
|
||||
@@ -65,20 +65,27 @@
|
||||
|
||||
.osd-colorscheme {
|
||||
border-radius: 1.023rem;
|
||||
background-color: $t_background;
|
||||
padding: 1.023rem;
|
||||
background-color: $background;
|
||||
padding: 0.313rem 0.626rem;
|
||||
@include elevation2;
|
||||
}
|
||||
|
||||
.osd-colorscheme-settings {
|
||||
background-color: $background;
|
||||
padding: 0.313rem 0.626rem;
|
||||
@include small-rounding;
|
||||
}
|
||||
|
||||
.osd-color {
|
||||
@include full-rounding;
|
||||
border-radius: 0.650rem;
|
||||
-gtk-outline-radius: 0.650rem;
|
||||
min-width: 2.727rem;
|
||||
min-height: 1.705rem;
|
||||
padding: 0rem 0.341rem;
|
||||
font-weight: bold;
|
||||
|
||||
box {
|
||||
@include full-rounding;
|
||||
@include small-rounding;
|
||||
margin: 0.409rem;
|
||||
}
|
||||
}
|
||||
@@ -103,26 +110,78 @@
|
||||
color: $onSecondaryContainer;
|
||||
box { background-color: $onSecondaryContainer; }
|
||||
}
|
||||
|
||||
.osd-color-tertiary {
|
||||
background-color: $tertiary;
|
||||
color: $onTertiary;
|
||||
box { background-color: $onTertiary; }
|
||||
}
|
||||
.osd-color-tertiaryContainer {
|
||||
background-color: $tertiaryContainer;
|
||||
color: $onTertiaryContainer;
|
||||
box { background-color: $onTertiaryContainer; }
|
||||
}
|
||||
|
||||
.osd-color-error {
|
||||
background-color: $error;
|
||||
color: $onError;
|
||||
box { background-color: $onError; }
|
||||
}
|
||||
.osd-color-errorContainer {
|
||||
background-color: $errorContainer;
|
||||
color: $onErrorContainer;
|
||||
box { background-color: $onErrorContainer; }
|
||||
}
|
||||
|
||||
.osd-color-surface {
|
||||
background-color: $surface;
|
||||
color: $onSurface;
|
||||
border: 0.068rem solid $outlineVariant;
|
||||
box { background-color: $onSurface; }
|
||||
}
|
||||
|
||||
.osd-color-surfaceContainer {
|
||||
background-color: $surfaceContainer;
|
||||
color: $onSurface;
|
||||
box { background-color: $onSurface; }
|
||||
}
|
||||
|
||||
.osd-color-inverseSurface {
|
||||
background-color: $inverseSurface;
|
||||
color: $inverseOnSurface;
|
||||
box { background-color: $onSurfaceVariant; }
|
||||
}
|
||||
|
||||
.osd-color-surfaceVariant {
|
||||
background-color: $surfaceVariant;
|
||||
color: $onSurfaceVariant;
|
||||
box { background-color: $onSurfaceVariant; }
|
||||
}
|
||||
.osd-color-surface {
|
||||
background-color: $surface;
|
||||
color: $onSurface;
|
||||
box { background-color: $onSurface; }
|
||||
}
|
||||
|
||||
.osd-color-background {
|
||||
background-color: $background;
|
||||
color: $onBackground;
|
||||
box { background-color: $onBackground; }
|
||||
}
|
||||
|
||||
.osd-settings-btn-arrow {
|
||||
@include full-rounding;
|
||||
@include icon-material;
|
||||
min-width: 1.705rem;
|
||||
min-height: 1.705rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $surfaceContainerHigh;
|
||||
}
|
||||
&:active {
|
||||
background-color: $surfaceContainerHighest;
|
||||
}
|
||||
}
|
||||
|
||||
.osd-show {
|
||||
transition: 200ms cubic-bezier(0.1, 1, 0, 1);
|
||||
}
|
||||
|
||||
.osd-hide {
|
||||
transition: 190ms cubic-bezier(0.85, 0, 0.15, 1);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user