diff --git a/README.md b/README.md index d0c65a1..03f0402 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,20 @@ # Chromium pywal theme generator -Generates [pywal](https://github.com/dylanaraps/pywal) theme for Chromium +Generates [pywal](https://github.com/dylanaraps/pywal) and [kde-material-you-colors](https://github.com/luisbocanegra/kde-material-you-colors) themes for Chromium and Chromium-based browsers. ![Screenshot](./Screenshots/screenshot.png) ## Usage - -1. Run script `./generate-theme.sh` -2. Open chromium +Note: If you're using kde-material-you-colors, `generate-pywal-theme.sh` will not deliver good results. +So make sure to use `generate-material-you-theme.sh` instead +1. Run script `./generate-pywal-theme.sh` for pywal or `./generate-material-you-theme.sh` for kde-material-you-colors. +2. Open Chromium 3. Go to `chrome://extensions` 4. Turn on "Developer Mode" in the top right corner 5. Press "Load unpacked" -6. Select "Pywal" (by default) in the same folder with the script -7. ??? -8. PROFIT! +6. Select "Pywal" or "MaterialYou" (by default) in the same folder with the script +7. PROFIT! + However, you need to run this script and restart chromium each time you change pywal colors (or reload extension manually, since there is no way to do it automatically). So, make an alias or something like that. diff --git a/generate-material-you-theme.sh b/generate-material-you-theme.sh new file mode 100755 index 0000000..ac2884e --- /dev/null +++ b/generate-material-you-theme.sh @@ -0,0 +1,79 @@ +#!/bin/bash + +scheme=$(jq ".schemes.dark" "/tmp/kde-material-you-colors-$(whoami).json") # import colors from kde-material-you +wallpaper=$(jq ".pywal.dark.wallpaper" "/tmp/kde-material-you-colors-$(whoami).json" -r) + +THEME_NAME="MaterialYou" + + +DIR=$(dirname "${BASH_SOURCE[0]}") +THEME_DIR="$DIR/$THEME_NAME" + +# Converts hex colors into rgb joined with comma +# #fff -> 255, 255, 255 +hexToRgb() { + # Remove '#' character from hex color #fff -> fff + plain=${1#*#} + printf "%d, %d, %d" 0x${plain:0:2} 0x${plain:2:2} 0x${plain:4:2} +} + +prepare() { + if [ -d $THEME_DIR ]; then + rm -rf $THEME_DIR + fi + + mkdir $THEME_DIR + mkdir "$THEME_DIR/images" + + # Copy wallpaper so it can be used in theme + background_image="images/theme_ntp_background_norepeat.png" + cp "$wallpaper" "$THEME_DIR/$background_image" + +} + + +primary=$(hexToRgb $(echo $scheme | jq ".primary" -r)) +on_primary=$(hexToRgb $(echo $scheme | jq ".onPrimary" -r)) +secondary_container=$(hexToRgb $(echo $scheme | jq ".secondaryContainer" -r)) +on_secondary_container=$(hexToRgb $(echo $scheme | jq ".onSecondaryContainer" -r)) +tertiary=$(hexToRgb $(echo $scheme | jq ".tertiary" -r)) +surface_container=$(hexToRgb $(echo $scheme | jq ".surfaceContainer" -r)) +background=$(hexToRgb $(echo $scheme | jq ".background" -r)) + +echo $background + +generate() { + # Theme template + cat > "$THEME_DIR/manifest.json" << EOF + { + "manifest_version": 3, + "version": "1.0", + "name": "$THEME_NAME Theme", + "theme": { + "images": { + "theme_ntp_background" : "$background_image" + }, + "colors": { + "frame": [$surface_container], + "frame_inactive": [$background], + "toolbar": [$secondary_container], + "ntp_text": [$on_secondary_container], + "ntp_link": [$tertiary], + "ntp_section": [$secondary_container], + "button_background": [$on_primary], + "toolbar_button_icon": [$on_secondary_container], + "toolbar_text": [$on_secondary_container], + "omnibox_background": [$primary], + "omnibox_text": [$on_primary] + }, + "properties": { + "ntp_background_alignment": "bottom" + } + } + } +EOF +} + +prepare +generate +echo "Pywal Chrome theme generated at $THEME_DIR" diff --git a/generate-theme.sh b/generate-pywal-theme.sh similarity index 100% rename from generate-theme.sh rename to generate-pywal-theme.sh