首页 > 代码库 > 网站多种主题颜色替换的不同实现

网站多种主题颜色替换的不同实现

一般来说网站改版或者由于用户喜好不同,需要准备几套不同的主题or皮肤,

本文从颜色示例,记录一下就网站主要配色切换的几种方法及场景:

一 ,每一套主题配置一份资源文件(web/css)、

这种思路是最简单的,在布局文件中引用选中主题的资源即可,

缺点在于 需要生成几份文件并维护,网站本身引用插件的资源文件也需要配置成对应几份,具体实现就不多说了

二,使用CSS变量来配置主题,方法如下:

  1,根据管理员选择生成主题css颜色文件,

        $colorcss=":root{".PHP_EOL
        ."--nicecolor:".$colorcode.";".PHP_EOL
        ."}";
        file_put_contents‘/web/css/themecolor.css‘, $colorcss);

 生成的css 文件如下:

:root{
--nicecolor:#0aa770;
}

2,在主布局中引用该css文件,例如Yii2中可以写在\assets\AppAsset.php中,在view中引用即可。

class AppAsset extends AssetBundle
{
    public $basePath = ‘@webroot‘;
    public $baseUrl = ‘@web‘;
    public $css = [
        ‘css/themecolor.css‘,
        ‘css/site.css‘,
        
    ];
}

3,在资源文件中引用变量即可,例如

.themesnewstyle{
    background-color: var(--nicecolor);
}
.themesnewstyle1{
    color: var(--nicecolor);
}

 

4 这种方法比较简单,适合演示 做demo,支持火狐和chrome,不支持IE,edge等,不能作为线上使用

三 PHP 代码替换生成资源类css

 1 定义文件内容替换方法如下:

    //替换文件内容
    public static function fileReplace($dir,$oldstr,$newstr){        
        file_put_contents($dir,str_replace($oldstr,$newstr,file_get_contents($dir)));
    }

2  在管理员更换主题时,调用该方法替换相关的css文件即可

fileReplace(getcwd().‘/uploadify/uploadify.css‘, $colorold, $colornew);

3 这种方法需要资源文件提供写权限,适合中小网站资源文件不太大的时候(百K以内)

 四  和第三种类似,区别在于替换文件内容方法不一样

1 替换CSS文件内容

    //替换文件内容
    public static function fileReplace($dir,$oldstr,$newstr){        
        $fp=fopen("home.css",‘r+‘);

     while(!feof($fp))
     {
        $buffer=fgets($fp,4096);
        //替换文件
        $buffer = str_replace($oldstr,$newstr,$buffer);
        fwrite($fp, $buffer);
     }
     fclose($fp);
    }

2 此方法适用于资源文件内容较大的情况。

网站多种主题颜色替换的不同实现