joint实现一个支持亮色暗色切换的流程表工作流图表效果代码-html代码-BFW代码库

joint实现一个支持亮色暗色切换的流程表工作流图表效果代码

代码语言：html

所属分类：图表

代码描述：joint实现一个支持亮色暗色切换的流程表工作流图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/joint.3.7.2.css">
  
<style>
:root {
  /* JointJS Palette */
  --jj-color1: #ed2637;
  --jj-color2: #131e29;
  --jj-color3: #dde6ed;
  --jj-color4: #f6f740;
  --jj-color5: #0075f2;
  --jj-color6: #1a2938;
  --jj-color7: #cad8e3;
  /* Dark Theme */
  --step-stroke-color: var(--jj-color1);
  --step-fill-color: var(--jj-color2);
  --step-text-color: var(--jj-color3);
  --decision-stroke-color: var(--jj-color3);
  --decision-fill-color: var(--jj-color2);
  --decision-text-color: var(--jj-color3);
  --start-stroke-color: var(--jj-color1);
  --start-fill-color: var(--jj-color2);
  --start-text-color: var(--jj-color1);
  --flow-stroke-color: var(--jj-color1);
  --flow-label-stroke-color: var(--jj-color2);
  --flow-label-fill-color: var(--jj-color1);
  --flow-label-text-color: var(--jj-color3);
  --flow-selection-color: var(--jj-color6);
  --frame-color: var(--jj-color4);
  --background-color: var(--jj-color2);
  --switch-color: var(--jj-color3);
  --switch-background-color: var(--jj-color1);
  --logo-color: var(--jj-color3);
}

/* Light Theme */
.light-theme {
  --step-stroke-color: var(--jj-color1);
  --step-fill-color: var(--jj-color3);
  --step-text-color: var(--jj-color2);
  --decision-stroke-color: var(--jj-color2);
  --decision-fill-color: var(--jj-color3);
  --decision-text-color: var(--jj-color2);
  --start-stroke-color: var(--jj-color1);
  --start-fill-color: var(--jj-color3);
  --start-text-color: var(--jj-color1);
  --flow-stroke-color: var(--jj-color1);
  --flow-label-stroke-color: var(--jj-color3);
  --flow-label-fill-color: var(--jj-color1);
  --flow-label-text-color: var(--jj-color3);
  --flow-selection-color: var(--jj-color7);
  --frame-color: var(--jj-color5);
  --background-color: var(--jj-color3);
  --switch-color: var(--jj-color3);
  --switch-background-color: var(--jj-color2);
  --logo-color: var(--jj-color2);
}

/* Flowchart */
.jj-start-body {
  fill: var(--start-fill-color);
  stroke: var(--start-stroke-color);
}

.jj-start-text {
  fill: var(--start-text-color);
}

.jj-step-body {
  fill: var(--step-fill-color);
  stroke: var(--step-stroke-color);
}

.jj-step-text {
  fill: var(--step-text-color);
}

.jj-decision-body {
  fill: var(--decision-fill-color);
  stroke: var(--decision-stroke-color);
  stroke-width: 3;
}

.jj-decision-text {
  fill: var(--decision-text-color);
}

.jj-flow-line {
  stroke: var(--flow-stroke-color);
  stroke-width: 1;
}

.jj-flow-outline {
  stroke: var(--background-color);
  stroke-width: calc(calc(var(--flow-spacing) * 2) + 1px);
}

.jj-flow-label-body {
  stroke: var(--flow-label-stroke-color);
  fill: var(--flow-label-fill-color);
  stroke-width: calc(var(--flow-spacing));
}

.jj-flow-label-text {
  fill: var(--flow-label.........完整代码请登录后点击上方下载按钮下载查看