[THEME] Argon (main thread)

I have decided to start this thread as a way to keep together all the information regarding this excellent theme for OpenWrt along with a conversation about its issues and how to fix them. The original developer @jerryk maintains the official repo of this theme, a set of two packages that are not yet available in the OpenWrt package database

The theme is really pleasant to the eye, as you can see here:

It has been carefully curated to look great both on PC:

And on mobile browsers:

But the installation process is tricky and still needs some work. While it is fixed by the developer, I will try to summarize in this OP the important issues and how to overcome them in order to have a beautiful Argon theme up and running.

There are two main issues:

  1. The config package for Argon is not fully updated to the new opkg, and the library required to maintain backward compatibility is not included in the dependencies in the config package.
  2. The buggy CSSTidy module in the default Luci breaks some portions of the CSS files of this theme, causing undesired visual artifacts when the Argon packages are baked into the firmware. The CSSTidy module simplifies and reduces the size of the CSS files of any theme or additional page. In Argon, CSSTidy reduces these files from 158 KB to 82 KB. However, CSSTidy is buggy and, more often than not, breaks some pages.

And there are three solutions to them:

  1. The straightforward solution would be to work the code to fix these issues, the same way other packages like bootstrap had to be modified to be compatible with CSSTidy. But that is nothing that you as a user can do, unless you can handle lua, CSS, HTML... code and are willing to contribute to the project.
  2. Apply workarounds to an existing installation without updating the firmware. Easy patch but not good for devices with reduced resources.
  3. Build a new image — using imagebuilder, or from sources— removing the problems by including all the patches in the firmware image.

INSTALLATION IN A ROUTER

Ensure your router has internet access. Log into its command line interface (CLI) using this command in your PC (replace the IP address if your router has another IP address):

ssh root@192.168.1.1

Once you are logged into your router's CLI type this:

