4.3 テーマ

ダーク・テーマは、次のように設定を使用して有効にできます:

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello'
    },
    labels:['color']
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World'
    },
    labels:['color']
  },
  {
    id: 3,
    properties: {
      name: 'Some Name'
    },
    labels:['text']
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2,
    labels: ['edge']
  },
  {
    id: 2,
    source: 2,
    target: 3,
    labels: ['edge']
  }
];

const settings = {
  theme: 'dark',
  baseStyles: {
    vertex: {
      label: { text: '${properties.name}' }
    }
  }
};

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

対応するビジュアライゼーションが次のように表示されます:

図4-4 ダーク・テーマの適用

「図4-4 ダーク・テーマの適用」の説明

カスタマイズされたテーマを作成して、背景色と前景色を変更することもできます。

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello'
    },
    labels:['color']
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World'
    },
    labels:['color']
  },
  {
    id: 3,
    properties: {
      name: 'Some Name'
    },
    labels:['text']
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2,
    labels: ['edge']
  },
  {
    id: 2,
    source: 2,
    target: 3,
    labels: ['edge']
  }
];

const settings = {
  customTheme: {
    'backgroundColor': '#2F3C7E',
    'textColor': '#FBEAEB'
  },
  baseStyles: {
    vertex: {
      label: { text: '${properties.name}' }
    }
  }
};

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

カスタム・テーマは次のように適用されます:

図4-5 カスタム・テーマの適用

「図4-5 カスタム・テーマの適用」の説明

また、次の点にも注意してください。

• ダーク・テーマとカスタム・テーマの両方を同時に適用すると、カスタム・テーマに定義された色がダーク・テーマの色より優先されます。
• ラベルの色が設定に指定されている場合、テーマ設定の色ではなく、ラベル設定の色がラベルに使用されます。