如何基于Smarty模板引擎实现CSS主题配色方案切换？

方法一：利用Smarty变量+文件存在判断模拟fallback机制 #

• 先在配置或模板中定义主题目录与基础目录的变量，比如：

  {assign var="theme_css_dir" value="themes/your-theme/css"}
  {assign var="base_css_dir" value="themes/base/css"}
  

• 输出CSS链接时，通过Smarty的file_exists函数判断主题目录下的目标文件是否存在，存在则用主题文件，否则 fallback 到基础文件：

  {if file_exists($theme_css_dir "/custom.css")}
  <link rel="stylesheet" href="{$theme_css_dir}/custom.css">
  {else}
  <link rel="stylesheet" href="{$base_css_dir}/custom.css">
  {/if}
  

• 嫌重复代码麻烦的话，可以封装成Smarty自定义函数，比如{get_theme_css file="custom.css"}，函数内部统一处理文件检查与路径输出。

方法二：将CSS文件作为Smarty模板文件处理 #

• 把需要多主题切换的CSS文件重命名为.tpl后缀（比如custom.css.tpl），这样就能直接利用Smarty多模板目录的 fallback 规则——当首个主题目录找不到该模板时，自动从基础目录查找。
• 在页面模板中，可以通过两种方式输出CSS：
  1. 直接用{include}嵌入CSS内容，记得用{literal}包裹原生CSS代码避免Smarty解析冲突：

     <style>
     {literal}
     /* 这里是原生CSS内容 */
     {/literal}
     {include file="css/custom.css.tpl"}
     </style>
     

  2. 写一个专门的PHP接口，调用Smarty解析对应的CSS模板，设置Content-Type: text/css后输出，页面中直接引用该接口地址即可。

方法三：前端JS实现加载fallback #

• 先尝试加载主题特定的CSS文件，若加载失败（比如404），则自动切换为基础CSS文件：

  function loadThemeCss(themeUrl, baseUrl) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = themeUrl;
    // 加载失败时切换到基础文件
    link.onerror = () => link.href = baseUrl;
    document.head.appendChild(link);
  }
  // 调用时传入Smarty渲染的路径变量
  loadThemeCss('{$theme_css_dir}/custom.css', '{$base_css_dir}/custom.css');
  

内容的提问来源于stack exchange，提问作者klm123