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

Posted 2020-08-17 阿拉蕾家的小铁匠

一般来说网站改版或者由于用户喜好不同,需要准备几套不同的主题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 此方法适用于资源文件内容较大的情况。