Module 6 - Personnalisation et thèmes WikiJS

// Variables de couleurs
:root {
  // Couleurs principales
  --color-primary: #{$primary-color};
  --color-primary-dark: #{darken($primary-color, 10%)};
  --color-primary-light: #{lighten($primary-color, 20%)};
  
  --color-secondary: #{$secondary-color};
  --color-accent: #{$accent-color};
  
  // Couleurs sémantiques
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  // Couleurs de fond
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --bg-accent: #{rgba($primary-color, 0.05)};
  
  // Couleurs de texte
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-inverse: #ffffff;
  
  // Couleurs de bordure
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --border-dark: #9ca3af;
  
  // Ombres
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  // Typographie
  --font-family-sans: #{$font-family};
  --font-family-heading: #{$heading-font};
  --font-family-mono: #{$code-font};
  
  // Tailles de police
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  
  // Espacements
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  // Rayons de bordure
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  
  // Durées de transition
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  
  // Z-index
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 1060;
}

// Variables spécifiques au thème sombre
[data-theme="dark"] {
  --bg-primary: #1f2937;
  --bg-secondary: #111827;
  --bg-tertiary: #0f172a;
  
  --text-primary: #f9fafb;
  --text-secondary: #d1d5db;
  --text-tertiary: #9ca3af;
  
  --border-light: #374151;
  --border-medium: #4b5563;
  --border-dark: #6b7280;
}

// Mixins utilitaires
@mixin button-variant($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  border: 1px solid $bg-color;
  
  &:hover {
    background-color: darken($bg-color, 5%);
    border-color: darken($bg-color, 5%);
  }
  
  &:active {
    background-color: darken($bg-color, 10%);
    border-color: darken($bg-color, 10%);
  }
}

# Créer un nouveau thème
wikijs theme:create mon-theme-custom

# Structure générée automatiquement
cd themes/mon-theme-custom

# Installer les dépendances
npm install

# Mode développement avec hot-reload
npm run dev

# Build du thème pour production
npm run build

# Validation du thème
wikijs theme:validate mon-theme-custom

# Installation du thème
wikijs theme:install ./mon-theme-custom

# Activation du thème
wikijs theme:activate mon-theme-custom

// webpack.config.js pour le thème
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: {
    app: './assets/js/app.js',
    theme: './assets/scss/app.scss'
  },
  
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].min.js',
    publicPath: '/themes/mon-theme-custom/'
  },
  
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: ['node_modules']
              }
            }
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images',
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts',
            }
          }
        ]
      }
    ]
  },
  
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].min.css'
    })
  ],
  
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        cssProcessorOptions: {
          safe: true,
          discardComments: {
            removeAll: true
          }
        }
      })
    ]
  },
  
  devServer: {
    contentBase: './dist',
    hot: true,
    proxy: {
      '/': 'http://localhost:3000'  // Proxy vers WikiJS
    }
  }
};

{
  "name": "mon-theme-custom",
  "version": "1.0.0",
  "description": "Thème personnalisé pour WikiJS",
  "main": "theme.yml",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production",
    "package": "npm run build && npm run package:zip",
    "package:zip": "zip -r mon-theme-custom.zip . -x node_modules/\\* .git/\\* *.log",
    "validate": "ajv validate -s theme-schema.json -d theme.yml",
    "test": "npm run validate && npm run build"
  },
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0",
    "sass": "^1.35.0",
    "sass-loader": "^12.0.0",
    "css-loader": "^6.0.0",
    "mini-css-extract-plugin": "^2.0.0",
    "file-loader": "^6.2.0",
    "ajv-cli": "^5.0.0"
  },
  "peerDependencies": {
    "wiki.js": ">=2.5.0"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/moncompte/mon-theme-custom.git"
  },
  "keywords": ["wikijs", "theme", "corporate"],
  "author": "Votre Nom",
  "license": "MIT"
}