opkg update
opkg install luci-lib-ipkg
mkdir -p /tmp/okibcn
cd /tmp/okibcn
URL=$(wget -q https://api.github.com/repos/jerrykuku/luci-theme-argon/releases/latest -O - | awk -F \" -v RS="," '/browser_download_url/ && /argon_/ {print $(NF-1)}')
wget $URL -O $(basename $URL)
opkg install $(basename $URL)
rm  -rf /tmp/okibcn/*
URL=$(wget -q https://api.github.com/repos/jerrykuku/luci-theme-argon/releases/latest -O - | awk -F \" -v RS="," '/browser_download_url/ && /config_/ {print $(NF-1)}')
wget $URL -O $(basename $URL)
opkg install $(basename $URL)
cd
rm -rf /tmp/okibcn

You are all set. If you have a session open in your browser, just logout using the LuCI interface. Then log in again to your router using the web interface and go to System > System > Language and Style and select Argon in the Design field. Now click on save & apply button and logout.

If you want to configure the accent color, the light/dark mode and other settings, go to System > Argon config in the web interface.

This method will not survive a firmware upgrade and you will have to repeat it every time you upgrade your firmware image. To avoid that you can integrate Argon in the images you build. The next two messages in this thread will illustrate how to do it using the OpenWrt imagebuilder, and building the firmware directly from source.

6 Likes

INTEGRATE ARGON IN THE FIRMWARE USING IMAGEBUILDER:

To build the image you need a Linux system, Windows Subsystem for Linux (WSL) works fine too. Ensure your Linux OS has all the required tools to compile the image: p7zip-full build-essential libncurses5-dev libncursesw5-dev zlib1g-dev gawk git gettext libssl-dev xsltproc rsync wget unzip python. This is the sequence of commands for Ubuntu that ensures your system is ready to use the imagebuilder:

sudo rm -rf /etc/apt/sources.list.d/* /usr/share/dotnet /usr/local/lib/android /opt/ghc
sudo -E apt-get -qq update
sudo -E apt-get -qq upgrade -y
sudo -E apt-get -qq install p7zip-full build-essential libncurses5-dev libncursesw5-dev zlib1g-dev gawk git gettext libssl-dev xsltproc rsync wget unzip python
sudo -E apt-get -qq autoremove --purge
sudo -E apt-get -qq clean

Now your Linux is ready to build the image. Let's do it:

PROFILE="netgear_r7800"          # REPLACE THE PROFILE OF YOUR DEVICE
RELEASE="snapshots"              # "21.02.2" or "21.02.1" FOR OLDER RELEASES
TARGET="ipq806x"                 # USE THE TARGET ARCHITECTURE FOR YOUR DEVICE
ARCH="generic"                   # USE THE SUBTARGET ARCHITECTURE FOR YOUR DEVICE

DIFF_PACKAGES="luci luci-compat luci-lib-ipkg luci-theme-argon luci-app-argon-config"

mkdir -p openwrt.imagebuilder
cd openwrt.imagebuilder
if [ "$RELEASE" = "snapshots" ]; then 
    wget https://downloads.openwrt.ifw.cn/$RELEASE/targets/$TARGET/$ARCH/openwrt-imagebuilder-$TARGET-$ARCH.Linux-x86_64.tar.xz -O - | tar xJf - --strip-components=1;
else
    wget https://downloads.openwrt.ifw.cn/releases/$RELEASE/targets/$TARGET/$ARCH/openwrt-imagebuilder-$RELEASE-$TARGET-$ARCH.Linux-x86_64.tar.xz -O - | tar xJf - --strip-components=1;
fi
! grep -q "src imagebuilder file:packages" repositories.conf && echo "src imagebuilder file:packages" >> repositories.conf
mkdir -p packages
URL=$(wget -q https://api.github.com/repos/jerrykuku/luci-theme-argon/releases/latest -O - | awk -F \" -v RS="," '/browser_download_url/ && /argon_/ {print $(NF-1)}')
wget $URL -O packages/$(basename "$URL")
URL=$(wget -q https://api.github.com/repos/jerrykuku/luci-theme-argon/releases/latest -O - | awk -F \" -v RS="," '/browser_download_url/ && /config_/ {print $(NF-1)}')
wget $URL -O packages/$(basename "$URL")
SAFEPATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
PATH=$SAFEPATH make -j$(nproc) image PROFILE=$PROFILE PACKAGES="$DIFF_PACKAGES" FILES=files/ EXTRA_IMAGE_NAME="$(date +"%Y.%m.%d-%H%M")"

After less than 5 minutes your image will be baked. Your hot new image is ready, you can see it by typing:

cd  bin/targets/*/*/
ls

If everything went fine, your argon-ready sysupgrade image should be there.
If you are using WSL, just type explorer.exe . to open a file browser in that location so you can easily upload the image from Windows.
Adding Argon makes the image 440 KB larger.

2 Likes

FULL BUILD FROM SOURCES WITH ARGON

:
To build the image you need a Linux system, including the Linux Subsystem for Windows. Ensure your Linux OS has all the required set of tools to compile the image: diff find flex gawk gcc-6+ getopt grep libc-dev libz-dev make4.1+ perl. This is the sequence of commands for Ubuntu:

sudo rm -rf /etc/apt/sources.list.d/* /usr/share/dotnet /usr/local/lib/android /opt/ghc
sudo -E apt-get -qq update
sudo -E apt-get -qq upgrade -y
sudo -E apt-get -qq install -y git bzip2 diff find flex gawk gcc-6+ getopt grep libc-dev libz-dev make4.1+ perl python3.6+ rsync subversion unzip which 
sudo -E apt-get -qq autoremove --purge
sudo -E apt-get -qq clean

Now your Linux is ready to build the image from source. Let's do it:

git clone -b master https://github.com/openwrt/openwrt.git openwrt
cd openwrt
SAFEPATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
PATH=$SAFEPATH ./scripts/feeds update -a
PATH=$SAFEPATH ./scripts/feeds install -a
git clone -b master https://github.com/jerrykuku/luci-theme-argon package/luci-theme-argon
git clone -b master https://github.com/jerrykuku/luci-app-argon-config package/luci-app-argon-config
echo "CONFIG_PACKAGE_luci=y" >> .config
echo "CONFIG_PACKAGE_luci-compat=y" >> .config
echo "CONFIG_PACKAGE_luci-lib-ipkg=y" >> .config
echo "# CONFIG_LUCI_CSSTIDY is not set" >> .config
echo "CONFIG_PACKAGE_luci-theme-argon=y" >> .config
echo "CONFIG_PACKAGE_luci-app-argon-config=y" >> .config
make menuconfig

Select your device, otherwise it will build for all devices. The device selection requires only the first three lines, selecting target architecture, subtarget and then the specific device model. Don't touch anything else below that unless you know what you are doing.

Now you are ready to build your image, just type:

PATH=$SAFEPATH make defconfig
PATH=$SAFEPATH make -j$(nproc)

After more than 1 hour your image will be baked. Your hot new image is ready, you can see it by typing:

cd  bin/targets/*/*/
ls

If everything went fine, your argon-ready sysupgrade image should be there.
If you are using WSL, just type explorer.exe . to open a file browser in that location so you can easily upload the image from Windows.

2 Likes

We have a wiki for documentation. If you want to keep information, the wiki would be the place to go.

You can turn it off in the LuCI compile options...

1 Like

Sure, but not everyone knows how to build an image from sources. I am planning to add instructions on how to integrate everything in the image builder too. Actually, that CSS minifier is a nice thing, but it should work better. The code behind http://www.codebeautifier.com/ is the same, and you can see the terrible effect on any CSS code with aggressive settings. Probably easing the compression could make it less annoying.

1 Like

IMHO, the forum is a better tool to discuss and improve the theme. If we could have a comment addon below each wiki page, then it would be ideal, otherwise, having the info and the discussion in two different places is an unnecessary complication. On top of that, Argon packages are not available in the OpenWrt package database. So, it is an external app at this point.

1 Like

You can turn it off in the LuCI compile options...

It would be nice if we could enable/disable CSS Tidy preprocessor when installing new themes in a production system too.

1 Like

How? As the csstidy has been run already at the build stage, the CSS in .ipk is already tiny.

The installation by opkg is just about copying files, not anymore about compilation/packaging changes.

1 Like

The CSS is already tiny, and CSStidy is breaking it. I would like to include it in the OpenWrt system. I have found a way to patch it so it won't need the luci-lib-ipk. And maybe I could remove also the need for luci-compat. But the CSS tidy is really bothering more than helping.

1 Like

Installation method remains the same still? I am using OpenWrt 21.02.3, should I follow the method in first post?

last command give this error

root@OpenWrt:~# opkg install luci-theme-argon*.ipk
Collected errors:
 * wfopen: luci-theme-argon*.ipk: No such file or directory.
 * pkg_init_from_file: Failed to extract control file from luci-theme-argon*.ipk.
root@OpenWrt:~#

I had to download the file manually and upload it to OpenWRT via WinSCP. I am GUI-loving Noob :rofl:


then issued this command

opkg install luci-theme-argon_2.2.9-20211016-1_all.ipk

the result is beautiful.

@okibcn I don't see System > Argon config

install these two packages too
opkg install luci-compat
opkg install luci-lib-ipkg

tried installing these

root@OpenWrt:/# opkg install luci-compat
Package luci-compat (git-22.046.85744-f08a0f6) installed in root is up to date.
root@OpenWrt:/# opkg install luci-lib-ipkg
Package luci-lib-ipkg (git-18.318.71164-4bbe325) installed in root is up to date.
root@OpenWrt:/#

both are up to date

I think this thread is a good idea. many packages available for OpenWRT are not available
through the official OpenWRT nor listed here. and this theme is one I have yet to seen mentioned much on this forum. Glad someone posted it. I my self compile this theme with source. and as OP said, CSS seems to have some ill effects at times. anyhow.. This thread was a good idea..

there is onemore file you need to install i guess "luci-app-argon-config_0.9-20210309_all.ipk" this one. have you installed this?

1 Like

How do I install it? And from where I can download it?
It is not available on opkg list.

Check the releases in github.. for 18.0.6 luci you can find that package.

I am on 21.03.